Skip to main content

The WCAG Primer is intended for use by the UK cross government accessibility community.

1.4.1 Use of Colour (A)

What WCAG says

Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Understanding 1.4.1 Use of Colour

What this means

Colour must not be the only thing used to tell different content apart.

Why it matters

Not everyone can easily tell the difference between colours, such as people with a visual impairment, using assistive technology or with certain screen settings.

How to check

Check that:

  • Information is just as understandable in greyscale as it is in colour.
  • Colour alone is not used to identify an object or text - for example, links should be underlined as well as using colour.
  • Information graphics and charts that use colour as a key also provide non-colour differences, such as applying patterns or labels.

How to test in detail for 1.4.1 Use of Colour

Good example

Indicating status using words

A ‘set password’ field uses words to show which requirements are met:

Password requirements with words
A field used for setting a password includes four requirements that the password must meet. While the symbols alone would pass Use of Colour, there are also words (Pass or Fail) to show which requirements are met.

Common mistakes

Colour is used to convey success or failure

Password requirements in red or green
In this example, the green text indicates the password requirement has passed and the red indicates the password does not meet that requirement. There is no other way, beyond the colour, to check which requirement is met.

In general, the following examples fail:

  • A form uses only colour to indicate a required field.
  • Using coloured text or backgrounds for essential information, such as a pass or fail.
  • Links are only different from plain text by colour, with no other visual differences.
  • 1.4.3 Contrast (Minimum) makes sure that text has enough contrast, regardless of whether it relies on colour to distinguish it.
  • 1.4.11 Non-text Contrast makes sure that components have enough contrast to be visible, regardless of whether they are distinguishable using colour. This can apply to icons, form fields or keyboard focus indicators.