Google Lighthouse is a free tool for auditing website performance, search engine optimization (SEO), and web accessibility.
It’s a useful resource, but it’s also fairly strict. If you’ve run a Lighthouse accessibility report on your website, you’ll likely see a number of failed checks with associated error messages. That’s not a huge concern — even Google’s own Lighthouse website fails several checks — but a “sufficient contrast ratio" error will usually require remediation.
Here’s the full text of the error message:
Background and foreground colors do not have a sufficient contrast ratio.
As you might have guessed, this indicates that the text on your page may not be readable for all users.
To fix the error, you’ll need to change your color scheme to meet the standards of the Web Content Accessibility Guidelines (WCAG). Here’s what you should know before getting started.
Why is color contrast important for accessibility?
While Lighthouse isn’t designed to measure conformance with the WCAG, the color contrast test uses WCAG’s requirements for color contrast ratio — defined as the difference in luminance (light) between text (or anything in the foreground of a web page) and the background.
Color contrast is important because many people have color vision deficiencies (also called color blindness), low vision, and other vision-related disabilities. Even for a person with perfect vision, low-contrast text may be difficult to read. For a person with a visual disability, low-contrast text may be completely invisible.
Automated tools can test color contrast by using the unique numeric codes that identify colors in a website’s CSS (Cascading Style Sheets) and HTML. They compare those numeric codes to WCAG’s requirements, which can be found in Success Criterion (SC) 1.4.3, “Contrast (Minimum).”
- The visual presentation of most text and images of text must have a contrast ratio of at least 4.5:1.
- Large-scale text (text with a size of at least 18 point or 15 point bold) must have a contrast ratio of at least 3:1.
- Text that is part of a logo or brand name has no contrast requirement.
Finding Color Contrast Issues with Lighthouse
You can use Lighthouse by opening Google Chrome DevTools and selecting the Lighthouse tab. Select the “Accessibility" checkbox and run the report.
When you find a “sufficient contrast ratio" error, you can simply click the dropdown under the error message for a list of Failing Elements. This doesn’t provide much additional information — Lighthouse will not recommend different color-pairs to resolve the issue.
Since the tool takes some time to load and provides limited feedback, you might consider using other free resources like the a11y® Color Contrast Accessibility Validator to quickly check your use of color. The a11y® Color Contrast Validator allows designers to test individual color-pairs, which can speed up the time for remediation.
When in doubt, try to choose simple, common combinations such as black text against a white background. And remember, while high-contrast settings (also called “dark modes") may be helpful for some users, they’re not sufficient for meeting WCAG’s requirements — every version of your website must meet WCAG SC 1.4.3.
Google Lighthouse has issues, but its color contrast requirements are fairly reliable
As we’ve discussed in other articles, Google’s Lighthouse has significant limitations as an accessibility checker. This is true for every automated accessibility test — including our own automated audits (read why a hybrid approach with manual and automated testing provides the best path to digital compliance).
But while Lighthouse isn’t perfect, it’s useful for finding color contrast issues. That’s because WCAG’s requirements for color contrast can be tested with a simple pass-or-fail check — other criteria require human judgment, which automated tools cannot currently provide.
Remember, every organization has a legal and ethical responsibility to accommodate users with disabilities. An accessible website can be a tremendous asset for your business — the best practices of WCAG can improve experiences for every user while also enhancing your SEO and marketing campaigns.