Check WCAG color contrast
Check the contrast ratio between two colors against WCAG AA/AAA accessibility thresholds.
The quick brown fox jumps over the lazy dog.
Large bold text sample
Use the color picker or type a hex code for both the foreground (text) and background.
The ratio is computed using the exact WCAG 2.x relative-luminance formula, from 1:1 (no contrast) to 21:1 (max contrast).
See at a glance whether the pairing meets AA or AAA, for normal or large text.
Frequently asked
What contrast ratio do I need to pass WCAG AA?
4.5:1 for normal text, or 3:1 for large text (24px+, or 19px+ and bold). AA is the baseline most accessibility guidelines and legal requirements reference.
What's the difference between AA and AAA?
AAA is the stricter WCAG level: 7:1 for normal text and 4.5:1 for large text. It's recommended where possible but not required for most compliance standards, which target AA.
How is the contrast ratio calculated?
Using the WCAG relative luminance formula on each color's sRGB channels, then (L1 + 0.05) / (L2 + 0.05) with the lighter color as L1. The same formula browsers and accessibility auditing tools use.
Does this check color blindness accessibility too?
No. This checks luminance contrast only, which is the WCAG standard. Color-blindness-specific issues (like relying on hue alone to convey meaning) need a separate check.