WCAG 1.4.1 Use of Color

Success criterion 1.4.1 makes sure information is not lost for people who see colours differently or not at all — people with colour vision deficiency, people with low vision, and anyone using a monochrome or high-contrast display. It is level A and part of EN 301 549 (clause 9.1.4.1).

What the criterion requires

Colour must not be the only visual means of:

• conveying information ("sale prices are red");
• indicating an action;
• prompting a response;
• distinguishing a visual element (for example a link inside a paragraph).

Colour can still be used — it just needs a second visual cue: text, an icon, an underline, a pattern or a shape.

For links inside text, the W3C Understanding document accepts a lightness difference as an extra cue: if the link colour has a contrast of at least 3:1 with the surrounding text (technique G183), it counts as distinguishable. Links that are not visually distinguished at all are out of scope for 1.4.1, though they are hard to use.

Typical failures on an online shop

• links in product descriptions, policies or the footer shown only in a slightly different colour, without underline;
• invalid form fields marked only by a red border;
• stock status shown as a green or red dot with no text ("In stock", "Out of stock");
• colour swatches without names, so a buyer cannot tell "navy" from "black";
• charts or size guides where categories differ only by colour;
• the selected size or current step shown only by a colour change.

How to check it

Automated: our checker flags links inside a block of text that can only be told apart from the surrounding text by colour (rule link in text block). Other uses of colour — status dots, error states, charts — cannot be judged automatically and need a manual check.

By hand: view the page in grayscale (a browser extension or the operating system's colour filter). Anything you can no longer understand — which link is a link, which field has an error, which option is selected — fails. Check hover, focus, error and selected states.

How to fix it

• Underline links in text, at least in body copy and on hover and focus.
• Add text and an icon to errors and stock status.
• Show the name of each colour swatch, at least as an accessible name and on selection.
• Use patterns, labels or direct annotations in charts in addition to colour.
• Mark the selected option with a border, check mark or bold text, not only a new colour.

Related criteria

• 1.4.3 Contrast (Minimum) — 4.5:1 for text.
• 1.4.11 Non-text Contrast — 3:1 for icons and controls.
• 1.3.3 Sensory Characteristics — instructions that rely on colour.

Frequently asked questions

Do links in text have to be underlined?

Not always, but colour alone is not enough unless it gives a lightness difference of at least 3:1 against the surrounding text (W3C technique G183). The simplest and most robust option is an underline.

Is a red border on an invalid field enough?

No. Add a second cue that does not depend on colour, such as an icon and an error message in text. 3.3.1 Error Identification also asks for the error to be described in text.

Does 1.4.1 forbid colour coding?

No. Colour is allowed and helpful; it just must not be the only visual means. Add text, a pattern, an icon or a shape alongside it.

Is 1.4.1 about contrast?

No. Contrast of text is 1.4.3 and of icons and controls 1.4.11. 1.4.1 is about colour as the only signal, whatever the contrast.