UX Design Tips

Color Contrast

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.

To find ideas, find problems. To find problems, talk to people.

~Julie Zhou
Eyeglasses and laptop

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 images, don't forget to include the "alt" tag.
  • Ensure that your placeholders in forms also have valid color contrast.

A beautiful product that doesn’t work very well is ugly

~Jony Ive
Street art