A contrast grid checks every color in a palette against every other color at once and gives each pair its WCAG ratio and verdict. Every pair, with the number, free and without an account. Normal text needs 4.5:1, large text and interface graphics need 3:1. Checking pairs one at a time is how accessible-looking palettes ship with unreadable combinations.

Why one pair at a time is not enough

The two big contrast checkers take exactly two colors. That works when you've got two colors. A design system has eight or nine, and the interesting failures are never the pair you thought to check. They're the accent on the tile, the muted text on the card, the link color on the one surface you added last.

Here is a real one. Benchvale's own palette started with a brighter accent at #23A6B8. It looked right. Against the primary tile it measured 2.82:1, under the 3:1 floor that graphics and interface elements need, so the mark itself would have failed. Nothing would have told us without checking that specific pair, and that pair is one of 72 in a nine color palette. The fix was two colors instead of one: a bright accent for marks and a deeper #0E6B78 for anything that carries text.

That is the mistake this grid is built to catch, and it is the most common palette mistake there is: a color that passes as a graphic and fails as text. When a color in the paste can hit 3:1 against some partner and never 4.5:1 against any, its name is listed in the summary above the grid, so the graphics-only set is a list of colors rather than only a mode switch.

How to read the grid

Rows are the text color. Columns are the background. Each cell gives the ratio and the verdict.

AAA is 7:1 or better for normal text, 4.5:1 for large text.
AA is 4.5:1 for normal text, 3:1 for large text and interface graphics.
Fail means don't use that pair for that purpose. It may still be fine for a decorative shape that carries no meaning.

Large text means 18.66px bold or 24px regular and above. Icons, borders, focus rings and chart strokes count as graphics and use the 3:1 floor.

What the ratio does not tell you

Contrast ratio is a luminance calculation. It says nothing about hue, so two colors can pass at 5:1 and still be indistinguishable to someone with deuteranopia. Run the palette through the color blindness simulator as well, and never let color be the only thing carrying meaning.

Questions

Which standard does this use?

WCAG 2.2 contrast ratios, which are unchanged from 2.1 and 2.0. Normal text 4.5:1 for AA and 7:1 for AAA. Large text and interface graphics 3:1 for AA and 4.5:1 for AAA.

Why does my brand accent fail?

Most brand accents are chosen for saturation, and saturation doesn't raise luminance contrast much. The usual fix is to keep the bright version for marks and shapes and add a deeper version for text and links. That is what we did.

Can I get the results out?

Copy them as plain text, or copy the palette as CSS custom properties. The palette to CSS tool will also emit a JSON token file when it lands.

Does this send my colors anywhere?

No. The calculation is a few lines of arithmetic and it runs in your browser. There's no request to make. Once the page has loaded, you can disconnect from the network and it keeps working.

Why does it stop at 14 colors?

Fourteen colors is 182 ordered pairs, and past that the grid stops being readable and starts being a wall. Anything above the cap is left out and the count under the grid says how many, because a silent cap reads as if we checked everything.

Related tools

Once the palette survives the grid: the contrast checker is the same math for one pair when you already know which two colors to test. Export it to CSS variables and JSON tokens, which carries the contrast verdicts into the file as comments. Contrast is only half the check, so run it through the color blindness simulator as well: two colors can pass at 5:1 and still be the same gray to a large number of people. And accent colors that fail as text is the specific failure this grid was built to catch, with our own numbers.

Palette contrast grid

Your palette