If PageSpeed Insights is showing the “Background and foreground colors do not have a sufficient contrast ratio” message for your site, some of the text on the tested page is harder to read than accessibility standards recommend.
The good news: this is one of the easier accessibility issues to fix. This guide explains what the message means, how to pinpoint the exact elements that fail, and how to adjust their colors in three simple steps. 🎨
What is the “Background and foreground colors do not have a sufficient contrast ratio” message?
The message comes from Lighthouse, the open-source auditing tool that powers PageSpeed Insights. It appears when the contrast ratio between a text element (the foreground) and the color behind it (the background) falls below the recommended minimum. A typical example is light gray text sitting on a white background.
The standards in question come from the Web Content Accessibility Guidelines (WCAG) [1], the internationally recognized set of guidelines for making web content more accessible. The current version, WCAG 2.2, requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, with “large” meaning at least 18pt, or 14pt bold (roughly 24px and 18.5px).
Not sure how these ratios work? Don’t worry, there’s a closer look 🔎 coming up in the tutorial.
There are some exceptions to these requirements, covering text and graphics that are not vital for understanding the content or functionality:
- text inside inactive interface components, such as disabled buttons,
- purely decorative text, or text that is part of a picture containing significant other visual content,
- text forming part of a logo or brand name.
⚡️ Pro tip: The most common low-contrast issue in PageSpeed Insights reports is text that is simply too light for its background. Consider these examples:
Light gray text often gets used to tone down the prominence of elements like image captions or affiliate disclosures. If you want to follow the accessibility guidelines, that’s a habit to drop. As the example above shows, even the minimum passing ratio of 4.5:1 requires fairly dark text.
How to fix the “Background and foreground colors do not have a sufficient contrast ratio” accessibility error
A poor contrast ratio can alienate a portion of your visitors, and the lack of accessibility reflects badly on your business. Here’s how to fix it in three steps:
- Step 1: Identify which elements show low contrast
- Step 2: Determine the contrast ratio of your elements
- Step 3: Adjust the colors to meet the recommended contrast ratio
Step 1: Identify which elements show low contrast
PageSpeed Insights can pinpoint the elements with insufficient contrast. Enter your page URL at PageSpeed Insights, wait for the report, then scroll to the Accessibility category.
If the page fails the contrast check, expand the “Background and foreground colors do not have a sufficient contrast ratio” audit and you’ll get the list of the elements in question, complete with CSS selectors and code snippets:
Since PageSpeed Insights tests one page at a time, these elements should be easy to identify. If you’re unsure which is which, right-click the element on the page and choose Inspect to match the selector.
Want a second opinion, or a live scan while you browse? The same Lighthouse engine runs inside Chrome DevTools (open DevTools, then find Lighthouse in the panel tabs and run an Accessibility audit), and free browser extensions like WAVE and axe DevTools flag low-contrast text directly on the page.
For the purposes of this tutorial, the example is a cover block on the page with a button that has an insufficient contrast ratio:
Step 2: Determine the contrast ratio of your elements
This is where things get fun. Here’s a time-saver 👉 if you’re using Chrome, you don’t need any extra tools at all. Right-click the element, choose Inspect, then click the color swatch next to the color declaration in the Styles pane. The DevTools color picker displays the element’s contrast ratio, marks the AA and AAA thresholds inside the color field, and can even suggest a compliant color for you.
The manual route works too. Use any color picker to grab the hex codes of the foreground and background elements (on macOS, ColorSlurp is a solid option). In the example, the background is the yellow hue of the “Shop chairs” button, the foreground is the color of the text on it.
When you have both hex codes, enter them into the WebAIM Contrast Checker. The tool automatically calculates the contrast ratio between the two colors:
Below the ratio, the tool tells you if the colors meet the WCAG accessibility guidelines for normal and large text, at both the AA and AAA levels. If you get all passes, you’re good to go. If not, adjust the colors using the luminance sliders below the codes until you find a happy medium. The example pair comes in at 1.64:1, well below the 4.5:1 minimum, so the button text needs a darker shade.
Step 3: Adjust the colors to meet the recommended contrast ratio
This last step is simple, particularly on WordPress. The exact route depends on where the failing elements live, and the easiest ones are in your page content.
If you use the Block Editor, click on the block to access its settings, then open the Color panel in the sidebar:
Each option under the Color menu lets you modify a specific element within the block, such as the text or the background. Select an option and the color palette will appear:
Now click on the gradient preview and enter the hex code you settled on in step 2:
As you can see from the screenshots above, the Block Editor automatically displays a warning that the color combination “may be hard for people to read” when your pick falls short. That built-in check is still part of the editor in WordPress 7.0, so you get instant feedback before you even publish. 👍
Once you’re set, save the changes to the page and test it again with PageSpeed Insights. If the new colors have a sufficient contrast ratio, the message will not appear anymore.
If the elements with the contrast issue live outside the content of your page, such as in the header or footer, adjust their colors through your theme instead. Block themes handle this in the Site Editor (Appearance → Editor, under Styles → Colors), while classic themes expose the options in the Customizer.
And if your theme lacks the option to modify the color settings of these problematic elements, you can fix all of the contrast errors at once by adding some custom CSS code to your site.
The importance of contrast in web accessibility
Contrast plays a crucial role in web accessibility. It ensures that everyone can read and understand the content on the page, regardless of their visual abilities, and it makes navigation easier for people with low vision or color blindness.
It is also the most widespread accessibility problem on the web. In the 2026 WebAIM Million analysis of the top one million home pages, low-contrast text was found on 83.9% of them, making it the most common detectable WCAG failure of all.
The audience affected is not a niche. In the US alone, 2.5% of the population has a visual disability. That’s a significant chunk of users who might be turned away from your website because of accessibility issues.
Good color contrast increases readability for everyone else too, from visitors browsing in bright sunlight to people on older, washed-out screens. Accessibility improvements tend to pay off across the board.
Fix your color contrast ratio errors for good
The PageSpeed Insights report includes an accessibility audit. If you see the “Background and foreground colors do not have a sufficient contrast ratio” warning, it means that users with visual impairment may struggle to see the elements on the page.
📌 Here’s what you need to do if you run into this message:
- Identify which elements show low contrast.
- Determine the contrast ratio of your elements, using a tool like the WebAIM Contrast Checker.
- Adjust the colors on the page to meet the recommended contrast ratio.
Do you still have any questions about how to fix the “Background and foreground colors do not have a sufficient contrast ratio” error in PageSpeed Insights? Let us know in the comments!
FREE GUIDE
4 Essential Steps to Speed Up Your WordPress Website
Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%. 🚀
i need to solve the problem “Background and foreground colors do not have a sufficient contrast ratio”