This tool checks whether a text-and-background colour pair meets WCAG 2.1 accessibility requirements. Enter a text colour and a background colour and it returns the exact contrast ratio plus pass/fail badges for AA and AAA at normal and large text sizes, and the 3:1 threshold for UI components and graphics. A live preview shows the colours on real sample text so you can judge legibility too.
How it works
The tool converts both colours to their relative luminance using the official WCAG formula: each sRGB channel is linearised, then weighted 0.2126 × R + 0.7152 × G + 0.0722 × B. The contrast ratio is:
ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05)
This gives a value from 1:1 (identical) to 21:1 (black on white). The result is checked against the WCAG thresholds:
| Requirement | Minimum ratio |
|---|---|
| AA normal text | 4.5:1 |
| AA large text / UI components | 3:1 |
| AAA normal text | 7:1 |
| AAA large text | 4.5:1 |
Example
For text #767676 on a #ffffff background, the ratio is about 4.54:1 — it just passes AA for normal text but fails AAA. Darkening the text to #595959 raises the ratio to about 7:1, passing AAA. The checker shows these thresholds at a glance so you can adjust colours until they pass. The ratio is calculated in your browser using the official relative-luminance formula, so nothing is uploaded.