Check Every Pair In A Palette For Readable Contrast
A palette can look perfectly legible on your display and fail for someone else. Contrast is arithmetic, not opinion: this computes the WCAG relative luminance of each colour you enter, tests every pairing against the AA and AAA thresholds for both normal and large text, and lists the combinations you can't use. Checking every pair at once is what catches the combination you wouldn't have thought to test. Local only; nothing leaves the tab.
- Card
- Contrast ratio for every pair in the palette
- local
- What it replaces
- Testing one pair at a time and hoping
- $0.00
- Input
- Palette colours as hex values
- no card
- Output
- Ratios, verdicts, and the unusable pairs
- recomputed
What you pay otherwise
| Route | What you get | Cost |
|---|---|---|
| Accessibility audit | Someone running the same ratios | $500+ |
| Finding it at review | A palette rebuild at the worst moment | the sprint |
| Shipping it anyway | Users who cannot read the interface | the point |
| This page | Every pair tested in one pass | $0 |
The workflow
Enter the palette as you'll actually use it
Include the backgrounds, not just the accents. Most failures are a mid-tone accent on a light background — a pair that looks fine as a button and fails as text.
Read the normal-text row, not the large-text one
Large text needs only a 3.0 ratio; body text needs 4.5. A pair can pass AA for headings and fail everywhere else, which is exactly the trap that gets shipped.
Fix the ratio, not just the colour
Darkening an accent usually costs less than changing the background, and it fixes every pair involving that colour at once. Work from the pair with the worst ratio outward.
Re-check after every palette change
Changing one colour changes every pair it appears in. A palette that passed last week can fail today from a single tweak — re-run it rather than assuming.
Worked example
Sample: 4-colour palette, 6 pairs (worst first) #2b6b4f vs #a8342c 1.04 fails #2b6b4f vs #8a6c42 1.30 fails #a8342c vs #8a6c42 1.35 fails #8a6c42 on #f3f1e7 4.31 large text only #2b6b4f on #f3f1e7 5.59 AA #a8342c on #f3f1e7 5.81 AA Failing body text 4 of 6 pairs Uploaded nothing — computed in the tab
Numbers above are sample data produced by the tool's own pre-loaded example, run in the browser — not averages or measured benchmarks.
What breaks this
Entering only the accents and not the backgrounds misses the pairs that actually fail. Reading the large-text verdict as a pass when body text needs 4.5. Assuming a previous check still holds after changing one colour — every pair involving it changes.
Try it now
A four-colour palette is loaded with two pairs failing body text. Darken the mid-brown and watch its ratio climb past 4.5.
Open the checker →Go deeper: the printable spec sheet
The check is free forever. The $4 one-time tier adds:
- Printable spec sheet — every pair with its ratio on one sheet for handoff — estimate: ~15 min saved writing it into the design doc.
- Saved palettes shelf — keep up to 8 palettes in this browser — estimate: ~12 min saved re-checking variants.
- Token export — the passing pairs listed as usable combinations — estimate: ~20 min saved documenting them.