Maria Kuhn: April 29, 2017
Color Contrast and Web Accessibility
On the web, color contrast is about finding colors that not only provide maximum contrast, but provide enough contrast between content and the background for anyone with low vision impairments and color deficiencies. The text and non-decorative images need to be clearly legible for everyone regardless of whether they have moderately low vision or color deficiencies.
A contrast ratio of 3:1 is the minimum standard for text and vision. For those with visual impairments however, the contrast ratio standard is 4.5:1. The standard ratios differ depending on the vision loss or color deficiency. Our colors need to fall into these ratios. These ratios have “grades” or what are known as “levels of conformance”. Levels of conformance are the requirements you’ve satisfied. So the more requirements you’ve met, in our case with contrast, the higher our “grade” or level of conformance will be. The higher, the better. The highest we can reach is AAA. The contrast ratio to reach that level is 7:1.
W3C states that it’s not always possible to reach the AAA level of conformance across entire sites, so the goal is to get the highest level you can where it counts. Read more on W3C’s article “The Contrast Minimum” that explains how these ratios are calculated.
Use the Color Contrast Checker by WebAIM to check your colors for contrast.