Palette Contrast Matrix
A palette is not one color on white — it is every color on every other color. Enter up to 6 palette colors and the matrix scores all text-on-background pairs at once, so the combination that quietly fails AA never reaches production.
Matrix: rows are text, columns are background
Summary
Best pair: –
Worst pair: –
How to read the matrix
Find your text color in the left column, then read across to the background it will sit on. Green cells pass AAA (7:1 or better), yellow cells pass AA for normal text (4.5:1) or large text only (3:1) — the label in each cell says which — and red cells fail for all text. Note the matrix is symmetric: white text on dark slate scores the same as dark slate text on white, because contrast ratio depends only on the two luminances.
What the example palette shows
The default palette is deliberately honest, not cherry-picked: white on slate passes AAA, but amber (#F59E0B) on white only reaches about 2.15:1 — it fails even for large text, so amber works as an accent or icon color, not as body text on light backgrounds. Red (#EF4444) on white lands near 4:1: large text only. That is exactly the kind of surprise the matrix exists to surface.
Fixing a failing pair
- Shift lightness, keep hue: darken the darker color or lighten the lighter one until the pair clears 4.5:1. The palette generator builds tints and shades that preserve your hue.
- Restrict the role: if a color cannot reach 4.5:1 on a background, use it only for large text (needs 3:1), or for non-text elements such as borders and decorative shapes.
- Check the whole system: a pair that passes on white may fail on a card, a dark section, or a gradient — cross-check with the gradient checker and the dark mode guide.
How the math works
Each pair uses the WCAG 2.1 relative luminance formula and the (L1 + 0.05) / (L2 + 0.05) ratio. No uploads, no tracking: it all runs in your browser.
FAQ
Why check every pair, not just text on white?
Design systems reuse the same colors as text, backgrounds, buttons, and badges. A blue that is fine on white can fail on a dark card, and a yellow that works as an accent can be unreadable as text. The matrix catches the failing combinations before they ship.
What do AAA, AA, and AA large mean?
AAA means a contrast ratio of at least 7:1 (normal text), AA means at least 4.5:1 (normal text), and AA large means at least 3:1, which only passes for large text (18pt+ or 14pt bold). Anything below 3:1 fails for all text.
Why are the diagonal cells empty?
A color on itself always has a contrast ratio of 1:1 — invisible text. The diagonal is not a usable pair, so it is shown as a dash instead of a number.
How do I fix a failing pair?
Darken the darker color or lighten the lighter one until the pair clears 4.5:1, or reserve that color for large text or non-text use (borders, icons) only. The palette generator can build tints and shades that keep your hue while fixing the ratio.
Is my palette uploaded anywhere?
No. Everything runs locally in your browser; no colors, no analytics, no tracking.