Background and foreground colors do not have a sufficient contrast ratio

2 May 2019 • Updated 19 Sep 2019

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:

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.

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:

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:

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:

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