WCAG Color Contrast Checker
Check WCAG 2.1 contrast between any two colors. Returns AA/AAA pass/fail for body text and large text. If the combination fails, suggests the smallest lightness adjustment that would pass. Live preview at multiple text sizes.
Large heading
Medium heading
Body paragraph text at the default 16px. Apparently legible? The numbers below say for sure.
Smaller print at 13px — often the canary for contrast issues.
How to use the WCAG Color Contrast Checker
Pick foreground and background. The preview shows real text at multiple sizes; the table below confirms pass/fail against WCAG AA (4.5:1 body, 3:1 large) and AAA (7:1 body, 4.5:1 large). If you're failing, the suggestion box tells you the closest passing version.
WCAG contrast, and why the ratio matters
The Web Content Accessibility Guidelines express legibility as a contrast ratio between text and its background, running from 1:1 (identical) to 21:1 (black on white). The thresholds are fixed: AA needs 4.5:1 for body text and 3:1 for large text, while AAA tightens that to 7:1 and 4.5:1. Light-grey text on white is the classic failure — it looks fine to the designer who chose it and disappears for anyone with low vision.
Enter two colors and this returns the exact ratio, the AA and AAA pass or fail for each text size, and — when you fall short — the nearest passing adjustment. To audit a whole palette at once rather than a single pair, use the contrast grid; to build an accessible pairing from a brand hue, the harmony palette generator.
Common use cases
- Accessibility audits — confirm text meets WCAG AA or AAA before shipping.
- Design reviews — settle whether a grey is legible with a number, not a guess.
- Fixing failures — take the suggested adjustment to the closest passing color.
- Button and link states — check that text stays legible on every background.
- Brand compliance — verify brand colors clear the threshold for body copy.