Color Contrast Grid

Most contrast checkers compare one foreground and one background color at a time. Design systems rarely stop at one pair — a palette might have five brand colors, three neutrals and two accent colors, and any of them could end up as text on any other. The Color Contrast Grid checks an entire palette at once: paste in a list of hex colors and get a full pairwise matrix, with the exact WCAG 2.x contrast ratio and an AA pass/fail mark for every combination.

What is WCAG color contrast?

WCAG 2.x defines relative luminance — how bright a color appears, weighted by how the human eye perceives red, green and blue (L = 0.2126×R + 0.7152×G + 0.0722×B, using linearized sRGB channels) — and the contrast ratio between two colors, (L1 + 0.05) / (L2 + 0.05) (lighter over darker), which ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). The WCAG AA threshold for normal text is 4.5:1 — the bar most accessibility audits, Lighthouse and legal standards (ADA, EN 301 549, Section 508) require. This tool marks every cell that clears 4.5:1 with a ✓ and every cell that doesn't with a ✗.

How to use it

1. Paste your palette into the Colors field — one hex color per line, or comma-separated (e.g. #000000, #FFFFFF, #FF0000). 3-digit hex (#fff) works too.
2. The grid updates instantly: the first row and first column list your colors, and every other cell shows the contrast ratio of that row's color used as text on that column's color as background, e.g. 4.53:1 ✓.
3. Scan the grid for ✗ cells — those are pairs that would fail WCAG AA for normal text if used together, and are worth avoiding or adjusting.
4. Use Copy or Download to export the grid as CSV for a design-system audit or a pull-request comment.

Up to 12 colors are supported per grid (144 cells) — enough for most brand and UI-neutral palettes at once. Any entry that isn't a valid 3- or 6-digit hex color is skipped rather than breaking the grid, and duplicate colors are collapsed to one.

FAQ

Why is the diagonal always 1.00:1 and marked ✗? A color compared against itself has identical luminance, so the ratio is always exactly 1:1 — the minimum possible, and well below the 4.5:1 AA bar. That's expected; the diagonal isn't a meaningful pairing (nobody sets text and background to the same color), it's just a byproduct of the grid being N×N.

Is the grid symmetric? Yes — contrast ratio is symmetric by definition (it only depends on which luminance is lighter and which is darker, not which color is "foreground"), so color A on color B always equals color B on color A.

What does the ✓/✗ threshold mean — is that AA or AAA? The pass mark uses WCAG AA for normal text (≥4.5:1), the threshold most audits and legal standards check. A pair marked ✗ might still pass the more lenient AA Large Text threshold (3:1); for a single-pair breakdown across all four WCAG thresholds (AA/AAA × normal/large), including a suggested accessible color, use the Accessible Color Pair Finder.

Can I paste colors with names or extra text after them? The tool looks for a valid hex color at the start of each line or comma-separated entry — text formatted as #RRGGBB or #RGB. Anything that isn't a recognizable hex color is skipped, so keep each entry to just the color itself.

Why cap the list at 12 colors? Beyond 12 colors the grid grows to 144+ cells and becomes hard to scan visually — if you need to check a larger palette, split it into smaller related groups (e.g. neutrals, then brand colors).

Is my color data sent anywhere? No — every calculation runs entirely in your browser. Nothing is uploaded or stored.