Color Palette Contrast Grid

A contrast grid is an N×N matrix that pairs every color in your palette against every other color and displays the WCAG contrast ratio for each combination. Rows usually represent background colors and columns represent foreground colors, so a single glance shows you which pairs are readable and which fail.

This makes a contrast grid far more efficient than checking pairs one at a time, especially when auditing brand systems, semantic tokens, or component libraries that mix many hues.

Each cell shows the contrast ratio between its foreground and background, ranging from 1:1 (identical) to 21:1 (pure black on pure white). Higher ratios mean better legibility.

A ratio of 4.5:1 or higher passes WCAG 2.1 AA for normal body text, 3:1 passes AA for large text (18pt or 14pt bold), and 7:1 passes the stricter AAA level. Anything below 3:1 should not be used for text.

Most design systems work well with 8 to 15 colors in the grid, which produces a 64 to 225 cell matrix that stays scannable. Focus on your core brand hues, neutrals, and semantic feedback colors like success, warning, and error.

Going beyond 20 colors is technically possible but the matrix grows quadratically and becomes harder to interpret, so it is usually better to split very large palettes into smaller themed grids.

A single pair checker is fine when you already know which two colors you want to test, but it cannot reveal the hidden failures that exist across the rest of your system.

A grid forces every combination into view, so subtle mistakes like a muted gray text on a slightly lighter gray surface, or accent colors that only pass on light mode, are caught immediately rather than after launch.

Yes. You can paste your dark mode tokens into the grid the same way you would paste light mode colors, and the ratios are calculated identically because WCAG contrast math is symmetrical with respect to luminance.

Running both modes through separate grids is a fast way to confirm that the dark theme is not silently failing on accent or state colors that worked fine in the light theme.

Failing pairs are unsafe for text, icons, and interactive controls that need to convey information, but they can still be used for purely decorative elements such as background patterns, dividers, or disabled state placeholders where reading is not required.

The grid simply tells you which combinations are legible, not which combinations are forbidden. Use it as guidance for accessibility-critical surfaces while keeping creative freedom for ornamental ones.