Of all the accessibility rules, color contrast is the one designers push back on the most, and the one scanners flag the most. Both things are true at once. It is the single most common failure on the web, and it is also the one people most want to bend for the sake of a look.
Here is what the rule actually asks for, and how to meet it without making your store ugly.
What 4.5:1 means
WCAG asks for a contrast ratio of at least 4.5 to 1 between normal text and its background. Large text, which means roughly 24px, or 18.66px if bold, gets a lower bar of 3 to 1. Buttons, form borders, and meaningful icons need at least 3 to 1 against what is next to them.
The ratio is a number from 1 to 21. Black on white is 21 to 1. Two shades of grey a few steps apart might be 2 to 1. You do not have to calculate it by hand. Any contrast checker will tell you the ratio if you paste in two colors.
Where Shopify themes usually break it
A few culprits show up again and again.
- Grey helper text. That soft grey under form fields or below headings often lands around 3 to 1, just under the line.
- Placeholder text. Themes love very light placeholder text. It almost never passes, and it should not be carrying important information anyway.
- Text on images. A hero banner with white text looks great until the image behind it has a bright patch. Contrast has to hold across the whole image, not just the dark corner.
- Sale and badge colors. A trendy pastel badge with white text is a common offender.
- Buttons in a brand color. A mid-tone brand color with white label text frequently sits just below 4.5 to 1.
How to check it
You have a few easy options.
- Use your browser developer tools. In Chrome, inspect a piece of text and the color picker shows the contrast ratio and whether it passes.
- Paste two hex codes into any online contrast checker.
- For a whole page, a browser extension can highlight every failing element at once.
Check against the real rendered background, not the value in your design file. Overlays, gradients, and images change what the text actually sits on.
How to fix it without ruining the design
You usually do not need a big change. A small step darker on grey text, or a slightly deeper brand shade for buttons, is often all it takes to cross the line.
- For grey text, nudge it darker until it clears 4.5 to 1. It will still read as secondary.
- For text on images, add a subtle dark overlay or a gradient scrim behind the text, or place the text on a solid panel.
- For buttons, either darken the background or switch the label to a color that passes. Test both states, normal and hover.
- Never rely on color alone to signal something. If a required field is marked in red, add an asterisk or the word required too. That is a separate rule, but it tends to travel with contrast problems.
A note on theme updates
Contrast is easy to get right once and then quietly break later, when you swap a theme, change your brand palette, or add a new section. It is worth rechecking after any visual change, which is exactly the kind of drift a scheduled re-audit is meant to catch.
If you want the full picture of where your store stands, our accessibility checklist covers contrast alongside everything else, and a manual audit will pin down every failing element with the exact fix.