Color palette contrast matrix

Each row is a text color and each column a background. A cell shows a sample of the text on that background, the contrast ratio, and its grade. The ratio depends only on how light the two colors are, so the text color and the background can swap places and the ratio stays the same: the matrix mirrors across its diagonal, where a color meets itself. The last two rows put black and white text on every color of the palette.

Ratios are cut to two decimals, never rounded up. WCAG compares the exact value, and its Understanding document on 1.4.3 is explicit that a pair just under 4.5:1 fails, so a cell never shows 4.50:1 for a pair that does not reach it. How the ratio is computed, from each color's relative luminance, is worked through in black or white text on a color.

A palette of five colors has ten pairs, and most of them will never be text on background. The matrix finds the ones that can. In the example palette, 2 of the 10 pairs reach AA, 2 only AA large, and 6 fail; the strongest pair, #264653 on #e9c46a, reaches 6.03:1. That is typical: mid tones fail with each other, and text needs a dark color on a light one or the reverse.

Read it by role. Body text needs AA against the page's background. A button's label needs AA against the button, or AA large when the label is large. The button itself, an input's border and a chart's lines need 3:1 against what is next to them, which is why the AA large cells count for shapes too. The black and white rows give the fallback: on every color of the example palette one of the two reaches AA, and that holds for any color, as the black or white guide shows. Which color should do which job is the subject of how many colors a website palette needs.

The matrix judges pairs in the abstract. On a real page the pairs are given: this text sits on that background. When Recolor repaints a page, its engine finds the text and what it sits on, up to 3,000 text elements, and keeps the 150 heaviest pairs. The mapping then checks each pair under the new palette. Where one would read worse than it did on the original page and worse than 4.5:1 (3:1 for large text), the colors that moved give back just enough lightness to read again. The rules are in Strength, neutral tint and overrides, and why lightness rather than hue decides contrast is in keeping a palette accessible.

So the two work together: the matrix to choose a palette with enough contrast in it, See these on a page to watch it on your own site with the text kept readable.

Coolors' contrast checker compares one text color with one background and reports AA and AAA for normal and large text; its page puts contrast checks for a whole palette in Pro. Contrast Grid (contrastgrid.com) builds a grid like this one from a list of colors in almost any format, can take a separate list for the other axis, and keeps the grid in its address. Use it when your text colors and backgrounds are different sets, or when you want names on the colors.

This matrix reads what Recolor reads: a Coolors link, a Recolor link or share page, or hex codes, up to 10 colors, and its link opens the same palette in Recolor. For a palette from Coolors, the converter turns the same link into Tailwind or CSS code.