A quick guide for color contrast and web accessibility

Confirming the colors work well together when designing a website can be challenging. But did you know that ensuring they also work well with the WCAG (Web Content Accessibility Guidelines) color contrast standards are equally important? 

In the United States alone, 3.8 million adults aged 21-64 are blind or have trouble seeing, even with glasses. Plus, with an aging population, guaranteeing your web designs are accessible is more important than ever.

Watch the lesson

WCAG color contrast requirements

Color contrast is the difference between the foreground and background color. It's essential for people who have color vision deficiencies, for people who are visually impaired, for people who are colorblind, and for people with low vision.

The WCAG uses a ratio to guide what level of contrast is needed. The guidelines are below.

WCAG 2.1 Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large text

Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental

Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes

Text that is part of a logo or brand name has no contrast requirement.

WCAG 2.1 Level AAA

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

Large text

Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;

Incidental

Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes

Text that is part of a logo or brand name has no contrast requirement.

Testing color contrast on your website

You may wonder how to calculate the minimum required contrast ratio—it's not as hard as you think! That's because there are tools that help with the process.

If you're using a design tool like Figma, consider the A11y - Color Contrast Checker plugin. If you need to check the color contrast on live websites, try the WCAG Color contrast checker Chrome extension. For a more manual approach, visit the online Contrast Ratio Checker.

Conclusion

With so much riding on web accessibility, it's crucial to clearly understand the requirements and how they might impact your website design. The above tools are great for testing these elements as you work on your designs. 

Still, with so many variables involved in creating accessible websites, it's always better to understand what you can do ahead of time. That way, when everyone else is scrambling around trying to fix their color contrast problems later down the road (and trust me: they will be), you'll already know how to avoid them.