Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Contrast

Difference is what makes anything perceivable, and it is measurable for text against its background.

Definition

Contrast is the perceptible difference between two elements. It operates on lightness, colour, size, weight, shape and texture. For text and interface controls it is also a measurable accessibility requirement.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. WCAG contrast minimums
  3. Contrast beyond text
  4. In practice
  5. Sources
  6. Continue from here
AaBody text21:1Passes AAAAaBody text7.4:1Passes AAAAaBody text4.6:1Passes AAAaBody text2.4:1Fails AA body
Contrast ratios against a white background. The WCAG AA threshold for body text is 4.5 to 1, and 3 to 1 for large text and interface components.

WCAG contrast minimums

ContentAAAAA
Body text under 18.66px regular4.5:17:1
Large text, 24px or 18.66px bold and above3:14.5:1
Interface components and graphical objects3:1Not defined
Disabled controls and decorative textExemptExempt
LogotypesExemptExempt

Contrast beyond text

  • Input borders need 3:1 against their surroundings, or the field is invisible to some users.
  • Focus indicators need 3:1 against the adjacent background, and WCAG 2.2 adds specific requirements for focus appearance.
  • Icons that carry meaning need 3:1. Purely decorative icons do not.
  • Chart series need to be distinguishable by more than hue, since adjacent hues at equal lightness are indistinguishable to many readers.
  • Placeholder text is text. Grey placeholders below 4.5:1 fail, and placeholders should not carry essential information anyway.

In practice

Grey on grey

A common failure

Secondary text at around 3:1 looks refined on a designer's calibrated display and disappears on a laptop screen in daylight. Test in bad conditions, not good ones.

Dark mode inversion

Theming

Contrast ratios do not transfer when a palette is inverted. Pure white on pure black exceeds the ratio and produces halation for many readers. Off-white on a dark grey usually reads better and still passes.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA DashboardA Data TableA FormA Mobile AppA Pricing PageAn Enterprise WorkflowAuthenticationNavigation

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Relied on by

Entries that assume this is already in place.

  • Visual HierarchyUI foundation

    Hierarchy is built from contrast in size, weight, colour and space.

Often used with

These usually appear in the same screen or the same decision.

Commonly confused with

Close enough to be mixed up, different enough to matter.

  • Use of ColorAccessibility

    Contrast is a measurable ratio. Use of colour is whether meaning survives without it.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.