WCAG 1.4.1 Use of Color

What it asks

Colour is a fine way to show information. It is just not allowed to be the only way. The rule names four jobs colour often does alone: conveying information, such as which seats are taken; indicating an action, such as which words are links; prompting a response, such as which fields went wrong; and distinguishing one thing from another, such as which line on a chart is which.

The fix is always a second cue that does not depend on seeing the colour. Links in a paragraph get an underline. An invalid field gets an icon and a message, not just a red border. A required field gets an asterisk or the word "required". Chart series get labels, patterns or different marker shapes as well as different hues.

Colour is still allowed to carry the same message as the second cue, and usually should. The rule does not ask for a grey page. It asks that someone who cannot see the difference between two colours still gets the information. A simple test is to picture the page in black and white and ask what is lost.

This criterion is about the colour alone. Whether two colours are far enough apart for people to read is a different question, answered by 1.4.3 Contrast (Minimum) for text and 1.4.11 Non-text Contrast for everything else.

Its official name is success criterion 1.4.1 Use of Color, at Level A. It was added in WCAG 2.2, under guideline 1.4 Distinguishable and the principle Perceivable. The W3C’s normative text says, in part:

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

From WCAG 2.2, W3C. Full explanation: Understanding 1.4.1 Use of Color.

Who it helps

People with colour vision deficiency, which is common, especially among men. Red and green often look the same to them, so a red border on a field or a green tick next to a red cross says nothing.

People with low vision who see colours faintly or not at all, people using a monochrome display or high contrast mode, which replaces the page colours with its own, and people reading a page printed in black and white.

What passes and what fails

These pass

• Links in body text that are underlined, or set in bold, as well as coloured.
• A form error shown with a red border, an icon and a message that says what is wrong.
• Required fields marked with an asterisk and a note explaining it, as well as a coloured label.
• A line chart where each line has a different marker shape and a label at its end.
• A seat map where sold seats are grey and crossed out, not just grey.

These fail

• Links in a paragraph shown only by a different colour, with no underline or other mark.
• A field that turns its border red when the value is wrong, with no message or icon.
• Required fields shown only by a red label.
• A pie chart whose slices are told apart only by hue, with a legend of coloured squares.
• A calendar where available days are green and unavailable days are red, with nothing else to tell them apart.

For links in a block of text, the W3C allows one specific way to rely on colour. The link colour must contrast with the surrounding text at a ratio of at least 3:1, and a non-colour cue, such as an underline, must appear when the pointer hovers over the link and when it has keyboard focus. Most teams find a permanent underline simpler.

How to test it by hand

1. Look at the page as if it were black and white. Browser developer tools can emulate this, or take a screenshot and remove the colour. Note anything you can no longer tell apart.
2. Find every link inside running text. Check that each one has an underline, a different weight or another mark, not just a different colour.
3. Submit a form with wrong or missing values. Check that each error has text or an icon as well as a colour change.
4. Check how required fields are marked. A colour alone is not enough.
5. Look at every chart, map, legend and status indicator. For each colour that means something, find the second cue: a label, a pattern, a shape or text.
6. Write down each element where colour was the only cue, and what information it carried.

What automated testing can decide

What a machine can decide

One case is clear-cut. A link inside a block of text that differs from the words around it only in colour, with no underline, no change of weight and no border, is a failure that automated testing can find reliably. It is also the most common failure of this criterion.

What it cannot

Everywhere else the question is about meaning. A tool can see that a border is red; it cannot know that red means "wrong", or that the message underneath is about this field. It can see that a chart has five colours; it cannot know whether the labels beside them do the job. Deciding what a colour means, and whether something else says the same thing, is a judgement.

How Dreven handles it

Dreven finds the links, form states, indicators and charts on your pages where colour may be carrying the meaning, and shows you each one with its colours, the page and a picture of it.

A reviewer decides whether a second cue exists, and the report says how each result was decided.

No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.

Related criteria

• 1.4.3 Contrast (Minimum) (Level AA). Whether text colours are far enough apart to read. 1.4.1 is about colour as the only cue.
• 1.4.11 Non-text Contrast (Level AA). Contrast for control edges, icons and chart parts.
• 1.3.3 Sensory Characteristics (Level A). Instructions must not rely only on colour, shape or position either.
• 3.3.1 Error Identification (Level A). Errors must be identified and described in text.

Questions people ask

All WCAG 2.2 criteria, in plain words