WCAG Contrast Checker

This checker measures the contrast ratio between a text color and a background color using the official WCAG 2.x relative-luminance formula — the same math accessibility auditors and browser dev tools use. Every calculation runs locally in your browser, and the ratio updates live as you type hex codes, drag the color pickers, or (in Chromium browsers) eyedropper-pick colors straight off your screen.

Contrast ratios run from 1:1 (identical colors) to 21:1 (pure black on pure white), and WCAG sets different pass marks depending on what the color pair is used for. Level AA requires 4.5:1 for normal body text and 3:1 for large text and UI components; the stricter AAA level requires 7:1 and 4.5:1. Rather than making you remember those thresholds, the tool grades all five checks at once in a pass/fail grid and gives the pair an overall grade from Fail to AAA.

When a combination fails, you do not have to guess your way to a fix. The suggestion engine nudges your text color toward black or white in small steps — preserving its hue as much as possible — until it crosses the AA or AAA line, and shows you the exact hex that passes along with its new ratio. One click applies it, and you can copy the finished pair as ready-to-paste CSS.