Pairette

Tone scales

A tone scale is one color spread across a fixed series of brightnesses — the same series for every color of the palette. Add a color and it appears here as a row of steps, light to dark. The steps are cut evenly in contrast: every neighbouring pair stands in the same ratio, and the number above a step says how far along the way from white to black it is. The color is taken there with its hue untouched, as far as the hue allows, and every cell says the luminance it reached.

WCAG 2 reads contrast off luminance alone. Two colors on the same step therefore have a contrast of 1:1 to each other, whatever their hues, and how much contrast any two colors have depends on the distance between their steps and on nothing else — not on where on the scale that distance sits. Settle it once, and the hue is free. Eleven steps are a convenient example to count with: neighbours then stand ten points apart, so five steps of distance are fifty points.

Distance Contrast What it carries
30 points 2.49:1 nothing — under every threshold
40 points 3.38:1 large text — 1.4.3 Contrast (Minimum)
graphics and controls — 1.4.11 Non-text Contrast
50 points 4.58:1 body text — 1.4.3 Contrast (Minimum)
70 points 8.42:1 body text at the enhanced level — 1.4.6 Contrast (Enhanced)

Those figures hold wherever the pair is taken from: fifty points measure 4.58:1 at the light end of the scale and 4.58:1 at the dark end. Half the scale is the middle step, #757575, which stands at exactly that contrast from white and from black alike.

Pairette helps you find colors that hold up next to each other — readable on screen, in print and as spot colors. Put together the palette you want to work on, and it says which pairs carry and which do not.

Display options

Cell size / details

Palette

Add a color

Print color (CMYK in %)
Spot color (measured L, a, b)

The screen color takes any notation CSS admits. Fields left empty are converted from the lead color; where that conversion strays too far from the original, the application says so. A spot color is measured, never calculated.

Cancel