← All terms
Labeled interface graphic showing what "Contrast" looks like

Fig. 44 / Contrast

Visual Design Vocabulary

Contrast

EXPLAINED SIMPLY:Contrast is the difference between an element and whatever sits behind it, and it decides whether text is effortless to read or nearly invisible.

Contrast is the difference between an element and whatever sits behind it, and it decides whether text is effortless to read or nearly invisible. High contrast means dark on light or light on dark; low contrast means the two are too close to tell apart.

The picture for this one is the same shipping notice twice. Same words, same layout, same button. In one, pale gray text sits on a pale card and you work for every word; in the other, dark ink sits on white and the message lands before you've decided to read it. Nothing changed between the two except the contrast, which is the entire lesson.

Low contrast keeps shipping because it looks sophisticated where it's made. Light gray on white reads as elegant restraint on a designer's bright monitor at close range. Then it meets a phone in sunlight or anyone's eyes after 40, and the restraint becomes invisible. Dark mode fails the same way in reverse: dim gray text on a near-black card.

Unlike most design vocabulary, contrast comes with math. Every text-and-background pair has a contrast ratio, and accessibility guidelines set a passing grade of 4.5 to 1 for body text. Free checkers grade any two colors in seconds. You can measure your way out of this argument, which makes contrast the rare design debate that actually ends.

You'll also hear color contrast, and low contrast as the polite name for the failure. If you catch yourself leaning toward a screen to read something, blame the contrast before you blame your eyes. Say "this doesn't pass contrast" and the conversation moves straight from opinion to fix.