🔲 Contrast Grid Generator
Paste a palette and get an N×N grid of WCAG 2 contrast ratios, every color against every other, with AA and AAA pass badges.
7 colors · rows = text, columns = background · AA 4.5:1 · AA18 (large) 3:1 · AAA 7:1
| Ink | Slate | Primary | Success | Warning | Danger | Surface | |
|---|---|---|---|---|---|---|---|
| Ink | Aa1.0✗ | Aa2.9✗ | Aa4.3AA18 | Aa5.9AA | Aa6.6AA | Aa4.1AA18 | Aa15.5AAA |
| Slate | Aa2.9✗ | Aa1.0✗ | Aa1.5✗ | Aa2.1✗ | Aa2.3✗ | Aa1.5✗ | Aa5.4AA |
| Primary | Aa4.3AA18 | Aa1.5✗ | Aa1.0✗ | Aa1.4✗ | Aa1.5✗ | Aa1.0✗ | Aa3.6AA18 |
| Success | Aa5.9AA | Aa2.1✗ | Aa1.4✗ | Aa1.0✗ | Aa1.1✗ | Aa1.4✗ | Aa2.6✗ |
| Warning | Aa6.6AA | Aa2.3✗ | Aa1.5✗ | Aa1.1✗ | Aa1.0✗ | Aa1.6✗ | Aa2.3✗ |
| Danger | Aa4.1AA18 | Aa1.5✗ | Aa1.0✗ | Aa1.4✗ | Aa1.6✗ | Aa1.0✗ | Aa3.8AA18 |
| Surface | Aa15.5AAA | Aa5.4AA | Aa3.6AA18 | Aa2.6✗ | Aa2.3✗ | Aa3.8AA18 | Aa1.0✗ |
Exact WCAG 2 contrast ratios (sRGB relative luminance) for every text/background pair. 🔒 Computed in your browser.
How the contrast grid generator works
Enter one color per line (HEX, RGB or HSL, with an optional label). The tool computes the exact WCAG 2 contrast ratio for every ordered pair using sRGB relative luminance and renders a matrix: each cell shows the ratio and badges for AA (4.5:1), AA-large (3:1) and AAA (7:1), with the actual colors painted so you can see the combination.
A single-pair checker answers "do these two work?"; a contrast grid answers "which combinations in my whole palette are usable?", the design-system question. It reuses the exact WCAG math from our contrast checker across the full matrix.
Frequently asked questions
What is a contrast grid?
A matrix that pairs every color in a palette against every other and shows the contrast ratio and WCAG pass/fail for each combination, so you can see at a glance which foreground/background pairs are accessible.
How many colors can I check?
As many as you paste, one per line. The grid grows to N×N, so large palettes produce big grids; a design-system core palette of 6-12 colors is the typical use.
What do the badges mean?
Each cell shows whether the pair meets WCAG 2 AA (4.5:1 normal text), AA-large (3:1 for large text) and AAA (7:1). A pair can pass for large text but fail for body text, the badges make that explicit.
Can I label my colors?
Yes, add a label after the color on each line (e.g. "#1d87f1 Primary") and the grid uses it in the row and column headers.
Does this use APCA?
This grid uses WCAG 2 ratios, the current legal standard. The APCA (WCAG 3) checker is a separate tool for the emerging perceptual method.