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.
- 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.
#616161 on white = 6.19
white on #616161 = 6.19
#00355f on white = 12.54
#616161 on #ededed = 5.29
#999999 on white = 2.84
white on #999999 = 2.84
#ffcb00 on white = 1.52
#757575 on #ededed = 3.93
- 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.