In 2019, non-profit organization WebAIM (Web Accessibility In Mind) started what has become an annual tradition: the WebAIM Million. Performing automated evaluations on the home pages of the top one million websites, the annual analysis provides some insight into the most common accessibility issues and a general gauge on the volume of accessibility violations. The 2021 report indicates that over 86% of home pages had violations detected for low contrast text.
Color contrast issues are among the most avoidable and easiest to correct, yet they are the most common. WebAIM data also shows that a slightly higher number of home pages fail to meet minimum color contrast requirements this year than in 2019 (up to 86.4% from 85.3%). It's one percent, but it's one percent in the wrong direction.
What does it mean to have low color contrast?
Color contrast is the difference in light between content and its background. When there isn't enough of a difference between two colors, they're difficult or impossible to visually distinguish.
The WebAIM scans found instances on 86.4% of home pages in which the color of text didn't contrast enough against the color of its background to meet the minimum thresholds defined in the Web Content Accessibility Guidelines (WCAG). In fact, they found an average of 31 contrast failures per home page.
How can you check your website's color contrast?
The a11y® Color Contrast Accessibility Validator gives anyone a free, instant color contrast analysis of a web page per WCAG 2.1 guidelines.
How can you correct color contrast violations?
WCAG 2.1 success criterion 1.4.3 contrast (minimum) dictates the minimum contrast that's generally considered accessible. By adjusting text to meet or exceed minimum contrast ratios, it will comply with accepted standards and be more accessible.
- For normal text, a color contrast minimum of 4.5:1 is acceptable.
- For large text, a color contrast minimum of 3:1 is acceptable.
To learn more, read the Basics and Importance of Color Contrast for Web Accessibility.
How can you avoid color contrast issues in the future?
It's best to prevent color contrast violations from ever occurring. Here are three ways to help that happen:
- Provide designers and content creators with accessible color combinations to work with and choose from.
- Test color contrast before publishing.
- Teach anyone who impacts design, content, or marketing decision, including project managers or C-level executives, about the need to always have strong color contrast.
If accessibility isn't part of the company culture yet, check out How to Introduce People to Digital Accessibility: 7 Tips to help spread the word.
