ToolzContrast Checker
Check WCAG contrast ratios between two colors for AA/AAA compliance.
Contrast ratio
4.35:1
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 white first, 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.
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.