About Contrast grid
N×N WCAG matrix for any color list
How to use
Audit a whole palette at once by rendering every color pair with its contrast ratio in a single grid.
Contrast grid
Click a cell to copy the foreground / background pair.
Reading the matrix
Rows are foreground colors and columns are backgrounds. Each cell shows the WCAG ratio for that pair, with AA and AAA chips for normal text.
The diagonal compares a color with itself, so it always reads 1:1 and does not need to pass.
When to use it
Use the grid to audit a token set before shipping. It exposes pairs that look fine in isolation but fail once combined, especially mid-tone brand colors used as both text and surface.
Frequently asked questions
What do the chips mean?
AA needs 4.5:1 and AAA needs 7:1 for normal text. Large text uses 3:1 and 4.5:1.
Why is the diagonal labelled?
A color against itself always has a ratio of 1:1, so the cell is marked as a reference rather than a failure.
Can I paste more than five colors?
Yes. Add one color per line and the matrix grows with the list.