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

Color Accessibility

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

UI foundationEstablished researchFoundational

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 plate
  1. 1Definition
  2. 2Types of colour vision deficiency
  3. 3Practical rules
  4. 4Colour-only meaning, and what to add
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Any use of colour to convey state or category.
  • Building charts and data displays.
  • Reviewing a design for accessibility.
  • Any state, status or category is being communicated by colour.

Common mistakes

  • Red and green as the sole distinction.
  • Colour-only required-field markers.
  • Legends that require colour matching.

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.

Colour-only meaning, and what to add

Where colour alone is usedAdd
Required fields marked in redA label or an asterisk with a legend
Valid and invalid inputsAn icon and a message
Chart seriesDirect labels, or pattern and shape
Status dotsText beside the dot, or a distinct shape per status
Selected itemsA tick, a border, or a state label
Links in body textAn underline
Diff and change highlightingA marker character, or a border style

In practice

  1. i.

    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.

  2. ii.

    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.

  3. iii.

    The greyscale screenshot test

    A check anyone can run

    Take a screenshot, remove the colour, and read it. Everything still distinguishable is safe. Everything that has collapsed was relying on hue, and that is the list to fix.

Local chart

FND·028 · Region II · Grid C2

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

ChartCMP·028 · APPLIED THROUGHVon Restorff EffectLAW·009 · PRINCIPLES BEHIND THISStarkTOOL·034 · OFTEN USED WITHAccessibility ChecklistCHK·002 · CHECK YOUR WORKColour Vision DeficiencyTERM·081 · SHORT DEFINITIONContrast RatioTERM·057 · SHORT DEFINITIONUse of ColorA11Y·010 · RELATED CONCEPTThemingSYS·008 · RELATED CONCEPTColor SystemsFND·026 · RELATED CONCEPTColor Theory for InterfacesFND·019 · RELATED CONCEPTContrastFND·002 · RELATED CONCEPTDark ModeFND·027 · RELATED CONCEPT

Sources

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

  1. [1]
  2. [2]

    Colour Blind Awareness prevalence figures

    Colour Blind Awareness

    Source of the commonly cited 1 in 12 men and 1 in 200 women figures.

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.

  • ChartCMP·028 · Component

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.