Palette matrix
Paste your CSS variables, your Tailwind config, or a list of hex codes. Every combination is checked against every other, and each failure carries its fix.
8 colors found. Names are kept where your file had them.
| canvas | — | 1.1 | 17.3 | 9.5 | 4.4 | 5.4 | 5.2 | 5.5 |
|---|---|---|---|---|---|---|---|---|
| elev | 1.1 | — | 19.0 | 10.4 | 4.8 | 6.0 | 5.7 | 6.0 |
| ink | 17.3 | 19.0 | — | 1.8 | 3.9 | 3.2 | 3.3 | 3.1 |
| body | 9.5 | 10.4 | 1.8 | — | 2.2 | 1.7 | 1.8 | 1.7 |
| muted | 4.4 | 4.8 | 3.9 | 2.2 | — | 1.2 | 1.2 | 1.2 |
| violet | 5.4 | 6.0 | 3.2 | 1.7 | 1.2 | — | 1.1 | 1.0 |
| pass | 5.2 | 5.7 | 3.3 | 1.8 | 1.2 | 1.1 | — | 1.1 |
| fail | 5.5 | 6.0 | 3.1 | 1.7 | 1.2 | 1.0 | 1.1 | — |
Failing as body text
- muted on violet1.24:1no shade of this hue passes
- muted on fail1.25:1no shade of this hue passes
- body on fail1.73:1as the background
- body on violet1.75:1as the background
- ink on body1.82:1as the foreground
- body on pass1.84:1as the foreground
- body on muted2.16:1as the background
- ink on fail3.15:1as the background
- ink on violet3.17:1as the background
- ink on pass3.34:1as the foreground
- ink on muted3.93:1as the background
- canvas on muted4.40:1as the background
The other tools
Contrast checker
Two colors, the ratio, and the nearest color that passes.
Accessible ramp
One brand color, a full scale, every step measured.
Color blindness check
Two colors that pass contrast can still be the same color.
Focus and UI check
Fifteen interface parts, and which of them the 3:1 rule exempts.