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.
Check an entire color palette for WCAG contrast failures in one matrix view. Every foreground/background pair is graded for AA normal and large text, with failures flagged at a glance.
Add as many colors as you need; the matrix scales automatically and makes obvious which combinations need fixing before you export.
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
Want 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.
Related tools
Related guides
Design systems · 25 Aug 2026
How to build an accessible color palette (2026 guide)
Stop guessing at color combos. Here's how to turn one brand color into a full accessible palette that passes WCAG AA and AAA.
Design systems · 1 Sept 2026
One color to a working design system
Pick a color, and in one session have a design system that ships: scales, tokens, dark mode, a contrast pass, and exports your engineers can actually use.
WCAG color palette checker runs entirely in your browser — nothing you enter is sent to a server.