Tool
Contrast Grid.
N×N WCAG ratio matrix across a palette.
Contrast Grid
An N×N matrix showing WCAG contrast ratios between every pair of colors in your scheme. Essential for building accessible design systems.
Scheme:
6366f1 | f16366 | 66f163 | FFFFFF | 000000 | |
|---|---|---|---|---|---|
6366f1 | — | Aa1.4Fail | Aa3.0AA Large | Aa4.5AA Large | Aa4.7AA |
f16366 | Aa1.4Fail | — | Aa2.1Fail | Aa3.1AA Large | Aa6.7AA |
66f163 | Aa3.0AA Large | Aa2.1Fail | — | Aa1.5Fail | Aa14.3AAA |
FFFFFF | Aa4.5AA Large | Aa3.1AA Large | Aa1.5Fail | — | Aa21.0AAA |
000000 | Aa4.7AA | Aa6.7AA | Aa14.3AAA | Aa21.0AAA | — |
4/10 pairs pass AA4.5:1 minimum for normal text
See also
Take this color further
How this works
Renders an N×N matrix of WCAG ratios so you can spot accessibility gaps across every pair in a palette at once.
Live preview
This pane reflects the tool's current color — swap presets or type in the workspace to watch it update.
Swatch
#6366F1rgb(99, 102, 241)
Formats
Buttons
PrimaryOutlineGhost
Typography
The color is the content.Links pick this up cleanly, and captions stay legible against neutrals.
Gradient
Badges
AlphaBetaGA