Color Contrast Matrix
Generate an N×N matrix of contrast ratios for your entire color palette.
Free & unlimitedWorks offline
Palette colors (5/12)
20
Combinations
2
Pass AAA
8
Pass AA
12
Pass AA large
12
Fail AA
5×5 contrast matrix
Rows = foreground text, columns = background. Click a cell for details.
| FG \ BG | Dark | Primary | White | Gray | Success |
|---|---|---|---|---|---|
Dark | — | ||||
Primary | — | ||||
White | — | ||||
Gray | — | ||||
Success | — |
All combinations (20)
All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Add colors
Add 3-10 colors with hex values and optional names.
- 2
Review matrix
The NxN grid shows contrast ratios for every foreground/background pair.
- 3
Check pass/fail
Green borders indicate passing, red indicates failing WCAG requirements.
- Each cell shows the actual text-on-background rendering so you can see the real-world result.
- Import colors from a comma-separated hex list for quick setup.
- Fix suggestions show the smallest adjustment needed to make a failing pair pass.
- NxN contrast matrix
- AA and AAA badges
- Real text-on-background rendering
- Pass/fail summary
- Fix suggestions
- Import from hex list
- Auditing an existing color palette for accessibility
- Checking that a design system meets WCAG contrast requirements
- Finding which color combinations work together
Related tools
View allAccessibility
A11y palette generator
Generate a color palette where every combination meets WCAG contrast
Accessibility
Aria checker
Analyze HTML for common accessibility issues
Accessibility
Color wheel
Interactive color theory with harmony suggestions
Accessibility
Tab order
Visualize keyboard tab order of focusable elements