Color & Contrast

Never color alone

Never let color be the only thing that carries meaning. Pair it with an icon, shape, position, or text so it survives color-blindness, glare, and grayscale.

A form error shows red AND an icon AND a message — not just a red border.

Card number is invalid

Icon + text back the color up — still reads in grayscale

Tap the example to replay it · press and hold to slow it down