Palette contrast matrix
Paste up to ten colours. Every text and background pair appears at once, with its ratio and its verdict.
- Every pair
- Up to ten colours
- AA and AAA
Up to ten colours, one per line or separated by commas.
10 of 30 pairs pass AA for body text
Runs entirely in your browser. Nothing you enter is sent or stored.
Why check a palette, not a pair
A palette of six colours makes thirty pairs of text and background. Checking them one by one misses most of them, and the ones that fail are rarely the ones you thought of. The matrix shows them all: each row is a text colour, each column a background, each cell the contrast between them.
Reading the matrix
- AAA: 7:1 and above, fine for any text.
- AA: 4.5:1 and above, the level most laws require for body text.
- AA large: 3:1 and above, for large text (24 px, or 18.66 px bold) and interface components.
- Fail: under 3:1, for decoration only.
A colour on itself is left out: the diagonal stays empty.
From the matrix to the design
Use the matrix to name the pairs a design may use, then keep to them: a style guide that lists its approved text colours for each background stays accessible as it grows. To mend a failing pair, take it to the contrast checker, which finds the nearest colour that passes.
Made by Mystya.
We are a web studio in Québec. These tools are free and will stay free: they are how we show what we care about, in something you can use. If you want a site built with the same attention, we would like to hear about it.