Contrast

Example

A white icon on a pale background fails contrast; a darker background fixes it. Gray text on a light gray card is hard to read. A dark overlay under a hero image improves title contrast.

Why it matters

Pretty colors can still fail eyes. Contrast is how different two colors look next to each other, needed so text and icons stay readable.

Accessibility guidelines such as WCAG set minimum contrast ratios for text. Overlays on images and pale highlight colors are common places contrast fails.