WCAG Contrast Ratio Calculator
Check text vs background contrast against WCAG AA and AAA thresholds — get the exact ratio and pass/fail for normal and large text.
How it works
ratio = (L_light + 0.05) / (L_dark + 0.05), where L is WCAG relative luminance (0.2126R + 0.7152G + 0.0722B on linearized channels)
WCAG contrast compares the relative luminance of two colors, not their raw brightness — each channel is linearized from sRGB, weighted for how the eye perceives it (green counts far more than blue), then the lighter and darker luminances go into the ratio with a +0.05 flare term. The scale runs from 1:1 (identical) to 21:1 (black on white). AA needs 4.5:1 for body text and 3:1 for large text; AAA raises those to 7:1 and 4.5:1. Large text means 18pt (24px) regular or 14pt (18.66px) bold.
Worked example
Gray #767676 text on white #ffffff: luminances 0.184 and 1.000. Ratio = (1.000 + 0.05)/(0.184 + 0.05) = 1.05/0.234 = 4.48:1 — essentially the 4.5 AA threshold, which is why #767676 is the classic "lightest gray that still passes" on white.
Sources: WCAG 2.1 — Contrast Minimum
Frequently asked questions
What counts as large text?
WCAG defines large text as at least 18pt (about 24px) for regular weight, or 14pt (about 18.66px) when bold. Large text gets the easier 3:1 (AA) and 4.5:1 (AAA) thresholds because bigger glyphs are readable at lower contrast.
Does contrast apply to icons and UI controls?
Yes. WCAG 2.1 requires 3:1 for meaningful graphics and the visual boundaries of active controls (buttons, form fields, focus indicators), even though decorative images are exempt.
Why does luminance weight green so heavily?
Human vision is most sensitive to green light, so the 0.7152 green coefficient dwarfs red (0.2126) and blue (0.0722). Two colors can have the same "brightness" to a naive average yet very different perceived contrast.
Related calculators
This calculator is for educational purposes. Double-check important results before acting on them.