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.
| Text color | on canvas | on elev | on ink | on body | on muted | on violet | on pass | on fail |
|---|---|---|---|---|---|---|---|---|
| canvas | same color | 1.1 | 17.3 | 9.5 | 4.4 | 5.4 | 5.2 | 5.5 |
| elev | 1.1 | same color | 19.0 | 10.4 | 4.8 | 6.0 | 5.7 | 6.0 |
| ink | 17.3 | 19.0 | same color | 1.8 | 3.9 | 3.2 | 3.3 | 3.1 |
| body | 9.5 | 10.4 | 1.8 | same color | 2.2 | 1.7 | 1.8 | 1.7 |
| muted | 4.4 | 4.8 | 3.9 | 2.2 | same color | 1.2 | 1.2 | 1.2 |
| violet | 5.4 | 6.0 | 3.2 | 1.7 | 1.2 | same color | 1.1 | 1.0 |
| pass | 5.2 | 5.7 | 3.3 | 1.8 | 1.2 | 1.1 | same color | 1.1 |
| fail | 5.5 | 6.0 | 3.1 | 1.7 | 1.2 | 1.0 | 1.1 | same color |
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:1
- body on violet1.75:1
- ink on body1.82:1
- body on pass1.84:1
- body on muted2.16:1
- ink on fail3.15:1
- ink on violet3.17:1
- ink on pass3.34:1
- ink on muted3.93:1
- canvas on muted4.40:1
Why this rule exists
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.
Every passing color
Not one fix. The whole range of your color that clears the rule.
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.