Palette contrast grid

Why check a palette as a whole

Brand colors usually get picked side by side on a board, as swatches. They rarely get picked as pairs, with one written on top of the other. That comes back to bite later, when a developer needs a link color on the pale background, a caption on the accent panel and a label on the primary button, and chooses from the palette by eye.

The number of pairs grows fast. With n colors there are n × (n − 1) ways to put one on another, which makes 12 for four colors, 30 for six and 132 for twelve. Going through them one at a time is slow enough that nobody does it. A grid does it instantly, and it also shows you how the palette is built: which colors work as “ink”, which work as “paper” and which are only good for decoration.

Reading the grid

Each row is a text color and each column a background. A cell shows a sample “Aa” in those two colors, the WCAG contrast ratio cut to two decimals, and one of four labels:

The ratio is the same whichever color is on top, so the table mirrors itself across the diagonal. We keep both halves because the samples don’t look the same. Dark on light and light on dark feel different even at an identical number. The Keep menu fades out every pair under the threshold you choose. Select a cell to open a larger preview with a heading, a paragraph, small type and a button. There’s also a link that sends the pair to the contrast ratio calculator, which can suggest a nearby shade that passes.

The three lists under the grid

Normal-size text

Up to eight pairs at 4.5:1 or more, strongest first. Each pair appears once, with the lighter color as the background, since that’s the common case.

Large text and headings only

Up to six pairs between 3:1 and 4.5:1. They’re tempting because they look fine in a mockup at 40 px. Put them in a paragraph and they fail.

Button sets

A button involves three colors and two tests. Its label has to reach 4.5:1 against the button, and the button itself has to reach 3:1 against the page, or people won’t see there’s a button at all. For each possible button color, the list gives the label with the highest contrast and the lightest page background that satisfies both.

If the first list comes up empty, the palette has no ink and paper pair. Add a near-black such as #1a1a1a or a near-white and the grid fills in.

Repairing a palette that falls short

Most palettes fall short the same way, with several mid-tone colors of similar lightness. Teal, coral, mustard and violet look nothing alike, and yet none of them can carry text on any of the others. Three additions fix almost every case:

1. A dark neutral for body text. A deep version of the main brand hue does the job as well as black and still looks like the brand.
2. A light neutral for page and card backgrounds, such as an off-white tinted with the brand hue.
3. A darker step of the accent color for links and buttons. Lower the lightness until white text on it reaches 4.5:1, and keep the original accent for large shapes and illustrations.

Then write the result into your style guide as rules about pairs, for example “accent only on white, never under body text”. People make fewer mistakes with a list of allowed pairs than with a list of colors.

Input, sharing and limits

Separate colors with commas or line breaks. Hex with or without #, rgb(), hsl() and CSS color names all work. Duplicates are merged and anything after the twelfth color is ignored. The address bar always holds the current palette as ?c=1d3557,f1faee,…, so the link you copy reopens the same grid. Everything is computed in your browser.