Web accessibility is slowly improving — but for the fifth consecutive year, the most common web accessibility issue hasn’t changed.
Each year, WebAIM (Web Accessibility In Mind) conducts an automated audit of the home pages for the top 1 million websites. While automated tests have significant limitations, WebAIM’s Million report provides a useful snapshot of the state of digital accessibility.
In their most recent analysis, WebAIM found that 96.3% of home pages had detectable failures of the Web Content Accessibility Guidelines (WCAG) version 2.0.
The most common issue: low-contrast text, which was detected on 83.6% of home pages. That was a slight decrease from 83.9% of websites in 2022 — but it’s still far too high.
Why Contrast Remains a Major Accessibility Barrier
So, why is color contrast such an important (and frequently neglected) accessibility issue?
By one estimate from Georgetown University, 8 percent of the U.S. population have some type of visual impairment. When text has insufficient contrast with its background, users with visual disabilities may be unable to read it — particularly if they have color vision deficiencies (also called color blindness'’) or low vision.
WCAG addresses this issue by defining a minimum color contrast ratio, which is a two-number figure that describes the difference in luminance (light) between the foreground and background.
For most text, WCAG requires a minimum contrast ratio of 4.5:1. For large text, a contrast ratio of 3:1 is acceptable. To give those numbers some context, black text on a white background has a contrast ratio of 21:1.
But while WCAG’s color contrast rules are fairly straightforward, many designers simply aren’t aware of the requirement — and they choose color-pairs that are visually appealing, but not accessible.
That approach isn’t ideal. Color contrast issues are frequently cited in accessibility lawsuits filed under Title III of the Americans with Disabilities Act (ADA), and low-contrast text impacts virtually every user with moderate vision disabilities.
Related: Designing for Color Contrast: Guidelines for Accessibility
Color contrast issues can be easily identified with automated tests
For those of us in the digital accessibility space, color contrast issues are especially frustrating for a simple reason: They’re extremely easy to identify and fix.
Automated tools can quickly test color combinations against WCAG requirements. The Bureau of Internet Accessibility provides the free a11y® color contrast accessibility validator, which can instantly test web pages or individual color-pairs.
If your site doesn’t meet the minimum thresholds, you simply need to update one of the colors. In most cases, implementing the fix will take a few minutes of working with your website’s CSS (Cascading Style Sheets).
Some additional tips to keep in mind:
- Color contrast isn’t just about text. Pay close attention to user interface components and parts of graphics that are required to understand the content. Make sure that those elements maintain a contrast ratio of at least 3:1.
- Providing a high-contrast mode (or “dark mode") can help accessibility, but all versions of your website must maintain appropriate contrast. Learn why offering a dark mode doesn’t satisfy WCAG’s color contrast requirements.
- Make sure designers understand how color affects accessibility. The Bureau of Internet Accessibility provides a free Easy Guide to Accessible Colors, a one-page “cheat sheet" for accessible color usage.
Finally, remember that web accessibility is about accommodating all of the ways that different people might use your website — not just users with severe vision or hearing disabilities.
Following WCAG’s Level AA success criteria will help you provide a consistent experience for people who use assistive technologies (AT), people who browse with a keyboard alone, and a wide range of other users.
To start developing better content, test your website with our free WCAG Level AA web analysis. For more information about common accessibility barriers, download our eBook: The Ultimate Guide to Web Accessibility.
