Colour contrast checker
Check a text colour against its background, see where it passes WCAG, and get the nearest colour that does. Or paste your theme colours and check every pair at once.
WCAG 2.2 contrast formula, calculated in your browser
Contrast ratio
5.07 to 1
| Level | Needs | Result |
|---|---|---|
| AA, normal textWCAG 1.4.3 | 4.5:1 | Pass |
| AA, large textWCAG 1.4.3 | 3:1 | Pass |
| AAA, normal textWCAG 1.4.6 | 7:1 | Fail |
| AAA, large textWCAG 1.4.6 | 4.5:1 | Pass |
| AA, icons, borders and controlsWCAG 1.4.11 | 3:1 | Pass |
Free shipping on orders over $75. Returns within 30 days.
Large text, 24 px
The button swaps the two colours, so it has the same ratio as the text.
Find a passing text colour
Keeps the hue of your text colour and makes it darker or lighter until it passes.
What contrast ratio does WCAG require?
WCAG 2.2 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) under criterion 1.4.3. Buttons, form borders and icons need 3:1 against their background under 1.4.11. Level AAA raises text to 7:1.
Text contrast and non-text contrast
Two WCAG rules cover colour. Success criterion 1.4.3 is about text: prices, product titles, body copy, labels and badges. Success criterion 1.4.11 is about everything else a shopper needs to see to use the page: the border of a search field, the outline of a size swatch, a cart icon or the focus ring on a button. Use the 3:1 row in the results for those.
Faint text is the most common problem on the web.
Low contrast text turned up on 83.9% of the million home pages WebAIM tested in 2026. On Shopify stores it is usually a theme colour setting, so one change fixes every page.
Where stores usually fail
- Sale and sold-out badges. White text on a light red or a pale accent colour.
- Grey secondary text. Compare-at prices, shipping notes and review counts in light grey, or text made lighter with opacity.
- Announcement bars. A brand colour with white text on top.
- Placeholder text used as the only label in a newsletter or search field.
- Input borders and swatches. A light grey border on white, or a white swatch with no border at all. These fall under the 3:1 rule for controls.
How the ratio is worked out
Each colour gets a relative luminance, a number from 0 for black to 1 for white that follows how bright the colour looks to the eye. The ratio is the lighter value plus 0.05, divided by the darker value plus 0.05. That gives 1:1 for two identical colours and 21:1 for black on white. This checker uses the formula exactly as WCAG 2.2 defines it.
How to fix low contrast in your Shopify theme settings
- In your Shopify admin, go to Online Store, Themes. Next to your live theme, choose the three dots and then Duplicate, so you can test on a copy.
- On the copy, choose Customize, then Theme settings, Colours. Newer themes such as Dawn and Horizon group colours into colour schemes.
- Paste each scheme's text, background and button colours into the “Your theme colours” mode above. Fix every pair that fails, using the suggested colour.
- Preview the copy on a product page and on a phone, then publish it when it looks right.
This free color contrast checker tests only the colours you give it. To find other problems on a page, such as images without alt text or buttons with no name, use the free accessibility checker.
Contrast questions
What contrast ratio do I need?
For WCAG level AA, normal text needs 4.5:1 against its background and large text needs 3:1. Icons, input borders and other parts of controls also need 3:1. Level AAA asks for 7:1 for normal text and 4.5:1 for large text. Most laws and settlements point to level AA.
What counts as large text?
WCAG defines large text as at least 18 point, or at least 14 point when bold. On the web that is roughly 24 px regular or 18.5 px bold. Product titles and big headings usually qualify. Prices, body copy and badges usually do not.
Why does the checker show 4.49 when another tool shows 4.5?
We cut the ratio off at two decimals instead of rounding it. WCAG treats 4.5 as a hard minimum, so a pair at 4.497 fails. Rounding it up to 4.50 would make a failing pair look like a pass.
Does contrast apply to text on images?
Yes. Text over a photo or a video banner needs the same ratio against the part of the image behind it. A single colour pair cannot measure that, because the image changes from pixel to pixel. A solid or semi-transparent panel behind the text is the usual fix.
Do disabled buttons and logos need to pass?
No. WCAG exempts text in logos and brand names, text that is purely decorative, and controls that are disabled. Sold-out labels and sale badges are not exempt, because shoppers need to read them.
Where do I change colours in a Shopify theme?
In most themes you change them under Online Store, Themes, Customize, Theme settings, Colours. Many newer themes use colour schemes, where one scheme sets the text, background and button colours together. Change a duplicate of your theme first and preview it before you publish.
Check every colour in your theme, not just one pair.
Early access stores get a free scan of their whole store and a call with our team to go through it.
Get early access