Skip to content
UX Atlas
AccessibilityCraft conventionFoundational

Use of Color

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

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 page
  1. Definition
  2. Common failures and their fixes
  3. Sources
  4. Continue from here

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.

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

Relied on by

Entries that assume this is already in place.

Commonly confused with

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

  • ContrastUI foundation

    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.