Home · Palette Contrast Matrix
Palette Contrast Checker — the Whole Matrix, Graded by Use
A WCAG palette checker that tests every colour against every other — and grades each pairing for the job it will actually do, not with one blunt threshold. The seeded palette includes a trap: a pair that displays 4.50 and still fails. Find it, click it, repair it.
How to read it: rows are the text or component colour, columns are the ground. Cells carry the ratio (two decimals, display only) and the verdict for the grading mode you select — judged always on the unrounded ratio. Click any cell for all five verdicts, a live preview, and its repair.
Your palette
Paste colours — one hex per line, or paste CSS variables and the colours will be read out of them — or arrive with a palette from the generator. Up to 16 colours: past that, a grid stops being readable, which is a readability limit, not a rule of the standard.
The matrix — graded by use
Rows are the text (or component) colour; columns are the ground it sits on. Click any cell for the full grading and, if it fails, its repair.
The adjacent colour is the whole point of non-text contrast
WCAG 1.4.11 does not ask whether your focus ring contrasts with "the background" in the abstract. It asks about the colours adjacent to it — the field it surrounds, the surface behind the field. A ring that measures 4.48:1 against white fails at 2.79:1 against a light grey card, and tools that quietly assume white will pass it anyway. In this matrix there is no assumed ground: the column is the adjacent colour, you pick the pairing, and changing the ground changes the verdict in front of you. The dedicated non-text checker isolates that three-colour question — component, adjacent surface, page — if that is the audit you are running.
Bring a palette, or arrive with one
Paste hex values or a block of CSS variables; names are read from the variables. Or start in the palette generator, where the palette is built to pass by construction, and open it here to see the same grades from the matrix side. Either way, the grades come from one shared measurement — the one published, formula and test record included, on the methodology page.
Matrix questions
Why does a cell show 4.50 but say FAIL?
Because the verdict compares the unrounded ratio with the threshold. The seeded palette contains #767776 on white: its exact ratio is 4.496170, which displays as 4.50 at two decimals and is still below 4.5 — so it fails, correctly. The Web Content Accessibility Guidelines are explicit that the ratio is not rounded up to meet a threshold. Any tool that passes this pair is rounding in your favour.
What does "graded by use" mean?
A single pass/fail against 4.5:1 is the wrong question for most pairings. Body text needs 4.5:1; large text (24px, or 18.66px bold) needs 3:1; component boundaries, input borders, focus indicators and meaningful icons need 3:1 against the adjacent colour — the colour actually touching them, which you choose, because defaulting it to white manufactures false passes on tinted surfaces. The matrix can grade its cells by any of these uses, and a cell click shows all five verdicts at once.
Does the colour-blindness simulation change the grades?
No — deliberately. The simulation (Machado et al. matrices for deuteranopia, protanopia and tritanopia) recolours the grid so you can see pairings that might blur together for some visitors, but every ratio and verdict is still computed from your real colours. WCAG contrast is judged on the colours as specified; a simulation is a warning layer, not a verdict.
What happens when I repair a colour from a cell?
The repair moves that colour in OKLCH lightness only — hue held — until the ratio recomputed from the new hex clears the target you picked. Then the entire matrix re-grades and the summary counts update, so if the repair broke a different pairing, you see it immediately. Nothing else in the palette is touched.