Free tool
WCAG color contrast checker
Pick any two colors. We compute the WCAG luminance contrast ratio and tell you whether the pair passes AA and AAA for normal and large text. No signup, no upload.
Sample text — body copy
This is what your color pair looks like at normal weight and size.
Sample text — large heading
AA — Normal text
Needs 4.5:1
AA — Large text
Needs 3:1
AAA — Normal text
Needs 7:1
AAA — Large text
Needs 4.5:1
How this works
We use the WCAG 2.1 luminance formula. Each sRGB channel is converted to a linear value, combined with weights (R: 0.2126, G: 0.7152, B: 0.0722), and the ratio of the lighter to darker luminance plus 0.05 gives the final contrast ratio.
Pass thresholds: 4.5:1 for AA normal, 3:1 for AA large, 7:1 for AAA normal, 4.5:1 for AAA large. "Large" means at least 18pt or 14pt bold.
Find every contrast failure on your Shopify store
The free AccessComply scanner checks color contrast on every page of your store automatically — and our paid plans rewrite the failing colors at the source-code level.
Scan my Shopify store freeFAQ
What is the WCAG color contrast minimum?
WCAG 2.1 Success Criterion 1.4.3 (Contrast — Minimum) requires a luminance contrast ratio of at least 4.5:1 between body text and its background, with a relaxed 3:1 ratio for large text (at least 18pt or 14pt bold).
How is contrast ratio calculated?
Contrast is the ratio of the relative luminance of the lighter color to the darker color, both calculated using the WCAG luminance formula on each sRGB channel. The ratio runs from 1:1 (no contrast) up to 21:1 (black on white).
Does this tool replace a full accessibility scan?
No. Color contrast is one of 50+ WCAG 2.1 + 2.2 AA criteria. AccessComply's free Shopify scan checks every criterion automatable by axe-core (~30-40% of the standard) and flags the rest for review.