Contrast Grid

Check the WCAG contrast of every colour in a palette against every other, in one matrix. See at a glance which text-on-background pairs pass AA and AAA.

Each cell is the contrast ratio of the row colour as text on the column colour as background. AA needs 4.5 for normal text (3 for large); AAA needs 7 (4.5 for large). Green cells pass AAA, amber pass AA only, red fail.

Frequently asked questions

What is a contrast grid for?

When you have a palette, you often need to know which colours can sit on which as readable text. The grid shows the WCAG contrast ratio for every pairing at once, so you can pick accessible combinations without checking each pair by hand.

What do AA and AAA mean?

They are WCAG accessibility levels. AA requires a contrast ratio of at least 4.5 for normal text (3 for large or bold text); AAA, the strictest, requires 7 (4.5 for large). Higher ratios are easier to read.

Which colour is the text and which the background?

Each cell uses the row colour as the text and the column colour as the background, and the cell is actually painted in those colours so you can see the result. Contrast is symmetric, so the ratio is the same either way round.