Palette Contrast Matrix
Paste a full palette and get every possible foreground-background contrast ratio in a grid. Find the safe pairs at a glance.
Contrast Checking at the Palette Level
The existing Contrast Checker tests one foreground color against one background color and returns the WCAG ratio with a pass-or-fail verdict. The existing Contrast Batch Checker tests a predefined list of specific pairs you specify. Neither tool answers the question that arises constantly during design system work: given a palette of N colors, which of the N times N possible pairs satisfy WCAG AA for body text, AA for large text, and AAA, and which do not? The Palette Contrast Matrix answers this in a single view. Paste a palette of up to 25 colors and the tool computes the contrast ratio for every possible foreground-background pair, displaying them in a grid where each cell shows the ratio and color-codes pass-or-fail for the four WCAG tiers (AA normal, AA large, AAA normal, AAA large). The result is an at-a-glance map of which pairs in your palette are safe for text, which are safe for icons or large headings only, and which need to be reserved for decorative use. Designers building accessible component libraries refer to this matrix constantly; surfacing it as a tool removes the manual pair-by-pair checking that used to take an hour per palette.
Reading the Matrix
Columns are foreground colors and rows are background colors (the typical text-on-background orientation). Each cell shows the contrast ratio as a number and the WCAG verdict as a colored badge. Green badges indicate AAA compliance (7.0 or above for normal text), blue indicates AA compliance (4.5 or above for normal text, 3.0 or above for large text), yellow indicates AA-large only (3.0 to 4.5), and red indicates failing all WCAG tiers. The diagonal of the matrix (same color foreground and background) is ignored since the ratio is always 1.0. Above and below the diagonal the values are inverted but the verdicts are the same, since WCAG contrast is symmetric. A filter toggle lets you hide failing pairs to focus on the usable subset, or hide passing pairs to focus on which pairs need work. The matrix updates live as you edit the palette, so you can see immediately how adding, removing, or adjusting a color affects the overall accessibility profile of the palette.
Practical Workflows for Design Systems
Build the matrix early in the design system process, before settling on component-level color choices. A palette where only 10 percent of pairs satisfy AA will produce constant accessibility friction during component design; a palette where 40 percent or more satisfy AA gives the freedom to compose accessible components without hand-tuning every pair. The matrix view also surfaces unexpected combinations: pairs you would not have thought to check often turn out to be the highest-contrast options in the palette and become useful for specific cases like skeleton placeholders or focus states. For larger palettes (15 to 25 colors) the matrix grows quickly, so the tool offers a filtered view that shows only the high-contrast subset for quick reference during text-on-background decisions. The full matrix is always available behind a toggle for exhaustive analysis. Output options include a CSV export of the full ratio table and a screenshot-friendly view suitable for inclusion in design system documentation, which is the way most teams want to record the contrast story of their palette.
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools