{"id":69189,"date":"2023-05-25T15:30:00","date_gmt":"2023-05-25T12:30:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=69189"},"modified":"2026-08-13T18:43:14","modified_gmt":"2026-08-13T15:43:14","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<p class=\"wp-block-paragraph\">If PageSpeed Insights is showing the &ldquo;<em>Background and foreground colors do not have a sufficient contrast ratio<\/em>&rdquo; message for your site, some of the text on the tested page is harder to read than accessibility standards recommend.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">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. &#127912;<\/p>\n\n\n    \r\n    <style>\r\n        :root {\r\n        --jtoc-progress-bar-color: #4267cf;\n        }\r\n                    .wpj-jtoc.--jtoc-theme-none.--jtoc-has-custom-styles {\r\n        --jtoc-width: 100%;\n--jtoc-toc-padding: 24px;\n--jtoc-toc-border: 1px solid;\n--jtoc-toc-border-color: #dedede;\n--jtoc-background-color: #f6f7f9;\n--jtoc-header-height: 20px;\n--jtoc-header-margin: 0;\n--jtoc-header-padding: 0;\n--jtoc-title-color: #393939;\n--jtoc-title-font-size: 1.2em;\n--jtoc-title-label-font-weight: 400;\n--jtoc-body-margin: 16px 0 0 0;\n--jtoc-body-padding: 0;\n--jtoc-headings-margin: 10px 0 0 0;\n--jtoc-link-font-size: 1em;\n--jtoc-link-font-weight: 400;\n--jtoc-link-color: #848484;\n--jtoc-link-color-hover: #4a66c8;\n--jtoc-link-color-active: #4a66c8;\n        }\r\n        .--jtoc-the-content{\r\ndisplay:none;\r\n}\r\n.--jtoc-is-active>.wpj-jtoc--item-content>a:before{\r\nmargin-left:3px;\r\n}\r\n.wpj-jtoc--nav>.wpj-jtoc--items li a::before{\r\ncontent:'\\203A';\r\ndisplay:block;\r\nfloat:left;\r\nheight:100%;\r\nfont-weight:700;\r\ncolor:#4267CF;\r\nline-height: 20px;\r\nmargin-right: 3px;\r\n}\r\n.sidebar .wpj-jtoc--toc{\r\nborder:0;\r\npadding:0;\r\n}\r\n.sidebar .wpj-jtoc--header,\r\n.sidebar .wpj-jtoc--body{\r\nbackground:transparent;\r\n}\r\n\r\n.sidebar .--jtoc-is-active>.wpj-jtoc--item-content>a{\r\ntext-decoration:none;\r\n}\r\n.sidebar-left .widget-first{\r\nposition:sticky;\r\ntop:70px;\r\nmargin-bottom:1250px;\r\n}\r\n.sidebar-left{\r\ndisplay:none;\r\nmax-width:300px;\r\nposition:absolute;\r\nleft:-330px;\r\ntop:0;\r\nheight:100%;\r\n}\r\n@media only screen and (max-width: 1900px) {\r\n.single-post .sidebar-left{\r\ndisplay:none !important;\r\n}\r\n.--jtoc-the-content{\r\ndisplay:block;\r\n}\r\n@media only screen and (max-width: 400px) {\r\n.wpj-jtoc--item .wpj-jtoc--item-content{\r\nmargin-top:5px;\r\n}\r\n.wpj-jtoc--header-main .wpj-jtoc--title{\r\nfont-size:1.1em;\r\n}\r\n}    <\/style>\r\n\r\n\r\n    <!-- jtoc progress bar widget -->\r\n    <div class=\"wpj-jtoc--widget-progress --progress-top\">\r\n        <div class=\"wpj-jtoc--widget-progress-bar\"><\/div>\r\n    <\/div>\r\n\r\n<div id=\"wpj-jtoc\" class=\"wpj-jtoc wpj-jtoc--main --jtoc-the-content --jtoc-theme-none --jtoc-title-align-left --jtoc-toggle-icon --jtoc-toggle-position-right --jtoc-toggle-1 --jtoc-header-as-toggle --jtoc-headings-full-row-clickable --jtoc-floating-toc-top --jtoc-floating-has-shadow --jtoc-has-custom-styles --jtoc-is-unfolded\" >\r\n            \r\n    <!-- TOC -->\r\n    <div class=\"wpj-jtoc--toc \">\r\n                            <div class=\"wpj-jtoc--header\">\r\n                <div class=\"wpj-jtoc--header-main\">\r\n                                        <div class=\"wpj-jtoc--title\">\r\n                        <!-- <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-columns-3\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\/><path d=\"M9 3v18\"\/><path d=\"M15 3v18\"\/><\/svg> -->\r\n                        <span class=\"wpj-jtoc--title-label\">Table of contents<\/span>\r\n                    <\/div>\r\n                                                        <\/div>\r\n            <\/div>\r\n                                <div class=\"wpj-jtoc--body\">\r\n                        <nav class=\"wpj-jtoc--nav\">\r\n                <ol class=\"wpj-jtoc--items\"><li class=\"wpj-jtoc--item --jtoc-h2\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"2\">\r\n                        <a href=\"#what-is\" title=\"What is the \u201cBackground and foreground colors do not have a sufficient contrast ratio\u201d message?\" data-numeration=\"1\" >What is the \u201cBackground and foreground colors do not have a sufficient contrast ratio\u201d message?<\/a>\r\n                    <\/div> <\/li><li class=\"wpj-jtoc--item --jtoc-h2\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"2\">\r\n                        <a href=\"#how-to-fix-it\" title=\"How to fix the \u201cBackground and foreground colors do not have a sufficient contrast ratio\u201d accessibility error\" data-numeration=\"2\" >How to fix the \u201cBackground and foreground colors do not have a sufficient contrast ratio\u201d accessibility error<\/a>\r\n                    <\/div> <ol class=\"wpj-jtoc--items\"><li class=\"wpj-jtoc--item --jtoc-h3\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"3\">\r\n                        <a href=\"#step-1\" title=\"Step 1: Identify which elements show low contrast\" data-numeration=\"2.1\" >Step 1: Identify which elements show low contrast<\/a>\r\n                    <\/div> <\/li><li class=\"wpj-jtoc--item --jtoc-h3\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"3\">\r\n                        <a href=\"#step-2\" title=\"Step 2: Determine the contrast ratio of your elements\" data-numeration=\"2.2\" >Step 2: Determine the contrast ratio of your elements<\/a>\r\n                    <\/div> <\/li><li class=\"wpj-jtoc--item --jtoc-h3\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"3\">\r\n                        <a href=\"#step-3\" title=\"Step 3: Adjust the colors to meet the recommended contrast ratio\" data-numeration=\"2.3\" >Step 3: Adjust the colors to meet the recommended contrast ratio<\/a>\r\n                    <\/div> <\/li><\/ol><\/li><li class=\"wpj-jtoc--item --jtoc-h2\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"2\">\r\n                        <a href=\"#the-importance-of-contrast-in-web-accessibility\" title=\"The importance of contrast in web accessibility\" data-numeration=\"3\" >The importance of contrast in web accessibility<\/a>\r\n                    <\/div> <\/li><li class=\"wpj-jtoc--item --jtoc-h2\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"2\">\r\n                        <a href=\"#fix-your-color-contrast-ratio-errors-for-good\" title=\"Fix your color contrast ratio errors for good\" data-numeration=\"4\" >Fix your color contrast ratio errors for good<\/a>\r\n                    <\/div> <\/li><\/ol>            <\/nav>\r\n                                                        <\/div>\r\n            <\/div>\r\n<\/div>\r\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"what-is\">What is the &ldquo;Background and foreground colors do not have a sufficient contrast ratio&rdquo; message?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=570952661  fetchpriority=\"high\" decoding=\"async\" width=\"949\" height=\"443\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/background-and-foreground-colors-do-not-have-sufficient-contrast-ratio-error-in-PSI.png\" alt=\"&ldquo;Background and foreground colors do not have a sufficient contrast ratio&rdquo; message in Page Speed Insights\" class=\"wp-image-102580\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:949\/h:443\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/background-and-foreground-colors-do-not-have-sufficient-contrast-ratio-error-in-PSI.png 949w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:140\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/background-and-foreground-colors-do-not-have-sufficient-contrast-ratio-error-in-PSI.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:359\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/background-and-foreground-colors-do-not-have-sufficient-contrast-ratio-error-in-PSI.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:23\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/background-and-foreground-colors-do-not-have-sufficient-contrast-ratio-error-in-PSI.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:224\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/background-and-foreground-colors-do-not-have-sufficient-contrast-ratio-error-in-PSI.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:371\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/background-and-foreground-colors-do-not-have-sufficient-contrast-ratio-error-in-PSI.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:138\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/background-and-foreground-colors-do-not-have-sufficient-contrast-ratio-error-in-PSI.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:182\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/background-and-foreground-colors-do-not-have-sufficient-contrast-ratio-error-in-PSI.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:126\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/background-and-foreground-colors-do-not-have-sufficient-contrast-ratio-error-in-PSI.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:949\/h:443\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/background-and-foreground-colors-do-not-have-sufficient-contrast-ratio-error-in-PSI.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The standards in question come from the Web Content Accessibility Guidelines (WCAG) <sup>[1]<\/sup>, 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 &ldquo;large&rdquo; meaning at least 18pt, or 14pt bold (roughly 24px and 18.5px).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Not sure how these ratios work? Don&rsquo;t worry, there&rsquo;s a closer look &#128270; coming up in the tutorial.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are some exceptions to these requirements, covering text and graphics that are not vital for understanding the content or functionality:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>text inside inactive interface components, such as disabled buttons,<\/li>\n\n\n\n<li>purely decorative text, or text that is part of a picture containing significant other visual content,<\/li>\n\n\n\n<li>text forming part of a logo or brand name.<\/li>\n<\/ul>\n\n\n<div class=\"su-note\" style=\"border-color:#dedede;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\"><div class=\"su-note-inner su-u-clearfix su-u-trim\" style=\"background-color:#f8f8f8;border-color:#ffffff;color:#333333;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\">\n\n\n\n<p class=\"wp-block-paragraph\"><strong>&#9889;&#65039;<\/strong> <strong>Pro tip:<\/strong> The most common low-contrast issue in PageSpeed Insights reports is text that is simply too light for its background. Consider these examples:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-opt-id=1840389857  fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"256\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:256\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png\" alt=\"Three gray-on-white text examples with contrast ratios of 1.2:1, 2.24:1 and 4.54:1, only the last one passing\" class=\"wp-image-102579\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:256\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:75\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:192\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:13\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:120\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:199\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:74\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:98\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:68\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:300\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/contrast-examples-grey-on-white.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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&rsquo;s a habit to drop. As the example above shows, even the minimum passing ratio of 4.5:1 requires fairly dark text.<\/p>\n\n\n<\/div><\/div>\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"how-to-fix-it\">How to fix the &ldquo;Background and foreground colors do not have a sufficient contrast ratio&rdquo; accessibility error<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A poor contrast ratio can alienate a portion of your visitors, and the lack of accessibility reflects badly on your business. Here&rsquo;s how to fix it in three steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Step 1: <a href=\"#step-1\">Identify which elements show low contrast<\/a><\/li>\n\n\n\n<li>Step 2: <a href=\"#step-2\">Determine the contrast ratio of your elements<\/a><\/li>\n\n\n\n<li>Step 3: <a href=\"#step-3\">Adjust the colors to meet the recommended contrast ratio<\/a><\/li>\n<\/ul>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"step-1\">Step 1: Identify which elements show low contrast<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">PageSpeed Insights can pinpoint the elements with insufficient contrast. Enter your page URL at <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a>, wait for the report, then scroll to the <em>Accessibility<\/em> category.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If the page fails the contrast check, expand the &ldquo;Background and foreground colors do not have a sufficient contrast ratio&rdquo; audit and you&rsquo;ll get the list of the elements in question, complete with CSS selectors and code snippets:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=1802568558  fetchpriority=\"high\" decoding=\"async\" width=\"2560\" height=\"1782\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png\" alt=\"PageSpeed Insights report with the Background and foreground colors do not have a sufficient contrast ratio audit expanded, listing failing elements with thumbnails and CSS selectors\" class=\"wp-image-118358\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1551\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 2560w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:209\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:713\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:535\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:1069\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1551\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:35\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:345\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 345w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:570\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 570w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:862\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 862w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:213\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 213w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:280\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 280w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:194\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 194w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1551\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/08\/contrast-audit-final-scaled.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Since PageSpeed Insights tests one page at a time, these elements should be easy to identify. If you&rsquo;re unsure which is which, right-click the element on the page and choose <em>Inspect<\/em> to match the selector.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Want a second opinion, or a live scan while you browse? The same Lighthouse engine runs inside Chrome DevTools (open DevTools, then find <em>Lighthouse<\/em> in the panel tabs and run an <em>Accessibility<\/em> audit), and free browser extensions like <a href=\"https:\/\/wave.webaim.org\/\" target=\"_blank\" rel=\"noopener\">WAVE<\/a> and <a href=\"https:\/\/www.deque.com\/axe\/devtools\/\" target=\"_blank\" rel=\"noopener\">axe DevTools<\/a> flag low-contrast text directly on the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the purposes of this tutorial, the example is a cover block on the page with a button that has an insufficient contrast ratio:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-large\"><img data-opt-id=2029930092  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:408\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png\"  decoding=\"async\" width=\"1024\" height=\"408\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:408\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png\" alt=\"Cover block with a yellow &ldquo;Shop chairs&rdquo; button whose pale text has insufficient contrast against the button background\" class=\"wp-image-102584\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:408\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:119\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:306\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:20\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:191\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:316\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:118\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:155\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:107\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1045\/h:416\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 1045w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1045\/h:416\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 2x\"><noscript><img data-opt-id=2029930092  decoding=\"async\" width=\"1024\" height=\"408\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:408\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png\" alt=\"Cover block with a yellow &ldquo;Shop chairs&rdquo; button whose pale text has insufficient contrast against the button background\" class=\"wp-image-102584\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:408\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:119\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:306\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:20\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:191\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:316\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:118\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:155\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:107\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1045\/h:416\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 1045w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1045\/h:416\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/CTA-with-bad-contrast.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n<\/div>\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"step-2\">Step 2: Determine the contrast ratio of your elements<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is where things get fun. Here&rsquo;s a time-saver &#128073; if you&rsquo;re using Chrome, you don&rsquo;t need any extra tools at all. Right-click the element, choose <em>Inspect<\/em>, then click the color swatch next to the <code>color<\/code> declaration in the <em>Styles<\/em> pane. The DevTools color picker displays the element&rsquo;s contrast ratio, marks the AA and AAA thresholds inside the color field, and can even suggest a compliant color for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The manual route works too. Use any color picker to grab the hex codes of the foreground and background elements (on macOS, <a href=\"https:\/\/colorslurp.com\" target=\"_blank\" rel=\"noopener\">ColorSlurp<\/a> is a solid option). In the example, the background is the yellow hue of the &ldquo;Shop chairs&rdquo; button, the foreground is the color of the text on it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you have both hex codes, enter them into the <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\">WebAIM Contrast Checker<\/a>. The tool automatically calculates the contrast ratio between the two colors:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=1539044379  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png\"  decoding=\"async\" width=\"751\" height=\"550\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png\" alt=\"WebAIM Contrast Checker showing a 1.64:1 contrast ratio for #FFF8E9 foreground text on a #FCB900 background, failing WCAG AA and AAA for normal text\" class=\"wp-image-102586\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:751\/h:550\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 751w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:220\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:37\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:328\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 328w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:542\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 542w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:202\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 202w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:266\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 266w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:184\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 184w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:751\/h:550\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 2x\"><noscript><img data-opt-id=1539044379  decoding=\"async\" width=\"751\" height=\"550\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png\" alt=\"WebAIM Contrast Checker showing a 1.64:1 contrast ratio for #FFF8E9 foreground text on a #FCB900 background, failing WCAG AA and AAA for normal text\" class=\"wp-image-102586\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:751\/h:550\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 751w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:220\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:37\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:328\/h:240\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 328w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:542\/h:397\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 542w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:202\/h:148\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 202w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:266\/h:195\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 266w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:184\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 184w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:751\/h:550\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WebAIM_-Contrast-Checker-example.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">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&rsquo;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.<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"step-3\">Step 3: Adjust the colors to meet the recommended contrast ratio<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you use the <a href=\"https:\/\/themeisle.com\/blog\/wordpress-block-editor\/\">Block Editor<\/a>, click on the block to access its settings, then open the <em>Color<\/em> panel in the sidebar:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=1260479925  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png\"  decoding=\"async\" width=\"993\" height=\"472\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png\" alt=\"WordPress block editor with the Color panel open in the block settings sidebar, showing Text and Background options and a contrast warning notice\" class=\"wp-image-102588\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:993\/h:472\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 993w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:143\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:365\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:24\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:228\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:377\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:141\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:185\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:128\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:993\/h:472\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 2x\"><noscript><img data-opt-id=1260479925  decoding=\"async\" width=\"993\" height=\"472\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png\" alt=\"WordPress block editor with the Color panel open in the block settings sidebar, showing Text and Background options and a contrast warning notice\" class=\"wp-image-102588\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:993\/h:472\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 993w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:143\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:365\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:24\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:228\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:377\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:141\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:185\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:128\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:993\/h:472\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/WordPress-block-editor-element-color-settings.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Each option under the <em><strong>Color<\/strong><\/em> 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:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=447599214  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png\"  decoding=\"async\" width=\"998\" height=\"511\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png\" alt=\"The block editor color palette with theme and default color swatches plus a custom color option\" class=\"wp-image-102589\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:998\/h:511\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 998w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:154\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:393\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:26\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:469\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 469w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:775\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 775w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:289\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 289w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:381\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 381w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:264\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 264w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:998\/h:511\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 2x\"><noscript><img data-opt-id=447599214  decoding=\"async\" width=\"998\" height=\"511\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png\" alt=\"The block editor color palette with theme and default color swatches plus a custom color option\" class=\"wp-image-102589\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:998\/h:511\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 998w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:154\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:393\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:26\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:469\/h:240\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 469w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:775\/h:397\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 775w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:289\/h:148\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 289w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:381\/h:195\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 381w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:264\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 264w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:998\/h:511\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/changing-the-color-of-an-element.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now click on the gradient preview and enter the hex code you settled on in step 2:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large blog-img-std\"><img data-opt-id=276684952  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:591\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png\"  decoding=\"async\" width=\"1024\" height=\"591\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:591\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png\" alt=\"The block editor custom color picker with a hex input set to a darker shade and the contrast warning still visible in the sidebar\" class=\"wp-image-102590\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:591\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:173\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:443\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:29\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:416\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 416w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:688\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 688w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1040\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 1040w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:257\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 257w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:338\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 338w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:234\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 234w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1054\/h:608\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 1054w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1054\/h:608\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 2x\"><noscript><img data-opt-id=276684952  decoding=\"async\" width=\"1024\" height=\"591\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:591\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png\" alt=\"The block editor custom color picker with a hex input set to a darker shade and the contrast warning still visible in the sidebar\" class=\"wp-image-102590\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:591\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:173\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:443\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:29\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:416\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 416w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:688\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 688w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1040\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 1040w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:257\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 257w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:338\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 338w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:234\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 234w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1054\/h:608\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 1054w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1054\/h:608\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/04\/block-editor-color-picker.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As you can see from the screenshots above, the Block Editor automatically displays a warning that the color combination &ldquo;may be hard for people to read&rdquo; 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. &#128077;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you&rsquo;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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 (<em>Appearance &rarr; Editor<\/em>, under <em>Styles &rarr; Colors<\/em>), while classic themes expose the options in <a href=\"https:\/\/themeisle.com\/blog\/wordpress-customizer-how-to\/\">the Customizer<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/themeisle.com\/blog\/css-in-wordpress\/\">some custom CSS code<\/a> to your site.<\/p>\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><a href=\"#\" style=\"color:#999999\">Go to top<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"the-importance-of-contrast-in-web-accessibility\">The importance of contrast in web accessibility<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is also the most widespread accessibility problem on the web. In the 2026 WebAIM Million analysis of the top one million home pages, <a href=\"https:\/\/webaim.org\/projects\/million\/\" target=\"_blank\" rel=\"noopener nofollow\">low-contrast text was found on 83.9% of them<\/a>, making it the most common detectable WCAG failure of all.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The audience affected is not a niche. In the US alone,&nbsp;<a href=\"https:\/\/themeisle.com\/blog\/web-accessibility-statistics\/\">2.5% of the population has a visual disability<\/a>. That&rsquo;s a significant chunk of users who might be turned away from your website because of accessibility issues.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"fix-your-color-contrast-ratio-errors-for-good\">Fix your color contrast ratio errors for good<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">The PageSpeed Insights report includes an accessibility audit. If you see the &ldquo;<em>Background and foreground colors do not have a sufficient contrast ratio<\/em>&rdquo; warning, it means that users with visual impairment may struggle to see the elements on the page.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n\t\t<div class=\"ti-tweet-clear\"><\/div>\n\t\t\t<div class=\"ti-tweet_wrapper\">\n\t\t    \t<div class=\"ti-tweet_text\">\n\t\t    \t\t<a href=\"https:\/\/twitter.com\/share?text=Improve+your+%23website+accessibility+by+%F0%9F%9B%A0%EF%B8%8F+fixing+the+%F0%9F%8C%88+contrast+ratio+of+your+%23colors&amp;via=themeisle&amp;related=themeisle&amp;url=https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/\" target=\"_blank\" rel=\"nofollow\">Improve your #website accessibility by &#128736;&#65039; fixing the &#127752; contrast ratio of your #colors<\/a>\n\t\t    \t<\/div>\n\t\t    \t<div class=\"ti-tweet_sharebtn\">\n\t\t    \t<a href=\"https:\/\/twitter.com\/share?text=Improve+your+%23website+accessibility+by+%F0%9F%9B%A0%EF%B8%8F+fixing+the+%F0%9F%8C%88+contrast+ratio+of+your+%23colors&amp;via=themeisle&amp;related=themeisle&amp;url=https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/\" target=\"_blank\" rel=\"nofollow\">Click To Tweet \n\t\t    \t\t<span><\/span>\n\t\t    \t<\/a>\n\t\t    <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">&#128204; Here&rsquo;s what you need to do if you run into this message:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Identify which elements show low contrast.<\/li>\n\n\n\n<li>Determine the contrast ratio of your elements, using a tool like the WebAIM Contrast Checker.<\/li>\n\n\n\n<li>Adjust the colors on the page to meet the recommended contrast ratio.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Do you still have any questions about how to fix the &ldquo;Background and foreground colors do not have a sufficient contrast ratio&rdquo; error in PageSpeed Insights? Let us know in the comments!<\/em><\/strong><\/p>\n\n\n<style>.ticss-d144f107 strong{font-weight: 700;\n    letter-spacing: -0.2px;\n    line-height: 1.2;\n    display: inline-block;}<\/style>\n\n\n<div class=\"wp-block-columns speed-guide has-white-color has-text-color has-background has-link-color wp-elements-2f81f6c5526477b5b4d52d1ca4513949 is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\" style=\"background-color:#4267cf\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<figure class=\"wp-block-image size-medium\"><img data-opt-id=30701221  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\"  decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\" alt=\"speed guide\" class=\"wp-image-113040\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:1024\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:150\/h:150\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 150w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:768\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:50\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:240\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 240w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:397\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 397w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:600\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 600w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:148\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 148w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:195\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 195w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:135\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 135w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 2x\"><noscript><img data-opt-id=30701221  decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\" alt=\"speed guide\" class=\"wp-image-113040\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:1024\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:150\/h:150\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 150w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:768\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:50\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:240\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 240w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:397\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 397w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:600\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 600w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:148\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 148w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:195\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 195w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:135\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 135w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 2x\" sizes=\"(max-width: 300px) 100vw, 300px\"></noscript><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center ticss-58e79f2f wp-block-paragraph\" style=\"font-size:14px\"><strong>FREE GUIDE<\/strong><\/p>\n\n\n\n<p class=\"ticss-d144f107 wp-block-paragraph\" style=\"font-size:25px\"><strong>4 Essential Steps to Speed Up Your&nbsp;WordPress Website<\/strong><\/p>\n\n\n\n<p class=\"ticss-3b627beb wp-block-paragraph\">Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%.&nbsp;&#128640;<\/p>\n\n\n<p><\/p><div class=\"frm_forms  with_frm_style frm_style_themeisle\" id=\"frm_form_4_container\" data-token=\"3d6b49818caaabb7c4694d5606a9955d\">\n<form enctype=\"multipart\/form-data\" method=\"post\" class=\"frm-show-form  frm_pro_form \" id=\"form_site-speed-guide-below-post\" data-token=\"3d6b49818caaabb7c4694d5606a9955d\">\n<div class=\"frm_form_fields \">\n<fieldset>\n<legend class=\"frm_screen_reader\">Site Speed Guide - Below Post<\/legend>\r\n\r\n<div class=\"frm_fields_container\">\n<input type=\"hidden\" name=\"frm_action\" value=\"create\">\n<input type=\"hidden\" name=\"form_id\" value=\"4\">\n<input type=\"hidden\" name=\"frm_hide_fields_4\" id=\"frm_hide_fields_4\" value=\"\">\n<input type=\"hidden\" name=\"form_key\" value=\"site-speed-guide-below-post\">\n<input type=\"hidden\" name=\"item_meta[0]\" value=\"\">\n<input type=\"hidden\" id=\"frm_submit_entry_4\" name=\"frm_submit_entry_4\" value=\"462883dd16\"><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/blog\/wp-json\/wp\/v2\/posts\/69189\">\t\t<input type=\"hidden\" name=\"item_meta[18]\" id=\"field_6px6q2\" value=\"\/blog\/wp-json\/wp\/v2\/posts\/69189\" data-frmval=\"\/blog\/wp-json\/wp\/v2\/posts\/69189\">\n\t\t<div id=\"frm_field_15_container\" class=\"frm_form_field form-field  frm_required_field frm_none_container\">\r\n\t<label for=\"field_6px6q\" id=\"field_6px6q_label\" class=\"frm_primary_label\">Your Email\r\n\t\t<span class=\"frm_required\" aria-hidden=\"true\">*<\/span>\r\n\t<\/label>\r\n\t<input type=\"email\" id=\"field_6px6q\" name=\"item_meta[15]\" value=\"\" autocomplete=\"email\" placeholder=\"your@email.com\" data-reqmsg=\"Your Email cannot be blank.\" aria-required=\"true\" data-invmsg=\"Your Email is invalid\" aria-invalid=\"false\">\r\n\t\r\n\t\r\n<\/div>\n<div id=\"frm_field_17_container\" class=\"frm_form_field form-field  frm_none_container vertical_radio\">\r\n\t<div id=\"field_6px6q3_label\" class=\"frm_primary_label\">Subscribe to our newsletter\r\n\t\t<span class=\"frm_required\" aria-hidden=\"true\"><\/span>\r\n\t<\/div>\r\n\t<div class=\"frm_opt_container\" aria-labelledby=\"field_6px6q3_label\" role=\"group\">\t\t<div class=\"frm_checkbox\" id=\"frm_checkbox_17-0\">\t\t\t<label for=\"field_6px6q3-0\">\n\t\t\t<input type=\"checkbox\" name=\"item_meta[17][]\" id=\"field_6px6q3-0\" value=\"true\" data-invmsg=\"Subscribe to our newsletter is invalid\"> Subscribe to our newsletter<\/label><\/div>\n<\/div>\r\n\t\r\n\t\r\n<\/div>\n<div id=\"frm_field_14_container\" class=\"frm_form_field form-field \">\r\n\t<div class=\"frm_submit frm_flex\">\r\n<button class=\"frm_button_submit frm_final_submit\" type=\"submit\" formnovalidate=\"formnovalidate\">FREE ACCESS<\/button>\r\n\r\n\r\n\r\n<\/div>\r\n<\/div>\n\t<input type=\"hidden\" name=\"item_key\" value=\"\">\n\t\t\t<div id=\"frm_field_24_container\">\n\t\t\t<label for=\"field_djnvq\">\n\t\t\t\tIf you are human, leave this field blank.\t\t\t<\/label>\n\t\t\t<input id=\"field_djnvq\" type=\"text\" class=\"frm_form_field form-field frm_verify\" name=\"item_meta[24]\" value=\"\">\n\t\t<\/div>\n\t\t<input name=\"frm_state\" type=\"hidden\" value=\"tGKtIG19U6wyYcew8uBttfz6BTJxQGTlzU9So0x4i6AwF9M0QAXa6pd1+Qu8+H8p\"><\/div>\n<\/fieldset>\n<\/div>\n\n<p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"ak_\"><label>&Delta;<textarea name=\"ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"ak_js\" value=\"134\"><script>\ndocument.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );\n<\/script>\n<\/p><\/form>\n<\/div>\n\n<\/div>\n<\/div>\n\n\n\n<div class=\"su-tabs su-tabs-style-default su-tabs-mobile-stack\" data-active=\"1\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-tabs-nav\"><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">References<\/span><\/div><div class=\"su-tabs-panes\"><div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"References\">\n\n\n\n<p class=\"wp-block-paragraph\">[1] <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum.html\" target=\"_blank\" rel=\"noopener nofollow\">Web Content Accessibility Guidelines (WCAG) 2.2: Understanding Success Criterion 1.4.3, Contrast (Minimum)<\/a><\/p>\n\n\n<\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"Seeing the \u201cBackground and foreground colors do not have a sufficient contrast ratio\u201d message in PageSpeed Insights? Find the failing elements and fix them.","protected":false},"author":34,"featured_media":69221,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":false,"_modified_date":"","_has_post_settings":[],"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[273,272],"tags":[],"hashtags":[],"class_list":["post-69189","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","category-wordpress-tutorials"],"wppr_data":{"cwp_meta_box_check":"No"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.8 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Fix the &ldquo;Background and Foreground Colors Do Not Have a Sufficient Contrast Ratio&rdquo; Accessibility Error<\/title>\n<meta name=\"description\" content=\"Seeing the &ldquo;Background and foreground colors do not have a sufficient contrast ratio&rdquo; message in PageSpeed Insights? Find the failing elements and fix them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Fix the &ldquo;Background and Foreground Colors Do Not Have a Sufficient Contrast Ratio&rdquo; Accessibility Error\" \/>\n<meta property=\"og:description\" content=\"Seeing the &ldquo;Background and foreground colors do not have a sufficient contrast ratio&rdquo; message in PageSpeed Insights? Find the failing elements and fix them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/\" \/>\n<meta property=\"og:site_name\" content=\"Themeisle Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-25T12:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-13T15:43:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/Not-Sufficient-Contrast-Ratio.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2180\" \/>\n\t<meta property=\"og:image:height\" content=\"1090\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Themeisle Editorial\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ThemeIsle\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Themeisle Editorial\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/\"},\"author\":{\"name\":\"Themeisle Editorial\",\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/#\\\/schema\\\/person\\\/844b0a2dc66556309f9a5ae28ae87ffe\"},\"headline\":\"How to Fix the \u201cBackground and Foreground Colors Do Not Have a Sufficient Contrast Ratio\u201d Accessibility Error\",\"datePublished\":\"2023-05-25T12:30:00+00:00\",\"dateModified\":\"2026-08-13T15:43:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/\"},\"wordCount\":1489,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\/\\/themeisle.com\\/blog\\/wp-content\\/uploads\\/2023\\/05\\/Not-Sufficient-Contrast-Ratio.png\",\"articleSection\":[\"Resources\",\"WordPress Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/\",\"url\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/\",\"name\":\"How to Fix the \u201cBackground and Foreground Colors Do Not Have a Sufficient Contrast Ratio\u201d Accessibility Error\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\/\\/themeisle.com\\/blog\\/wp-content\\/uploads\\/2023\\/05\\/Not-Sufficient-Contrast-Ratio.png\",\"datePublished\":\"2023-05-25T12:30:00+00:00\",\"dateModified\":\"2026-08-13T15:43:14+00:00\",\"description\":\"Seeing the \u201cBackground and foreground colors do not have a sufficient contrast ratio\u201d message in PageSpeed Insights? Find the failing elements and fix them.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/#primaryimage\",\"url\":\"https:\\/\\/themeisle.com\\/blog\\/wp-content\\/uploads\\/2023\\/05\\/Not-Sufficient-Contrast-Ratio.png\",\"contentUrl\":\"https:\\/\\/themeisle.com\\/blog\\/wp-content\\/uploads\\/2023\\/05\\/Not-Sufficient-Contrast-Ratio.png\",\"width\":2180,\"height\":1090,\"caption\":\"Background and foreground colors do not have a sufficient contrast ratio\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Fix the \u201cBackground and Foreground Colors Do Not Have a Sufficient Contrast Ratio\u201d Accessibility Error\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/\",\"name\":\"Themeisle Blog\",\"description\":\"WordPress Tutorials and Reviews for Beginners and Advanced\",\"publisher\":{\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/#organization\",\"name\":\"VertiStudio\",\"alternateName\":\"Vertigo Studio SA\",\"url\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\/\\/themeisle.com\\/blog\\/wp-content\\/uploads\\/2024\\/02\\/VertiStudio_logo1.png\",\"contentUrl\":\"https:\\/\\/themeisle.com\\/blog\\/wp-content\\/uploads\\/2024\\/02\\/VertiStudio_logo1.png\",\"width\":718,\"height\":156,\"caption\":\"VertiStudio\"},\"image\":{\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/#\\\/schema\\\/person\\\/844b0a2dc66556309f9a5ae28ae87ffe\",\"name\":\"Themeisle Editorial\",\"description\":\"We\\\\'re the crew behind Themeisle Blog, where we eat, sleep, and breathe WordPress, website building, and all things blogging. Under the leadership of Karol K, our team is composed of WordPress wizards, web design junkies, and blogging enthusiasts. Between us, we\\\\'ve got a boatload of experience (like, 50+ years worth!) in making the digital world more accessible and fun.\",\"sameAs\":[\"https:\\\/\\\/themeisle.com\\\/blog\\\/\",\"https:\\\/\\\/x.com\\\/ThemeIsle\",\"https:\\\/\\\/www.youtube.com\\\/@ThemeIsle\"],\"url\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/author\\\/editorial\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Fix the &ldquo;Background and Foreground Colors Do Not Have a Sufficient Contrast Ratio&rdquo; Accessibility Error","description":"Seeing the &ldquo;Background and foreground colors do not have a sufficient contrast ratio&rdquo; message in PageSpeed Insights? Find the failing elements and fix them.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/","og_locale":"en_US","og_type":"article","og_title":"How to Fix the &ldquo;Background and Foreground Colors Do Not Have a Sufficient Contrast Ratio&rdquo; Accessibility Error","og_description":"Seeing the &ldquo;Background and foreground colors do not have a sufficient contrast ratio&rdquo; message in PageSpeed Insights? Find the failing elements and fix them.","og_url":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/","og_site_name":"Themeisle Blog","article_published_time":"2023-05-25T12:30:00+00:00","article_modified_time":"2026-08-13T15:43:14+00:00","og_image":[{"width":2180,"height":1090,"url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/Not-Sufficient-Contrast-Ratio.png","type":"image\/png"}],"author":"Themeisle Editorial","twitter_card":"summary_large_image","twitter_creator":"@ThemeIsle","twitter_misc":{"Written by":"Themeisle Editorial","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/#article","isPartOf":{"@id":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/"},"author":{"name":"Themeisle Editorial","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/person\/844b0a2dc66556309f9a5ae28ae87ffe"},"headline":"How to Fix the \u201cBackground and Foreground Colors Do Not Have a Sufficient Contrast Ratio\u201d Accessibility Error","datePublished":"2023-05-25T12:30:00+00:00","dateModified":"2026-08-13T15:43:14+00:00","mainEntityOfPage":{"@id":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/"},"wordCount":1489,"commentCount":1,"publisher":{"@id":"https:\/\/themeisle.com\/blog\/#organization"},"image":{"@id":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/#primaryimage"},"thumbnailUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/Not-Sufficient-Contrast-Ratio.png","articleSection":["Resources","WordPress Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/","url":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/","name":"How to Fix the \u201cBackground and Foreground Colors Do Not Have a Sufficient Contrast Ratio\u201d Accessibility Error","isPartOf":{"@id":"https:\/\/themeisle.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/#primaryimage"},"image":{"@id":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/#primaryimage"},"thumbnailUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/Not-Sufficient-Contrast-Ratio.png","datePublished":"2023-05-25T12:30:00+00:00","dateModified":"2026-08-13T15:43:14+00:00","description":"Seeing the \u201cBackground and foreground colors do not have a sufficient contrast ratio\u201d message in PageSpeed Insights? Find the failing elements and fix them.","breadcrumb":{"@id":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/#primaryimage","url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/Not-Sufficient-Contrast-Ratio.png","contentUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/Not-Sufficient-Contrast-Ratio.png","width":2180,"height":1090,"caption":"Background and foreground colors do not have a sufficient contrast ratio"},{"@type":"BreadcrumbList","@id":"https:\/\/themeisle.com\/blog\/background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/themeisle.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Fix the \u201cBackground and Foreground Colors Do Not Have a Sufficient Contrast Ratio\u201d Accessibility Error"}]},{"@type":"WebSite","@id":"https:\/\/themeisle.com\/blog\/#website","url":"https:\/\/themeisle.com\/blog\/","name":"Themeisle Blog","description":"WordPress Tutorials and Reviews for Beginners and Advanced","publisher":{"@id":"https:\/\/themeisle.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/themeisle.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/themeisle.com\/blog\/#organization","name":"VertiStudio","alternateName":"Vertigo Studio SA","url":"https:\/\/themeisle.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png","contentUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png","width":718,"height":156,"caption":"VertiStudio"},"image":{"@id":"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/person\/844b0a2dc66556309f9a5ae28ae87ffe","name":"Themeisle Editorial","description":"We\\'re the crew behind Themeisle Blog, where we eat, sleep, and breathe WordPress, website building, and all things blogging. Under the leadership of Karol K, our team is composed of WordPress wizards, web design junkies, and blogging enthusiasts. Between us, we\\'ve got a boatload of experience (like, 50+ years worth!) in making the digital world more accessible and fun.","sameAs":["https:\/\/themeisle.com\/blog\/","https:\/\/x.com\/ThemeIsle","https:\/\/www.youtube.com\/@ThemeIsle"],"url":"https:\/\/themeisle.com\/blog\/author\/editorial\/"}]}},"_links":{"self":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/69189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/comments?post=69189"}],"version-history":[{"count":20,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/69189\/revisions"}],"predecessor-version":[{"id":118454,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/69189\/revisions\/118454"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/media\/69221"}],"wp:attachment":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/media?parent=69189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/categories?post=69189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/tags?post=69189"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/hashtags?post=69189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}