Check the WCAG contrast ratio between text and background colors with a live preview and instant AA / AAA pass-fail results for normal and large text.
How the contrast checker works
The checker implements the WCAG 2.1 formula exactly. Each color's sRGB channels are linearized (undoing the display's gamma curve) and combined with the standard weights — 21.26% red, 71.52% green, 7.22% blue — to get its relative luminance, a measure of how bright it appears. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05) with the lighter color on top, giving a value from 1:1 (identical) to 21:1 (black on white). WCAG requires at least 4.5:1 for normal text and 3:1 for large text at level AA; the stricter AAA level asks for 7:1 and 4.5:1.
ratio = (Llight + 0.05) / (Ldark + 0.05) // 1 … 21Frequently asked questions
Are my colors sent to a server?
No. The luminance and ratio math runs locally in your browser and updates as you type. Only the two hex values appear in the URL so you can share a specific color pair with your team.
What counts as large text?
WCAG defines large text as at least 18pt (24px) regular weight, or 14pt (about 18.7px) bold. Large text is easier to read at lower contrast, so the thresholds relax to 3:1 for AA and 4.5:1 for AAA. Everything smaller must meet the normal-text thresholds.
Should I aim for AA or AAA?
AA (4.5:1 for normal text) is the widely adopted legal and practical baseline — most accessibility audits test against it. AAA (7:1) is worth targeting for body text in reading-heavy interfaces and for audiences with low vision, but it is often impractical for brand colors; WCAG itself doesn't require AAA across an entire site.
Last updated: 8 July 2026
More tools
Runs entirely in your browser — nothing you enter is uploaded. ColorMint · MintKit