One brand colour in, a full ramp out — with the contrast ratio measured on every step, so you pick by number instead of by eye.
Ramp · the number under each swatch is its contrast against white
Pairings that pass AA
Why lightness is spaced in perceptual steps. Splitting lightness evenly
from 0 to 100 produces a ramp where the light end all looks the same and the dark end
jumps. The steps here are spaced on an eased curve, so each one looks like a real
increment rather than measuring like one.
What the numbers mean. 4.5:1 is the AA minimum for body text, 3:1 for
large text (24px, or 18.66px bold) and for interface components such as borders and focus
rings. A colour at 3.2:1 is fine for a button border and unusable for the label on it —
which is exactly the distinction a palette picked by eye gets wrong.
Hue is held constant. Only lightness and saturation move, so every step
still reads as the same brand colour rather than drifting toward a different one.