Colour contrast in Shopify themes: how to find and fix low-contrast text

Updated 2026-10-18

Low-contrast text is the most common accessibility issue on the web. WebAIM's February 2026 study found it on 83.9% of the top million home pages, with an average of 34 instances on each affected page. It's also the issue we find most often on Shopify stores, including on Shopify's own free theme demos. The good news: it's usually fixed in a few theme settings, without code.

The numbers you need

4.5:1 for normal text and button labels against their background (WCAG SC 1.4.3).
3:1 for large text: about 24px regular or 19px bold and up (WCAG defines it as 18pt, or 14pt bold).
3:1 for icons, input borders and focus indicators against what's next to them (SC 1.4.11).
Colour alone can't carry meaning: links in paragraphs need an underline or other visual cue besides colour, and a red price shouldn't be the only sign of a sale (SC 1.4.1).

Logos and disabled (inactive) controls are exempt from the text contrast rule. A sold-out variant that can't be selected isn't required to meet 4.5:1, but customers still need to tell it apart, so a strike-through or "Sold out" label helps.

Where low contrast hides on Shopify stores

Sale badges such as white text on a light red or orange badge.
"Compare at" prices shown in light grey next to the sale price.
Secondary or outline buttons whose text uses a light accent colour.
Text over image banners and slideshows, especially when the photo is light behind the text.
Placeholder text in search and newsletter fields (and placeholders shouldn't replace labels).
Footer links and small print in mid-grey on a dark or tinted background.
Announcement bars using brand colours that look fine but are too close in brightness.

Examples (ratios calculated with the WCAG formula)

Before and after colour pairs (normal-size text needs 4.5:1)
Element	Before	Ratio	After	Ratio
Compare-at price, light grey on white	`#999999` on `#ffffff`	2.84:1 (fails)	`#767676` on `#ffffff`	4.54:1 (passes)
Sale badge, white on bright red	`#ffffff` on `#e53935`	4.22:1 (fails)	`#ffffff` on `#c62828`	5.62:1 (passes)
Button, white on orange	`#ffffff` on `#f4a261`	2.06:1 (fails)	`#1c1c1c` on `#f4a261`	8.26:1 (passes)
Footer text, grey on white	`#a3a3a3` on `#ffffff`	2.52:1 (fails)	`#6b6b6b` on `#ffffff`	5.32:1 (passes)
Button, white on teal	`#ffffff` on `#2a9d8f`	3.32:1 (fails)	`#ffffff` on `#1d6f66`	5.96:1 (passes)

Notice how small the change usually is: one or two shades darker is often the difference between failing and passing.

How to measure contrast

Free check: run the ClearAisle free check bookmark on a page of your store; it shows how many elements fail the contrast rule. The full report lists each one.
Chrome DevTools: right-click text > Inspect, then click the colour swatch next to color in the Styles pane. The colour picker shows the contrast ratio and whether it passes.
WebAIM Contrast Checker: paste two hex colours to get the ratio and a pass or fail.
Text on images: tools often can't measure these reliably. Check by eye at different screen widths, and measure the text colour against the lightest part of the image behind it.

How to fix it in your Shopify theme

Go to Online Store > Themes > Customize > Theme settings > Colors. Most current themes (Dawn and other Online Store 2.0 themes) use colour schemes; each scheme sets background, text, button and button-label colours.
For each scheme, check the text against the background and the button label against the button. Darken the text (or lighten the background) until it reaches 4.5:1.
Find which sections use each scheme (each section has a Color scheme setting) so you know where a change will show.
For banners, raise the image overlay opacity setting if your theme has one, move the text into a solid box, or choose a darker part of the photo for the text.
For sale badges and compare-at prices, look for badge colour settings in Theme settings; otherwise a developer can change one CSS variable.
For apps (announcement bars, pop-ups, reviews), change colours in each app's own settings.
Re-scan to confirm, then check that your brand still looks right. Using a darker shade of a brand colour for text and keeping the brighter one for large shapes is a common compromise.

Contrast is just one issue type. If you'd like the full list for your store with fix steps, the $39 full report scans five key pages. It's an automated audit and not a compliance guarantee; see also the 10 most common Shopify fixes.

Check your store in 2 minutes

Run our free in-browser check on any page of your store, or get the full $39 report: every automated issue on 5 key pages, with step-by-step fixes for Shopify and WooCommerce.

Free check See the full report

FAQ

What contrast ratio does my Shopify store need?

At least 4.5:1 for normal text and button labels, 3:1 for large text (about 24px, or 19px bold), and 3:1 for icons and input borders, under WCAG 2.2 AA.

Where do I change colours in a Shopify theme?

Online Store > Themes > Customize > Theme settings > Colors. Most current themes use colour schemes that you then assign to sections.

Is light grey text accessible?

Often not. #999999 on white is 2.85:1, which fails. #767676 on white is about 4.5:1, the lightest grey that passes for normal text.

Does text over images need to meet contrast?

Yes. Text on banners and slideshows must meet the same ratios. Use an overlay, a solid text box, or move the text off the image.

Sources

General information, not legal advice. ClearAisle provides automated audits only; a report is not a compliance guarantee or certification. Sources checked 2026-10-18.