Skip to content
UX Atlas
Plate A11Y·010 · AccessibilityGrid A4 · Rev. 2026-09-14

Use of Color

Colour may reinforce meaning but must never be the only thing carrying it.

AccessibilityCraft conventionFoundational

Definition

WCAG 1.4.1 requires that colour is not used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element.

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

On this plate
  1. 1Definition
  2. 2Common failures and their fixes
  3. 3What to pair colour with
  4. 4Using colour as a second channel
  5. 5Commonly confused with
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Any use of colour to convey state, category or meaning.
  • Reviewing charts and data displays.

Common mistakes

  • Validation marked by colour only.
  • Colour-coded categories with no labels.
  • Selected states shown only by tint.

Common failures and their fixes

FailureFix
Red border marks an invalid fieldAdd an icon and a text message.
Required fields shown in redAdd an asterisk with a legend, or the word required.
Links distinguished only by colourUnderline them.
Chart series distinguished only by hueAdd direct labels, patterns or varied line styles.
Status shown only by a coloured dotAdd a text label.
Selected state shown only by a background tintAdd a check mark, a border or bold weight.

What to pair colour with

Colour is a good second channel and a poor only channel. One of these alongside it is usually enough.

  • Text, which is the most reliable: the word Overdue beside the red dot.
  • An icon with a distinct silhouette, not just a coloured circle. Shape survives desaturation and low vision.
  • Position, such as a status column that is always in the same place.
  • A pattern or line style, which is how a chart stays readable printed or in greyscale.
  • Weight or border, for selected states, so the selection is visible without the tint.
  • An underline, for links inside body text, where colour alone is the classic failure.

Using colour as a second channel

Do

  • Keep the meaning readable with every colour removed, then add colour back to make it faster.
  • Use the same pairing throughout: if error is red plus an icon plus text once, it is that everywhere.
  • Check both themes, since a tint that carries meaning in light mode often disappears in dark.
  • Give charts direct labels, which removes the legend and the colour-matching task at once.

Do not

  • Do not use red and green as the only difference between two states.
  • Do not mark required fields, validation state or availability with colour alone.
  • Do not rely on a coloured border, which is thin, easy to miss and frequently below contrast requirements.
  • Do not assume a colour blindness simulator is enough. The greyscale test catches more, faster.

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.

Contrast

UI foundation

The measured luminance ratio between foreground and background.

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 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.

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.

Learn about Contrast

Local chart

A11Y·010 · Region V · Grid A4

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

Alert and Inline MessageCMP·015 · RELIED ON BYBadge and TagCMP·023 · RELIED ON BYLinkCMP·002 · RELIED ON BYStepperCMP·029 · RELIED ON BYToggle SwitchCMP·007 · RELIED ON BYContrastFND·002 · COMMONLY CONFUSED WITHAccessibility ChecklistCHK·002 · CHECK YOUR WORKColour Vision DeficiencyTERM·081 · SHORT DEFINITIONSemantic ColorTERM·066 · SHORT DEFINITIONWCAG in PracticeA11Y·001 · RELATED CONCEPTVon Restorff EffectLAW·009 · RELATED CONCEPTAffordances and SignifiersPRIN·007 · RELATED CONCEPT

Sources

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

  1. [1]

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 DashboardA Pricing PageAn Ecommerce Experience

Relied on by

Entries that assume this is already in place.

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.