This tool builds a full contrast grid for a small palette so you can check every text-on-background combination for accessibility at once. Paste up to eight hex colours and it tests each colour as text on every other colour as a background, showing the exact WCAG ratio and an AA/AAA pass-or-fail label in each cell. It is built for designers and developers verifying that a palette meets accessibility requirements.
How it works
For each cell, the tool converts the two colours to their relative luminance using the official WCAG formula (linearising each sRGB channel, then weighting 0.2126 R + 0.7152 G + 0.0722 B). The contrast ratio is then:
ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05)
This produces a value from 1:1 (identical) to 21:1 (black on white). Each ratio is rated against the WCAG thresholds:
| Ratio | Rating |
|---|---|
| ≥ 7:1 | AAA |
| ≥ 4.5:1 | AA (normal text) |
| ≥ 3:1 | AA Large (large/bold text) |
| below 3:1 | Fail |
Example
Testing #333333 text on a #ffffff background gives a ratio of about 12.6:1, which passes AAA. The same #333333 on a #777777 background drops to roughly 2.8:1, which fails — exactly the kind of risky pairing the grid surfaces instantly.
It uses the official WCAG relative-luminance formula, runs entirely in your browser, and never uploads your palette.