Color contrast on e-commerce sites: how to check and fix it
Low contrast is one of the most common accessibility problems on the web, and online stores are especially prone to it: brand palettes favor soft grays and pastels, sale badges sit on bright colors, and headlines are laid over lifestyle photos. Poor contrast affects people with low vision and color vision deficiencies, older shoppers, and anyone looking at a phone in sunlight.
The good news: contrast is measurable, easy to check for free, and usually fixed by changing a few color settings.
The rules in WCAG 2.2
| What | Minimum ratio | Success criterion |
|---|---|---|
| Normal text (body copy, prices, links, button labels) | 4.5:1 | 1.4.3 Contrast (Minimum), AA |
| Large text: at least 18pt (24 CSS px), or 14pt (about 18.7 CSS px) bold | 3:1 | 1.4.3, AA |
| Parts of controls you need to see to use them (input borders, checkbox outlines, icon-only buttons, focus indicators) and meaningful graphics | 3:1 against adjacent colors | 1.4.11 Non-text Contrast, AA |
| Enhanced (optional, stricter) | 7:1 normal / 4.5:1 large | 1.4.6 Contrast (Enhanced), AAA |
A contrast ratio compares the relative brightness of two colors, from 1:1 (identical) to 21:1 (black on white). Exceptions include logos and brand names, text that is purely decorative or not visible, and inactive (disabled) controls. A separate rule, 1.4.1 Use of Color (Level A), says color can’t be the only way you convey information.
Contrast is one of the barriers the US Department of Justice names in its guidance on web accessibility and the ADA.
Real numbers: common store colors
These ratios are calculated with the WCAG formula. Small differences matter: #767676 on white passes, #777777 does not.
| Text / background | Ratio | Normal text | Large text |
|---|---|---|---|
| #999999 gray on white (typical “muted” price) | 2.85:1 | Fails | Fails |
| #777777 on white | 4.48:1 | Fails (just) | Passes |
| #767676 on white | 4.54:1 | Passes | Passes |
| White on #E63946 (bright red sale badge) | 4.17:1 | Fails | Passes |
| White on #C62828 (deeper red) | 5.62:1 | Passes | Passes |
| White on #4CAF50 (bright green button) | 2.78:1 | Fails | Fails |
| White on #2E7D32 (darker green) | 5.13:1 | Passes | Passes |
| White on #F4A261 (orange) | 2.06:1 | Fails | Fails |
| Black on #F4A261 (same orange) | 10.19:1 | Passes | Passes |
The last two rows show a useful trick: if you can’t change a brand color, switching the text on it from white to black (or the reverse) often fixes the problem.
Where online stores usually fail
- Prices and compare-at prices in light gray, and the small “Tax included” or unit-price text under them.
- Sale and “New” badges: white text on bright red, orange or pink.
- Buttons: white text on a light brand color, or outline buttons with a pale border.
- Text over photos: hero banners and collection tiles where the headline crosses both light and dark areas of the image.
- Form fields: placeholder text in light gray, and input borders that barely show against the background (1.4.11).
- Announcement bars and footers, which often use low-contrast small print.
- Sold-out variants shown only by fading the swatch, which is also a Use of Color problem if nothing else marks them.
- Focus indicators: a thin, light outline that disappears on colored buttons.
How to check contrast for free
- Run an automated scan. Tools built on the open-source axe-core engine, including our free scan, compute the ratio for every piece of text on solid backgrounds and list the failures with the exact colors. When text sits on a background image or gradient, the tool can’t be sure and flags it for manual review instead.
- Check a pair of colors by hand with the WebAIM contrast checker: paste the text color and background color hex codes.
- Inspect in Chrome. Right-click text → Inspect, click the color swatch in the Styles panel, and DevTools shows the contrast ratio and whether it meets AA and AAA (Chrome DevTools docs).
- Text on images: sample the lightest part of the photo behind light text (or the darkest behind dark text) and check that worst case.
How to fix it
Shopify
Most current themes keep colors in Online Store → Themes → Customize → Theme settings → Colors, often as “color schemes” that you assign to sections. Adjust the text, button and background colors of each scheme, then check the sections that use it. Shopify’s theme accessibility best practices use the same 4.5:1 and 3:1 thresholds, including 3:1 for icons and input borders.
WooCommerce
It depends on your theme. Block themes: Appearance → Editor → Styles → Colors. Classic themes: Appearance → Customize, usually under Colors. Sale badges and buttons are sometimes styled by WooCommerce blocks or extensions; if there’s no setting, a few lines of custom CSS will do.
Text on images
Add a semi-transparent dark overlay behind light text (many themes have an “overlay opacity” setting on image banners), move the text to a solid-color area, or choose an image with a calmer background where the text sits.
Don’t rely on color alone
Keep the strikethrough on original prices, add the words “Sale” or “Sold out”, and keep links in paragraphs underlined. That fixes 1.4.1 and helps everyone.
Check hover, focus and sale states too
Contrast has to hold in every state a shopper sees: a button’s hover color, the focus outline, a selected variant, an error message in red, and the sale version of a product card. Automated scans usually test only the default state as the page loads, so tab through a product page and check the colors that appear as you go. If your theme offers a dark color scheme, check it separately; a palette that passes on white often fails on black.
What a contrast fix won’t do
Passing contrast is one success criterion among dozens. A store can have perfect contrast and still be unusable with a keyboard. Treat contrast as a quick win, then work through the rest of our Shopify accessibility checklist.
Sources
- W3C, Understanding WCAG 2.2: 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast, 1.4.6 Contrast (Enhanced), 1.4.1 Use of Color.
- US Department of Justice, Guidance on Web Accessibility and the ADA.
- Shopify developer docs, Accessibility best practices for Shopify themes.
- WebAIM Contrast Checker; Chrome DevTools: make your website more readable.