1.4.1 Use of Color
Colour must not be the only way to show information, indicate an action, prompt a response or mark an element.
Level APrinciple 1: Perceivable
What does it mean?
Many people cannot tell certain colours apart. If colour is the only signal, for example red for errors, green for "available" or a link that differs from text only by colour, they miss the information. Add a second cue: text, an icon, a pattern or an underline.
This does not forbid colour. It only requires that the information is also available in another way. Links inside running text are a common case: if they are not underlined, they need a different visual cue, and colour alone is only acceptable under strict extra conditions.
Who does it help?
- People with colour vision deficiency
- People with low vision
- People using monochrome displays or high-contrast modes
- Older people whose colour perception changes
Common failures
- Form errors shown only by a red border
- Links in body text that are only a different colour, with no underline
- Charts where lines or segments can only be told apart by colour
- Stock status shown only as a green or red dot
How we test it
- axe-core Automatic: axe-core finds typical violations. A violation is pre-filled as “fails”.
Test question: Is colour ever the only way to show information (links in text, required fields, errors, charts)?
A person decides every criterion. No criterion ever passes automatically.
How to fix it
<input id="email" style="border-color:#d00"><input id="email" aria-invalid="true" aria-describedby="email-err">
<p id="email-err">Error: Please enter a valid e-mail address.</p>The error is now also stated in text that screen readers announce, not shown by colour alone.
Practical tips
- Look at your page in greyscale: if information disappears, colour is carrying it alone.
Guides and patterns on this
- Contrast that everyone can readPale grey text may look refined, but many people struggle to read it, and on a phone in bright sunlight everybody does. Here are the ratios WCAG 2.2 sets and how to lock them into your design.
- TabsOne panel of several, arrow keys switch between tabs.
- Error messages that help instead of confuseErrors as text, linked, with a fix and an error summary.
Official source
How does your website do on this criterion?
The free check tests your home page automatically; the audit decides all 55 criteria.