Skip to content
Learn Measure Blog Case studies About
On this page
  • How the Lighthouse color contrast audit fails
  • How to ensure text has sufficient color contrast
  • Resources

Background and foreground colors do not have a sufficient contrast ratio

May 2, 2019 — Updated Sep 19, 2019
Available in: Español, 日本語, 한국어, Português, Русский, 中文, English
Appears in: Accessibility audits
On this page
  • How the Lighthouse color contrast audit fails
  • How to ensure text has sufficient color contrast
  • Resources

Text that has a low contrast ratio—that is, text whose brightness is too close to the background brightness—can be hard to read. For example, presenting light gray text on a white background makes it difficult for users to distinguish the shapes of the characters, which can reduce reading comprehension and slow down reading speed.

While this issue is particularly challenging for people with low vision, low-contrast text can negatively affect the reading experience for all your users. For example, if you've ever read something on your mobile device outside, you've probably experienced the need for text with sufficient contrast.

How the Lighthouse color contrast audit fails #

Lighthouse flags text whose background and foreground colors don't have a sufficiently high contrast ratio:

Lighthouse audit showing background and foreground colors do not have sufficient contrast ratio

To evaluate text's color contrast, Lighthouse uses success criterion 1.4.3 from WCAG 2.1:

  • Text that is 18 pt, or 14 pt and bold, needs a contrast ratio of 3:1.
  • All other text needs a contrast ratio of 4.5:1.

Because of the nature of the audit, Lighthouse can't check the color contrast of text superimposed on an image.

Caution

In version 2.1, WCAG expanded its color contrast requirements to include user interface elements and images. Lighthouse doesn't check these elements, but you should do so manually to ensure your entire site is accessible to people with low vision.
The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.

How to ensure text has sufficient color contrast #

Make sure all text on your page meets the minimum color contrast ratios specified by WCAG:

  • 3:1 for text that is 18 pt, or 14 pt and bold
  • 4.5:1 for all other text

One way to find a color that will meet contrast requirements is to use Chrome DevTools' color picker:

  1. Right-click (or Command-click on Mac) the element you want to check, and select Inspect.
  2. In the Styles tab of the Elements pane, find the color value for the element.
  3. Click the color thumbnail next to the value.

The color picker tells you whether the element meets color contrast requirements, taking font size and weight into account:

Screenshot of Chrome DevTools color picker with color contrast information highlighted

You can use the color picker to adjust the color until its contrast is high enough. It's easiest to make adjustments in the HSL color format. Switch to that format by clicking the toggle button on the right of the picker:

Screenshot of Chrome DevTools color picker with the color format toggle highlighted

Once you have a passing color value, update your project's CSS.

More complex cases, like text on a gradient or text on an image, need to be checked manually, as do UI elements and images. For text on an image, you can use DevTools' background color picker to check the background that the text appears on:

Screenshot of Chrome DevTools background color picker

For other cases, consider using a tool like the Paciello Group's Colour Contrast Analyser.

Resources #

  • Source code for Background and foreground colors do not have a sufficient contrast ratio audit
  • Text elements must have sufficient color contrast against the background (Deque University)
  • Colour Contrast Analyser
Last updated: Sep 19, 2019 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.