1.1 Use high color contrast for text
Poor text contrast will prevent users with vision impairments from seeing and reading the content on our site. This can also affect users who may be browsing in bright sunlight.
WCAG 1.4.3: Contrast (Minimum) Opens in a new window
Details
- Font smaller than 18 point or 14 point bold must have a contrast ratio of 4.50:1 or higher with it's background (measured out to 2 decimal places). Be careful not to confuse point with px.
- Font that is 18 point or 14 point bold or larger must have a contrast ratio of 3.00:1 or higher with it's background.
- When text is placed over an image, all text edges must meet the contrast ratios above.
- Placeholder text for form fields is not exempt from this standard.
- Hover/focus states are not exempt from this standard.
- Elements currently in a disabled state are exempt from this standard.
Examples
Good Combinations
#616161 on white = 6.19
white on #616161 = 6.19
#00355f on white = 12.54
#616161 on #ededed = 5.29
Bad Combinations
#999999 on white = 2.84
white on #999999 = 2.84
#ffcb00 on white = 1.52
#757575 on #ededed = 3.93
Tips
- For smaller text, the lightest gray you can use on a white background is #767676.
- A simple test of contrast is to view your page in greyscale - if anything looks faint or difficult to read to you then it probably does not have enough contrast.
- When text appears on top of an image, measure the contrast of the edges with the lowest contrast and make sure they meet the minimum.