Color Contrast Grid (All Pairs vs WCAG)
Pick a list of colors; get a contrast grid showing the ratio between every pair, with WCAG AA / AAA pass/fail flags. Useful for design systems — find which color combinations are accessible.
How to use the Color Contrast Grid (All Pairs vs WCAG)
Paste your palette, one hex color per line. The grid shows the contrast ratio for every pair, with AA and AAA flags. Read a cell as “this row color as text on this column color as background.”
Checking a whole palette at once
A design system has many colors, and any of them might end up as text on any other as a background. Checking those combinations one pair at a time is slow and easy to skip, which is how an inaccessible foreground/background pairing slips into a component library unnoticed.
Paste a palette and this builds a matrix of every color against every other, with the contrast ratio and a WCAG AA/AAA flag in each cell, so the accessible combinations are visible at a glance. To check a single pair in detail with a live text preview and a fix suggestion, use the contrast checker; to generate the palette in the first place, the monochromatic palette.
Common use cases
- Design systems — map which palette pairs are safe for text.
- Theme audits — check a light and a dark theme palette in one view.
- Token validation — confirm semantic color tokens pair accessibly.
- Documentation — publish an accessibility matrix alongside a palette.
- Refactors — spot the failing combinations before swapping colors.