Colour contrast checker
Measure a text colour against its background. The checker gives you the ratio for WCAG 1.4.3. It does not scan the whole store.
The ratios that matter
Normal text needs at least 4.5:1 against the colour directly behind it. Large text, 24px regular or 18px bold, needs at least 3:1. Those are the AA figures shops actually use.
Buttons, prices and links are text. A £48 in light grey on a white card fails even when the body copy is fine. Text on a photograph fails when the photo changes under the words. Put a solid strip behind the words or move them off the image.
Icons and input borders are not text. They fall under non-text contrast, which asks for 3:1. A faint #e6e6e6 box on white is a different fix from a pale paragraph, and it still needs a darker stroke.
How to use this checker
Pick the foreground and the background with the controls below. Read the ratio. If normal text is under 4.5:1, darken the text or lighten the background and measure again. Do not average a gradient. Sample the worst spot under the words.
Copy the hex from the theme, not from a screenshot that has compressed the colour. Shopify theme settings, the WooCommerce customizer, Wix site design and Squarespace site styles are the usual sources.
The checker is free. It runs in the browser. It does not store the colours and it does not replace a scan of the live pages, because a scan finds the pairs you forgot to measure.
Where shops fail
Sale prices are the classic miss. The theme sets a muted colour so the discount looks soft. Soft is often under 4.5:1. Change the sale colour in the theme and leave the sale badge text dark.
Placeholder text inside a field is another. It is often lighter than the label, and it disappears when someone types. Keep a real label. If you style the placeholder, measure that colour too.
Announcement bars on photos fail in daylight. A visitor on a phone in the street cannot read lime on a busy image. Solid background, dark text, then remeasure.
Fix it in the theme
On Shopify, open Online Store, Themes, Customize, then Colors. Update text, sale price and button label. Check the announcement bar on its own.
On WooCommerce, the customizer colours for body, price and the sale badge cover most of the shop loop. A page builder section can override them. Measure the section, not only the global palette.
On Wix and Squarespace, set the colour in site design so it cascades, then override the one section that sits on an image. Publish and scan. The free AltGrade scan will flag low contrast it can see on the live URL. Measure the pair again after the theme publish, because a section style can override the global colour. Check the sale price and the button label as separate pairs. They often use a different token from the body text. Write the hex values down so the next theme edit does not revert them. If the ratio is still short, darken the text one more step and measure before you publish again.
Scan your whole site
Questions
What ratio should a button label hit?
Treat it as normal text unless it is genuinely large. Aim for 4.5:1 against the button fill.
Does a contrast toggle on the site count?
No. The default colours have to work. A toggle the visitor must find is not the fix.
Will this checker scan my store?
No. It measures two colours. The free scan checks the live pages. Automated scans cannot catch every WCAG issue.