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 allMore in Accessibility4
Related categories16
Updated