By Hunter Becton on July 21, 2022
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.
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.
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.
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.
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.
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.