Tool · Contrast Matrix
Contrast Matrix.
Audit your whole palette for accessibility at a glance. Add the colors you use, get an N×N grid of every pair's WCAG contrast ratio — see which combinations work as foreground+background and which fail.
Palette (6 / 12)
WCAG
Text size
Threshold: AA · Normal · ≥ 4.5:1
| FG ↓ · BG → | Ink #0E1014 · bg | Slate #5A6473 · bg | Cloud #E6EAF0 · bg | Paper #FAFAF5 · bg | Pria #FF4F4F · bg | Devi #1AB4D6 · bg |
|---|---|---|---|---|---|---|
Ink #0E1014 · text | N/A | Aa 3.18:1 | Aa 15.77:1 | Aa 18.19:1 | Aa 5.88:1 | Aa 7.75:1 |
Slate #5A6473 · text | Aa 3.18:1 | N/A | Aa 4.96:1 | Aa 5.72:1 | Aa 1.85:1 | Aa 2.44:1 |
Cloud #E6EAF0 · text | Aa 15.77:1 | Aa 4.96:1 | N/A | Aa 1.15:1 | Aa 2.68:1 | Aa 2.04:1 |
Paper #FAFAF5 · text | Aa 18.19:1 | Aa 5.72:1 | Aa 1.15:1 | N/A | Aa 3.09:1 | Aa 2.35:1 |
Pria #FF4F4F · text | Aa 5.88:1 | Aa 1.85:1 | Aa 2.68:1 | Aa 3.09:1 | N/A | Aa 1.32:1 |
Devi #1AB4D6 · text | Aa 7.75:1 | Aa 2.44:1 | Aa 2.04:1 | Aa 2.35:1 | Aa 1.32:1 | N/A |