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.
Answer
WCAG 2.1 SC 1.4.3 (Contrast Minimum, AA) requires text to have a luminance contrast ratio of at least 4.5:1 against its background, with a relaxed 3:1 for large text (≥18pt or ≥14pt bold). WCAG 2.1 SC 1.4.6 (Contrast Enhanced, AAA) raises the bar to 7:1 for normal text and 4.5:1 for large text. The ratio is computed from the WCAG luminance formula on each sRGB channel — not hue or saturation. A failing pair on a Shopify storefront is the most common WCAG violation in 2026 (81% of homepage scans per WebAIM 2024). Use the tool below to check any color pair against both thresholds, or scan your full Shopify store to find every contrast failure across every page.
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.