Google Page Speed Accessibility Issue: insufficient contrast ratio

AusSimon · ‎02-09-2025

In the Google Dev Page Speed Analyzer I am getting an accessibility issue where it thinks my text is not contrasted enough from the background. However i have texted the colours and it is.

It seems as though on the page load the text colour is not loading in time and making it look like the contrast ratio is not high enough. as you can see from the screen shot in some of the screen shots google provides, the text ands the background are the same colour however once they fully load they are not.

I am running the dawn theme, with no plugins, no custom coding.

Any thoughts or idea for a fix would be much appreciated.

https://xekryp-7z.myshopify.com/

Website_Speedy · ‎02-10-2025

Hi,

I totally understand what you're saying—it sounds like this may be a rendering issue rather than a contrast problem. Since you're using the Dawn theme with no custom coding or plugins, here’s what might be causing the issue and how to fix it:

1. Ensure Text Colors Load Immediately

To ensure that your text is readable even before the full styles are loaded, add a fallback color in your CSS:

Go to Online Store > Edit Code > theme.liquid.

In the <head> section, add the following code:

<style>

body {

color: #000 !important; /* Adjust to match your intended text color */

background-color: #fff !important; /* Adjust for contrast */

}

</style>

2. Preload Fonts to Avoid Flash of Unstyled Text (FOUT)

If you’re using custom fonts, they may be loading late, which could cause a mismatch in colors. To fix this:

Go to theme.liquid.

Inside the <head> tag, add:

Lazy-loaded elements (like images or sections) sometimes push content down, affecting how contrast is calculated. To fix this:

Try disabling lazy loading for key sections like the hero banner or headings in base.css by adding the following:

img, video {

font-display: swap;

}

Additionally, If you don’t want to spend too much time optimizing your site manually, you can try our **Website Speedy** app for Shopify, which offers a **14-day free trial**. It automatically handles the optimizations for you.

You can install it here: https://apps.shopify.com/website-speedy
(Disclaimer: We are the developers of this tool and are happy to assist with any questions you may have!)

If this fixed your issue, Likes and Accept as Solution are highly appreciated.
Need help with optimizing the speed and performance of your website? Check out our app on Shopify App Store

View solution in original post

Dan-From-Ryviu · ‎02-10-2025

Hi @AusSimon

I already changed the color according to the requirement of Google Page Speed to fix sites before, and they still mention the same error after my change, so I recommend you ignore this issue.

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

AusSimon · ‎02-10-2025

Thanks Dan. This is not bad advice, but google does consider this error critical, so if i could get a simple work around I would prefer that.

Website_Speedy · ‎02-10-2025

Hi,

I totally understand what you're saying—it sounds like this may be a rendering issue rather than a contrast problem. Since you're using the Dawn theme with no custom coding or plugins, here’s what might be causing the issue and how to fix it:

1. Ensure Text Colors Load Immediately

To ensure that your text is readable even before the full styles are loaded, add a fallback color in your CSS:

Go to Online Store > Edit Code > theme.liquid.

In the <head> section, add the following code:

<style>

body {

color: #000 !important; /* Adjust to match your intended text color */

background-color: #fff !important; /* Adjust for contrast */

}

</style>

2. Preload Fonts to Avoid Flash of Unstyled Text (FOUT)

If you’re using custom fonts, they may be loading late, which could cause a mismatch in colors. To fix this:

Go to theme.liquid.

Inside the <head> tag, add:

Lazy-loaded elements (like images or sections) sometimes push content down, affecting how contrast is calculated. To fix this:

Try disabling lazy loading for key sections like the hero banner or headings in base.css by adding the following:

img, video {

font-display: swap;

}

Additionally, If you don’t want to spend too much time optimizing your site manually, you can try our **Website Speedy** app for Shopify, which offers a **14-day free trial**. It automatically handles the optimizations for you.

You can install it here: https://apps.shopify.com/website-speedy
(Disclaimer: We are the developers of this tool and are happy to assist with any questions you may have!)

If this fixed your issue, Likes and Accept as Solution are highly appreciated.
Need help with optimizing the speed and performance of your website? Check out our app on Shopify App Store

AusSimon · ‎02-10-2025

Thank you for this detailed reply, I will give the first one a try and hopefully that will be a good fit.

Though it was a good suggestion, I don't like the idea of prioritizing loading text styles, I believe google still suggest allowing default font to run until the page has fully loaded. However that said, i am using default browser fonts sot his should not be causing my issue.

This third suggestion looks like something i could also play with so thank you for that also.

Google Page Speed Accessibility Issue: insufficient contrast ratio

Google Page Speed Accessibility Issue: insufficient contrast ratio

Community Blog Articles