Color Contrast

Color Contrast

Contrast determines whether text, controls, borders, and status indicators remain readable across different displays and user conditions.

Core concept

Explain foreground/background relationships, muted text, link contrast, disabled controls, status colors, and why large text and normal text have different contrast expectations.

Using it in a real interface

Compare a subtle gray paragraph with normal body text and a warning badge on a light background. Explain how contextual utilities should be checked rather than assumed accessible.

Implementation notes

Use more than color to convey states. Labels, icons, patterns, or text can make a status understandable even when contrast or color perception differs.