Contrast Checker
Check WCAG contrast ratios between two colors for AA/AAA compliance, and get the closest passing color.
Part of design tools.
Contrast ratio
4.35:1
Closest passing color
Checking contrast against WCAG
WCAG 2.1 defines contrast as the ratio between the relative luminance of the lighter and the darker color, from 1:1 (identical colors) to 21:1 (black on white). Normal text needs at least 4.5:1 to pass AA and 7:1 for AAA; large text — 18pt, or 14pt bold — needs only 3:1 and 4.5:1, since bigger glyphs stay legible at lower contrast. Enter a foreground and background color to check them together; a translucent foreground is composited onto the background first (and a translucent background onto white), since a color with an alpha channel has no fixed appearance until something is behind it.
Why the ratio matters more than the colors
Two colors can look very different and still fail contrast, or look similar in hue and still pass — the ratio depends on relative luminance, not on how far apart the colors sit on a color wheel. That is why a contrast checker is worth running even on palettes that look fine by eye: yellow text on white, or dark grey on black, are common failures that are easy to miss without measuring them.
From a failing pair to a passing one
When a pair falls short of 4.5:1, the checker proposes the closest foreground that passes AA, and the closest that passes AAA, one click away from being applied. Only the OKLCH lightness of your color moves — its hue and chroma stay put, so the suggestion is still your brand blue, just darker or lighter — and both directions are tried, keeping the smaller change. Near black and near white, sRGB has less room for chroma, so a very saturated color may come out slightly muted. When no lightness at all reaches the target on that background, the checker says so instead of making a color up.
Normal text versus large text
WCAG sets a lower bar for large text because bigger glyphs stay legible at lower contrast — 18pt regular weight, or 14pt bold, counts as large. Everything else is normal text and needs the stricter 4.5:1 (AA) or 7:1 (AAA) thresholds. AAA is the higher bar, meant for content where legibility matters most; AA is the baseline most accessibility audits check against.
Checking a whole palette at once
Checking one pair at a time is the right tool for a specific bug report, not for a theme. To build the scale a pair comes from, the palette generator annotates every step with its contrast on white and black; to carry that palette into a dark theme, the dark mode palette converter converts each token in OKLCH and re-checks every text/surface pair in both themes with the same WCAG maths as this page.