What the rule says
WCAG 2.1 success criterion 1.4.3 (Contrast Minimum) requires a contrast ratio of at least 4.5:1 between text and its background. Large text — roughly 24px, or 19px bold and above — may go down to 3:1. Interface components and meaningful graphics need 3:1 under criterion 1.4.11.
This is not a matter of taste: the ratio is computed from the rendered colours, so a scan measures it precisely and repeatedly.
Where Shopify themes usually fail
| Spot | Typical mistake |
|---|---|
| Sale badges and price strikethroughs | Light red or orange on white — often below 3:1 |
| Secondary and helper text | Light grey (#999 and lighter) used for “subtle” copy |
| Buttons in brand colour | Brand green or yellow with white label text |
| Text over hero images | No overlay, so contrast depends on the photo behind it |
| Placeholder text in forms | Grey-on-grey by default in many themes |
| Footer | Muted text on a dark background at 3:1 or less |
Fixing it without a developer
- Open Online Store → Themes → Customize and find Colours in theme settings. Most modern themes define colour schemes here rather than in code.
- Darken text or lighten background until the pair passes. Any contrast checker will give you the ratio; adjusting lightness usually keeps the hue recognisably yours.
- For text over images, add an overlay (most themes have an overlay opacity setting) instead of choosing a different colour.
- Re-run a scan. The
color-contrastrule should drop to zero occurrences on the pages you changed.
The brand argument, settled: you almost never need to change your brand colour — you need to change where you use it. Keep the exact brand hue for large headings, logos and backgrounds, and use a darkened variant for small text. Same identity, readable page.
A worked example
Our own landing page failed this rule when we first scanned it. The accent green #2fbf4f on white measures roughly 2.4:1 — well under the minimum — and our own scanner flagged it as serious. We kept the green for buttons and badges, where it sits on a dark background, and switched small text to #166534, which is comfortably above 6:1. Nobody noticed a brand change; the issue disappeared.
What a scan cannot tell you
Contrast is objectively measurable, which makes it a rare case where automated testing gives a definitive answer. The judgement that remains is design: whether the fix reads well, whether hover and focus states also pass, and whether the same palette holds up in dark mode if you support it.
See where your store stands — free
Check your storefront against WCAG 2.1 AA and EN 301 549 in about 30 seconds. No install, no account.
Run the free checkThis guide is information, not legal advice, and does not guarantee compliance with the EAA, the BFSG or any national law. Automated testing detects only a portion of accessibility issues and does not replace an expert audit or testing with people who use assistive technology.