Skip to content
UX Atlas
UI foundationEstablished researchFoundational

Color Accessibility

Around one in twelve men has a colour vision deficiency, so colour has to be reinforced by something else.

Definition

Designing colour so that information remains available to people with colour vision deficiencies, low vision, or viewing conditions that degrade colour. It combines contrast requirements with the rule that colour must never be the only carrier of meaning.

Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.

On this page
  1. Definition
  2. Types of colour vision deficiency
  3. Practical rules
  4. In practice
  5. Sources
  6. Continue from here

Types of colour vision deficiency

TypeEffectApproximate prevalence
Deuteranomaly and deuteranopiaReduced or absent green perceptionMost common. Around 6 percent of men.
Protanomaly and protanopiaReduced or absent red perceptionAround 2 percent of men.
Tritanomaly and tritanopiaBlue and yellow confusionRare, under 0.01 percent, and not sex-linked.
AchromatopsiaNo colour perceptionVery rare, roughly 1 in 30,000.

Practical rules

  • Pair every colour signal with a shape, icon, label or pattern.
  • Use lightness difference as well as hue difference between any two colours that must be distinguished.
  • Avoid red and green as the only distinction between two states, which is the most common failure.
  • Test in greyscale, which catches most of these problems in seconds.
  • For charts, use direct labelling rather than a colour legend wherever the layout allows.
  • Do not rely on colour to indicate required fields or errors.

In practice

Validation without colour

Forms

An error state marked by red border alone is invisible to some users. Adding an icon and text makes it available to everyone, and it is what WCAG requires anyway.

Directly labelled charts

Data visualisation

Labelling series at the end of each line removes the colour matching task entirely, which helps every reader and not only those with colour vision deficiency.

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 Dashboard

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

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.