Color contrast refers to the difference in light between text (or other foreground elements) and its background. The Web Content Accessibility Guidelines (WCAG) require normal text and images of text to maintain a contrast ratio of at least 4.5:1; large-scale text must have a contrast ratio of at least 3:1.
Why is this important? Low-contrast can be difficult to read, particularly for people with certain vision and neurocognitive disabilities. It’s a crucial accessibility issue — and unfortunately, it’s one of the most frequently overlooked WCAG standards.
According to 2022 research from WebAIM (Web Accessibility In Mind), 83.9% of the internet’s top 1 million homepages had detectable color contrast issues. On average, each home page had 31.6 instances of low-contrast text.
The Bureau of Internet Accessibility offers a free color contrast validation tool to help webmasters identify (and address) this issue. However, it’s important to fix contrast problems correctly — to do so, you’ll need to avoid a common remediation mistake.
Providing contrast options for users is helpful, but it’s not enough for accessibility
In recent years, a growing number of websites and mobile applications have introduced high-contrast modes (also known as “dark modes"), which tend to be extremely popular with all users. Dark modes have visual appeal, and they can improve reading comprehension for some users with disabilities.
However, as we’ve noted on this blog, dark modes have significant drawbacks when they’re not optional:
- A dark web theme might make focus indicators less visible, creating navigation issues.
- Some dark modes may make hyperlink text less distinguishable (or indistinguishable) from regular text, which can lead to accidental link activation.
- Most high-contrast themes use light-color text on a dark background. People with astigmatism and dyslexia often prefer reading dark text on a light background.
Most importantly, high-contrast settings do not satisfy WCAG 2.1 Success Criterion 1.4.3, “Contrast (Minimum).” This criterion doesn’t include exceptions for websites that offer users an optional dark mode — it simply requires accessible contrast for all non-incidental text.
Related: The Basics and Importance of Color Contrast for Web Accessibility
Color contrast issues are easy to identify with automated audits
Contrast issues can be quickly identified by basic tools, which won’t check to determine whether your website offers optional themes. That’s part of the reason that low-contrast text is frequently cited as an accessibility failure under the Americans with Disabilities Act (ADA) and other non-discrimination laws.
The bottom line: In order to address low-contrast text, you’ll need to change your default design to meet WCAG standards. You can still provide users with several themes or color options, but don’t assume that offering a “dark mode" toggle will fix your contrast issue.
Related: 4 Web Accessibility Remediation Mistakes to Avoid
After changing default color values, should my website offer contrast options?
Providing a high-contrast or low-contrast toggle switch — or more complex visual theme options — is an excellent way to accommodate more visitors. Dark modes, for instance, are less likely to trigger photophobia (sensitivity to light) and may make reading easier in low-light conditions.
And while dark modes are extremely popular, “light modes" are also beneficial. A light theme may purposely use low-contrast text. As long as light mode is optional, this doesn’t cause WCAG conformance issues. According to WCAG:
“Some people with cognitive disabilities require color combinations or hues that have low contrast, and therefore we allow and encourage authors to provide mechanisms to adjust the foreground and background colors of the content … This is not a violation of this Success Criterion provided there is a mechanism that will return to the default values set out in the Success Criteria.”
Of course, if you decide to offer optional themes, make sure to test them for other accessibility concerns. In particular, you’ll want to make sure that hyperlinks and focus indicators are clearly distinguishable.
Quick Tips for Accessible Color Contrast
Following WCAG’s color contrast requirements can make your website or mobile app more readable, which can improve user retention — and reduce frustration for people with vision-related conditions. Here are a few quick tips to keep in mind:
- Don’t rely on the “eye test.” Use our Color Contrast Validator or a similar tool to test color combinations against WCAG standards.
- Make sure designers understand the importance of accessible color contrast from the first stages of development.
- Logos and incidental text do not need to conform with WCAG SC 1.4.3. However, if you have the option, it’s in your best interest to make all text accessible.
- Never use color alone to convey information or meaning. Read more about the use of color for accessibility.
For more guidance, contact the Bureau of Internet Accessibility to speak with a subject matter expert.
