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.
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:
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
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
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.
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:
For more guidance, contact the Bureau of Internet Accessibility to speak with a subject matter expert.