Not by colour alone

01The rule and the reason

WCAG 1.4.1 Use of Color (level A) says colour must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element.

Colour vision deficiency is common, and red-green is the most common type. A red error and a green success can look almost the same to some users. Colour also fails on greyscale screens and in strong sunlight.

02Pair colour with something else

• Errors and success

  Add an icon and a text message, not just a red or green border.

• Links in body text

  Underline them. Colour alone is a weak signal inside a paragraph.

• Charts

  Label lines directly, and use patterns or marker shapes beside colour.

• Status and selection

  Use a check mark, a label or a change in weight to show the selected state.

03Small examples

• A required field: add the word “Required” as well as a coloured label.
• A form error: “Error: enter a valid email” with an icon, in addition to a red outline.
• A calendar: show booked days with a pattern or a label, not only a different fill.
• A price change: use a plus or minus sign and a word, as well as green or red.

Ask yourself: if every colour became grey, would the meaning survive?

04How to test

1. Preview the design in greyscale. Many design tools and browser developer tools can emulate this.
2. Use a colour vision deficiency simulator for red-green types, available in browser developer tools.
3. Check every state and chart: can you still tell the items apart?

Colour is still valuable as a second signal. The goal is redundancy, not removing colour.

Charts depend on colour more than most interfaces, so they need extra care. A legend of five similar blues is hard for anyone to match to the lines.

• Label series directly at the end of the line instead of relying on a legend.
• Use different line styles (solid, dashed) or marker shapes for each series.
• Limit the number of series, and offer a data table as an alternative view.
• Choose colours that differ in lightness as well as hue.

05Sources

• W3C. Understanding SC 1.4.1 Use of Color. https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html