About the Color Contrast Grid
A single contrast check between one text color and one background color is useful, but real design systems usually have several colors that might all end up paired with each other — text on a card, text on a button, an icon on a badge — and checking every combination one at a time is slow. This tool takes a whole list of colors and lays out every possible pairing in a grid, with the WCAG contrast ratio and pass/fail status shown for each cell at once.
How it works
Add as many colors as you want to your working set. The tool then calculates the WCAG contrast ratio for every possible pair in that set — including each color against itself — and renders the results as a grid, with your colors labeling both the rows and columns. Each cell shows the numeric ratio and is color-coded based on whether that pairing passes WCAG AA, so you can scan an entire palette's compatibility at a glance instead of testing pairs individually.
Common use cases
- Auditing an entire design system's palette for every legal text-on-background combination at once
- Quickly spotting which color pairs in a palette are safe to use together for text and which aren't
- Comparing a whole set of brand colors against a small set of neutral backgrounds in one view
- Documenting accessible color combinations for a style guide, with ratios included
- Catching accessibility issues across a palette early, before individual components are built using unsafe pairings
Tips for best results
Include your neutral colors — pure white, pure black, and any grays — in the grid alongside your brand colors, since text-on-neutral pairings are usually the most common real-world combination and deserve the same scrutiny as brand-color pairings. A palette with more than about eight or nine colors starts to produce a genuinely large grid, so for very large palettes, focus on checking the specific pairings you actually intend to use in real UI (like each accent color against your two or three approved background colors) rather than every mathematically possible combination.
Frequently asked questions
The Contrast Checker tool is built for checking one specific text-and-background pair in detail with the full set of AA/AAA large/normal breakdowns. This grid tool instead shows a broad overview across an entire set of colors at once, trading some per-pair detail for the ability to scan many combinations simultaneously.
Each cell shows the WCAG contrast ratio between the color labeling its row and the color labeling its column, color-coded to indicate whether that specific pairing passes the standard WCAG AA threshold of 4.5:1 for normal text.
The diagonal represents each color paired against itself, which always produces a contrast ratio of exactly 1:1 — the lowest possible value — since there's no difference in luminance between a color and itself. This is expected and simply confirms the grid is calculating correctly.
Yes — each color in your working set has its own remove control, and the grid recalculates immediately to reflect the updated set whenever a color is added or removed.
The grid view is optimized to show AA pass/fail status at a glance for scanning speed across many pairs. For the stricter AAA thresholds on a specific pairing you're especially concerned about, cross-check that single pair using the dedicated Contrast Checker tool, which reports all four WCAG thresholds.