Contrast

Contrast is the visible difference between elements — in color, size, weight, or shape — that makes them distinguishable.

Why it matters

Contrast creates emphasis and improves readability. Too little contrast and content blends together; the right amount draws the eye to what matters.

In depth

Contrast is a key tool for both aesthetics and accessibility. Color-contrast ratios (defined by WCAG) ensure text is legible for people with low vision. Beyond color, contrast in scale and weight is central to building visual hierarchy.

Real-world example

Dark text on a light background is easy to read. A bright primary button against a muted page clearly signals the main action.

Try it

The quick brown fox

Adjust the text color until it passes.

Text2.96:1

✕ AA Large✕ AA✕ AAA

Related terms

Visual Hierarchy
Accessibility
Color Theory

Back to index