Maria Kuhn: April 29, 2017

Color Contrast and Web Accessibility

color contrast/visibility chartOn 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.

Other Ways to Keep Your Site's Contrast in Mind

  • The larger the font and wider the stroke, the more legible it will be with lower contrast. Therefore the contrast requirement for larger font is lower. W3C recommends starting at 18pt regular weight or 14pt bold text.
  • Provide tools for users to adjust the foreground and background colors of your site on the front-end. This is especially helpful for users that need to either switch to a low contrast or a high contrast mode. This gives them more control over the contrast ratio and covers everyone using your site regardless of what kind of vision loss or color deficiency they have.
  • Steer clear of text-based images and use text wherever possible. If not, consider using a high resolution for text images. And when using text images, don't forget to include the "alt" tag.
  • Ensure that your placeholders in forms also have valid color contrast.