Palette Accessibility Dashboard
Check how every color in your palette works together for accessibility. See WCAG 2.1 contrast ratios for all possible text/background combinations.
Palette Colors
Import from Palette Generator1
2
3
4
Summary
12Total Pairs
6Pass AA (50%)
2Pass AAA (17%)
Contrast Matrix
Rows = text color, Columns = background color. Green = AA pass (4.5:1+), Yellow = AA Large only (3:1+), Red = fail (<3:1).
| Text ↓ / Bg → | #1F2937 | #FFFFFF | #4F46E5 | #10B981 |
|---|---|---|---|---|
#1F2937 | -- | Aa14.7:1AAA | Aa2.3:1Fail | Aa5.8:1AA |
#FFFFFF | Aa14.7:1AAA | -- | Aa6.3:1AA | Aa2.5:1Fail |
#4F46E5 | Aa2.3:1Fail | Aa6.3:1AA | -- | Aa2.5:1Fail |
#10B981 | Aa5.8:1AA | Aa2.5:1Fail | Aa2.5:1Fail | -- |
Best Text Color Suggestions
For each background color, the palette color with the highest contrast ratio is suggested as the best text color.
Aa
Background: #1F2937Best text: #FFFFFF14.7:1 Pass AA
Aa
Background: #FFFFFFBest text: #1F293714.7:1 Pass AA
Aa
Background: #4F46E5Best text: #FFFFFF6.3:1 Pass AA
Aa
Background: #10B981Best text: #1F29375.8:1 Pass AA