Library / Layout & visual design / Contrast
No. 021·noun·also called color contrast, contrast ratio, legibility

Contrast

How different two colors are from each other, which decides whether text is easy to read.

SPECIMEN · LIVE DEMO
Definition

What it is

Contrast is the difference in lightness between text (or an icon) and what's behind it. Dark grey on white is high contrast; light grey on white is low and hard to read.

There's an accessibility standard for this, called WCAG, that sets minimum contrast ratios: 4.5:1 for normal text. Low-contrast "aesthetic" grey text is one of the most common design mistakes.

Contrast also creates emphasis: the one high-contrast button on a page is the one people notice.

Say it like a builder

How to ask for it

Vague

“Some of the text is hard to see.”

Precise

“Raise the contrast of all body and secondary text to meet WCAG AA (at least 4.5:1 against the background). Keep placeholder text lighter, but never below 3:1.”

Why it works

"Hard to see" doesn't say how much to fix; naming contrast and the AA ratio gives a measurable target.

In the wild

You've seen this in

  • LLight grey placeholder text that's hard to read
  • MDark mode in macOS
  • WThe bold black "Buy" button on a white product page
Usage note

Often confused with

Visual hierarchyHierarchy is the overall reading order; contrast is one tool for it and a readability requirement on its own.Dark modeDark mode is a whole color scheme; contrast applies to any scheme.