How to fix color contrast on Shopify
Increase the contrast ratio between your text color and its background color to meet the WCAG 4.5:1 minimum, so all users — including those with low vision — can read your content clearly.
Steps for Shopify
- Go to Online Store → Themes → click Customize on your active theme.
- Open Theme Settings (bottom-left gear icon) → Typography or Colors section — many themes expose body text color as a color picker here. Change it to an accessible value (e.g. #595959 instead of #777777) and Save.
- If the failing color is not exposed in the visual editor, go back to Themes → click the '…' menu → Edit code.
- Open assets/base.css (or theme.css / global.css — the name varies by theme). Search for the failing hex value (e.g. #777777) and replace it with your accessible color.
- Click Save and verify with a contrast checker.
What is color contrast?
Color contrast is the difference in brightness between text and the background behind it. WCAG (Web Content Accessibility Guidelines) Success Criterion 1.4.3 requires that normal-sized text (below 18pt / 24px regular, or 14pt / ~18.5px bold) has a contrast ratio of at least 4.5:1 against its background. A ratio like 4.47:1 — for example, #777777 grey text on a white #ffffff background — falls just short of that threshold and is therefore a measurable accessibility failure. The ratio is a simple math score: higher numbers mean more contrast and easier reading.
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and many more users struggle with low contrast in bright sunlight or on older screens. Failing WCAG 1.4.3 exposes your store to legal risk in the US (ADA), UK (Equality Act), EU (EAA 2025), and other jurisdictions that reference WCAG as the accessibility standard for commercial websites. Beyond legal compliance, hard-to-read text directly hurts conversions: shoppers who can't comfortably read product descriptions, prices, or call-to-action buttons abandon faster. Google also uses accessibility signals as part of its Core Web Vitals and overall quality assessment, so fixing contrast issues can have a positive downstream effect on organic rankings.
See the complete Color contrast guide for every platform and the full background.
Not sure if your Shopify store has this?
Run a free SEOLZ scan — we’ll find color contrast and every other issue across your whole site.
Scan my site free