Color and contrast: making palettes readable

Color decisions become accessibility decisions the moment text sits on top of them. WCAG expresses that as a contrast ratio between the foreground and background luminance, ranging from 1:1 for identical colors to 21:1 for black on white. The thresholds worth memorising are 4.5:1 for normal body text and 3:1 for large text at AA.

Lightness is not perceived brightness

HSL makes it easy to produce a "10% lighter" variant, but equal lightness values across different hues do not look equally bright. Yellow at 60% lightness reads far brighter than blue at the same value, so a palette that looks balanced on the wheel can still fail a measured check.

Never rely on hue alone

Color-blind users cannot separate some hue pairs at all. Anything encoded by color—status, chart series, validation state—needs a second signal such as an icon, a label, or a pattern.

A workflow that holds up

Pick a base color, derive the surrounding scale, then measure the pairs you actually intend to ship rather than the whole grid. Prune steps that fail instead of adjusting the threshold, and record the passing combinations as tokens so nobody re-derives them by eye.

Verify before you commit

Measure pairs with Contrast Checker, translate values with Color Converter, and generate candidate scales with Palette Generator. The Color Toolkit collection groups the whole workflow.