{"id":69189,"date":"2023-05-25T15:30:00","date_gmt":"2023-05-25T12:30:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=69189"},"modified":"2024-04-09T18:24:39","modified_gmt":"2024-04-09T15:24:39","slug":"background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/","title":{"rendered":"How to Fix the \u201cBackground and Foreground Colors Do Not Have a Sufficient Contrast Ratio\u201d Accessibility Error"},"content":{"rendered":"\n

If you’re seeing the \u201cBackground and Foreground Colors Do Not Have a Sufficient Contrast Ratio<\/em>\u201d error in PageSpeed Insights, it indicates that there are elements of your site’s design that fail to meet accessibility requirements.<\/p>\n\n\n\n\n\n\n\n

In this post, I’ll explain what causes this error, explain how to fix it in three simple steps and discuss why ensuring sufficient color contrast is crucial for creating an inclusive web environment.<\/p>\n\n\n\n

Let’s get to work.<\/p>\n\n\n

<\/div>\n\n\n\n

What is the \u201cBackground and foreground colors do not have a sufficient contrast ratio\u201d message?<\/h2>\n\n\n\n

The \u201cBackground and foreground colors do not have a sufficient contrast ratio\u201d error means the contrast ratio between the two elements doesn’t meet the recommended standards. For example, you might be using a similar shade of gray for both the background and the text.<\/p>\n\n\n

\n
\"\u201cBackground<\/figure><\/div>\n\n\n

These standards are established by the Web Content Accessibility Guidelines (WCAG) [1]<\/sup>. This is a set of internationally recognized guidelines for making web content more accessible. WCAG suggests a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure optimal legibility.<\/p>\n\n\n\n

If you’re not sure how these ratios work, don’t worry. We’ll take a closer look at them \ud83d\udd0e in the tutorial. <\/p>\n\n\n\n

There are some exceptions to these requirements. These include text and graphics that are not vital for understanding the content or functionality:<\/p>\n\n\n\n