Ensure background and foreground colors have a sufficient contrast ratio

Low-contrast text is difficult or impossible for many users to read. Lighthouse reports when the background and foreground colors do not have a sufficient contrast ratio:

How to fix this problem #

To fix this problem, provide sufficient contrast for background and foreground colors. Some people with low vision experience low contrast. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details.

Text that is too close in luminance (brightness) to the background can be hard to read, especially for people with low vision, but all users can benefit from sufficient contrast. Ensure color contrast of at least 4.5:1 for small text or 3:1 for large text. Large text is defined as 18pt or 14pt bold.

Try the Color Contrast Analyser in Text elements must have sufficient color contrast against the background.

More information #

• Ensure background and foreground colors have sufficient contrast ratio audit source
• axe-core rule descriptions
• List of axe 3.2 rules