Digital Accessibility Index: Learn where the world’s leading brands fall short on accessibility.

See Report

How to Fix Google Lighthouse's 'Sufficient Contrast Ratio' Error

Apr 25, 2023

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).” 

Those requirements: 

  • 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.

Related: Designing for Color Contrast: Guidelines for Accessibility

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

Related: Google's Lighthouse Accessibility Tests Are Helpful, But Not Perfect

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.

To see how your website compares with the latest version of WCAG’s Level AA standards, get started with a free, confidential automated analysis or send us a message to connect with an expert.

Use our free Website Accessibility Checker to scan your site for ADA and WCAG compliance.

Powered By

Recent posts

Do I Need a VPAT for My Business?

May 15, 2024

UI Motion and Accessibility: Tips for Designers

May 14, 2024

The Most Common Web Accessibility Issue of 2024 (and How to Fix It)

May 3, 2024

Not sure where to start?

Start with a free analysis of your website's accessibility.