Skip to content
UX Atlas
Plate FND·002 · UI foundationGrid C2 · Rev. 2026-08-14

Contrast

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

UI foundationCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2WCAG contrast minimums
  3. 3Contrast beyond text
  4. 4Working to the ratios without designing by numbers
  5. 5In practice
  6. 6Commonly confused with
  7. 7Local chart
  8. 8Sources
  9. 9Continue from here

Reach for this when

  • Defining any colour pair in a design system.
  • Reviewing accessibility compliance.
  • Building a dark theme.

Common mistakes

  • Testing only on a high-quality display in a dark room.
  • Forgetting non-text contrast for borders, icons and focus rings.
  • Assuming a light-mode palette inverts safely.
  • Measuring a colour pair in isolation when the real background includes an overlay, a tint or a translucent surface.
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.

Working to the ratios without designing by numbers

Do

  • Check text against the real background it lands on, including scrims and gradients.
  • Test disabled, placeholder and secondary text, which are where most failures live.
  • Verify the focus indicator and control boundaries at 3:1, which is a separate requirement.
  • Build ramps so that any pair you are likely to use already passes.

Do not

  • Assume a pass in light mode carries to dark mode. Check both independently.
  • Set placeholder text as the only label, then lighten it for elegance.
  • Treat 4.5:1 as a target. It is the floor.
  • Rely on a plugin that measures against the swatch rather than the composited colour.

In practice

  1. i.

    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.

  2. ii.

    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.

  3. iii.

    Text over an image

    The composited background

    White text that passes on the dark part of a photograph fails on the light part. Either a scrim strong enough to guarantee the ratio, or a solid panel behind the text, is the only reliable answer.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Use of Color

Accessibility

Whether information carried by colour is also carried some other way.

Key difference

Contrast is a measurable ratio between two colours. Use of colour is whether the meaning survives when the colour does not, which a perfectly contrasting pair can still fail.

Use Contrast when

  • The question is whether text or a boundary can be seen at all.
  • You need a number to check against 4.5:1 or 3:1.
  • The fix is a lightness change.

Use Use of Color when

  • Red and green are the difference between two states.
  • A chart, status or required field relies on hue alone.
  • The fix is an icon, a label or a pattern, not a darker shade.

Learn about Use of Color

Local chart

FND·002 · Region II · Grid C2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

LinkCMP·002 · APPLIED THROUGHVon Restorff EffectLAW·009 · PRINCIPLES BEHIND THISVisual HierarchyFND·001 · RELIED ON BYStarkTOOL·034 · OFTEN USED WITHUse of ColorA11Y·010 · COMMONLY CONFUSED WITHAccessibility ChecklistCHK·002 · CHECK YOUR WORKContrast RatioTERM·057 · SHORT DEFINITIONWCAGTERM·073 · SHORT DEFINITIONFocus IndicatorsA11Y·003 · RELATED CONCEPTWCAG in PracticeA11Y·001 · RELATED CONCEPTThemingSYS·008 · RELATED CONCEPTBorders and DividersFND·047 · RELATED CONCEPT

Sources

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

  1. [1]
  2. [2]
  3. [3]

    APCA, the Accessible Perceptual Contrast Algorithm

    Myndex Research

    Candidate method for WCAG 3. Not currently normative.

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.

  • LinkCMP·002 · Component

Principles behind this

The reasoning this solution is an application of.

Relied on by

Entries that assume this is already in place.

  • Visual HierarchyFND·001 · UI 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.

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.