WCAG color palette checker
Check an entire color palette for WCAG contrast violations. See every foreground/background pair in a matrix, spot failures instantly, and fix them. Free, instant, browser-only.
Contrast matrix
6/15 pairs pass AA
Primary | Secondary | Accent | Background | Surface | Text | |
|---|---|---|---|---|---|---|
Primary | 1.6Fail | 1.1Fail | 3.5Fail | 3.2Fail | 5.2AA | |
Secondary | 1.6Fail | 1.5Fail | 5.6AA | 5.1AA | 3.2Fail | |
Accent | 1.1Fail | 1.5Fail | 3.8Fail | 3.5Fail | 4.7AA | |
Background | 3.5Fail | 5.6AA | 3.8Fail | 1.1Fail | 17.9AA | |
Surface | 3.2Fail | 5.1AA | 3.5Fail | 1.1Fail | 16.4AA | |
Text | 5.2AA | 3.2Fail | 4.7AA | 17.9AA | 16.4AA |
Failing combinations
Primary
onSecondary
1.61:1Primary
onAccent
1.10:1Primary
onBackground
3.48:1Primary
onSurface
3.19:1Secondary
onAccent
1.46:1Secondary
onText
3.19:1Accent
onBackground
3.83:1Accent
onSurface
3.52:1Background
onSurface
1.09:1Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.
How to use this tool
- Add your palette colors with names and hex values.
- Check the contrast matrix for failing pairs.
- Adjust colors until all pairs pass WCAG AA.
Frequently asked questions
- How is this different from the contrast checker?
- The contrast checker tests one pair at a time. This tool tests every combination in your palette at once, showing a matrix of contrast ratios and pass/fail grades.
- What does AA and AAA mean?
- WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1. The matrix shows AA grades; hover for the full breakdown.
- How many colors can I add?
- As many as you need. The matrix scales automatically, though it becomes harder to read beyond about 8 colors.