Contrast Matrix.
Audit your whole palette for accessibility at a glance. Add the colors you use, get an N×N grid of every pair's WCAG contrast ratio - see which combinations work as foreground+background and which fail.
| FG ↓ · BG → | Ink #0E1014 · bg | Slate #5A6473 · bg | Cloud #E6EAF0 · bg | Paper #FAFAF5 · bg | Pria #FF4F4F · bg | Devi #1AB4D6 · bg |
|---|---|---|---|---|---|---|
Ink #0E1014 · text | N/A | Aa 3.18:1 | Aa 15.77:1 | Aa 18.19:1 | Aa 5.88:1 | Aa 7.75:1 |
Slate #5A6473 · text | Aa 3.18:1 | N/A | Aa 4.96:1 | Aa 5.72:1 | Aa 1.85:1 | Aa 2.44:1 |
Cloud #E6EAF0 · text | Aa 15.77:1 | Aa 4.96:1 | N/A | Aa 1.15:1 | Aa 2.68:1 | Aa 2.04:1 |
Paper #FAFAF5 · text | Aa 18.19:1 | Aa 5.72:1 | Aa 1.15:1 | N/A | Aa 3.09:1 | Aa 2.35:1 |
Pria #FF4F4F · text | Aa 5.88:1 | Aa 1.85:1 | Aa 2.68:1 | Aa 3.09:1 | N/A | Aa 1.32:1 |
Devi #1AB4D6 · text | Aa 7.75:1 | Aa 2.44:1 | Aa 2.04:1 | Aa 2.35:1 | Aa 1.32:1 | N/A |
Audit every color pair in a palette
A contrast matrix compares each palette color against the others in one grid. Add your interface colors to find useful foreground and background combinations before they are applied to buttons, labels, cards, or navigation. Check the text-size setting that matches the design, review which pairs meet the selected WCAG AA or AAA target, and export the results as CSV or Markdown for a design review.
Choose contrast pairs in context
A passing pair in a matrix is not a complete accessibility audit. Test the actual type size and weight, component states, focus treatment, and surrounding colors in the interface. WCAG 2.2 contrast requirements have defined exceptions, and contrast alone cannot make meaning clear when information is communicated only by color. Use the color blindness simulator to review palette distinctions from additional visual perspectives.