What is a contrast grid?

A table of every color in a palette checked against every other one. A pair checker answers whether two specific colors work together. A grid answers which combinations in a whole palette are usable, which is the question you actually have when building a design system.

Each row is a color used as text, each column is a color used as the background. The number in a cell is the contrast ratio between them, and it is drawn in the actual pair, so the number is legible exactly when the combination it describes is legible. Passing cells carry an outline, failing cells are dimmed.

Why is the grid symmetric?

Because contrast ratio is. Swapping text and background gives the same number. The grid still shows both halves, because reading a row as one text color across many backgrounds is a different question from reading a column, even though the arithmetic matches.

What counts as large text?

24 pixels and above, or 19 pixels and above when bold. That threshold is where the requirement drops from 4.5 to 1 down to 3 to 1. It catches people out, because a 20 pixel heading in a regular weight is still body text as far as the standard is concerned.

Can I bring in a palette I made elsewhere?

Yes. The palette lives in the address bar, so a link carries it. The palette generator and the image extractor both produce palettes in the same format, and a grid link from either one opens here with those colors already loaded.

Does passing the grid mean my design is accessible?

No. It means those color pairs clear a measurable floor for contrast. Accessibility covers keyboard operation, focus order, labelling, motion and much else besides, and contrast itself says nothing about font weight or the room someone is sitting in. Treat a grid full of passes as one requirement met, not the job finished.

Contrast grid

Every color in a palette, checked against every other. A pair checker tells you whether two colors work together. A grid tells you which combinations in a whole palette are usable, which is the question you have when you are building something rather than fixing one line.

#0B0B0E
#F2F2F4
#7A5CFF
#00D9F5
#FF2D92

6 of 20 pairs pass. Strongest is 17.58:1.

Contrast ratio of every color as text on every other color as background
Text color	0B0B0E	F2F2F4	7A5CFF	00D9F5	FF2D92
0B0B0E		17.58	4.49	11.46	5.66
F2F2F4	17.58		3.91	1.53	3.11
7A5CFF	4.49	3.91		2.55	1.26
00D9F5	11.46	1.53	2.55		2.03
FF2D92	5.66	3.11	1.26	2.03

Using a grid well

What the table tells you, and what it cannot.

Read the rows, not the cells

A single passing cell is not very interesting. What matters is whether a color has somewhere to live: a text color that passes on only one background in the palette will constrain every layout you build. Scan across a row and count.

Most palettes fail most pairs

Five colors give twenty ordered pairs, and a good palette will not pass all of them. That is normal. Palettes are usually built for harmony rather than separation, and the useful outcome is knowing which pairs to avoid rather than expecting a clean sweep.

Every number is drawn in its own pair

The ratio in each cell is printed in the two colors it describes, so a cell you cannot read is a combination you should not ship. It is the one part of the table that does not need interpreting.

Contrast is not accessibility

A grid full of passes means one requirement is met. It says nothing about keyboard operation, focus order, labelling or motion, and nothing about font weight or ambient light. Necessary, and a long way from sufficient.

Common questions

What is a contrast grid?: A table of every color in a palette checked against every other one. A pair checker answers whether two specific colors work together. A grid answers which combinations in a whole palette are usable, which is the question you actually have when building a design system.
How do I read it?: Each row is a color used as text, each column is a color used as the background. The number in a cell is the contrast ratio between them, and it is drawn in the actual pair, so the number is legible exactly when the combination it describes is legible. Passing cells carry an outline, failing cells are dimmed.
Why is the grid symmetric?: Because contrast ratio is. Swapping text and background gives the same number. The grid still shows both halves, because reading a row as one text color across many backgrounds is a different question from reading a column, even though the arithmetic matches.
What counts as large text?: 24 pixels and above, or 19 pixels and above when bold. That threshold is where the requirement drops from 4.5 to 1 down to 3 to 1. It catches people out, because a 20 pixel heading in a regular weight is still body text as far as the standard is concerned.
Can I bring in a palette I made elsewhere?: Yes. The palette lives in the address bar, so a link carries it. The palette generator and the image extractor both produce palettes in the same format, and a grid link from either one opens here with those colors already loaded.
Does passing the grid mean my design is accessible?: No. It means those color pairs clear a measurable floor for contrast. Accessibility covers keyboard operation, focus order, labelling, motion and much else besides, and contrast itself says nothing about font weight or the room someone is sitting in. Treat a grid full of passes as one requirement met, not the job finished.

All tools