1.4.1 Use of Color

1. What is the goal of this criterion?

Imagine standing at a traffic light, but instead of red and green you only see two indistinct grey circles. That’s roughly what people with color vision deficiencies experience on the web every day – except here the “traffic lights” are important forms, error messages and navigation elements.

People perceive color very differently: about 8% of men and 0.5% of women of Northern European descent have some form of color vision deficiency. Older people often see colors less clearly, and some use grayscale displays or high-contrast modes, or print pages in black and white.

The goal of Success Criterion 1.4.1 is that information is never conveyed by color alone. If something matters, it needs an additional visual cue alongside the color – so everyone can understand it.

2. What exactly does it require?

Put simply, WCAG 2.2 says: color must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element.

In practice, this means:

Required form fields need an additional symbol (such as an asterisk *) or a text hint, not just a red color.

Error messages must not simply be colored red; they also need icons, borders or clear text.

Links in body text need another distinguishing feature besides their color, for example an underline.

Charts and graphics must convey information through labels, patterns or shapes in addition to color.

Special case: links without underlines. The W3C describes a technique in which the link color has a contrast ratio of at least 3:1 with the surrounding text and the link gets an additional cue, such as an underline, on mouse hover and keyboard focus. The difference in lightness alone isn’t enough – and it only helps when users don’t need to identify a specific color.

Important: the criterion doesn’t ban color. Color can and should support information – it just mustn’t be the only carrier. How much contrast text and controls need on their own is covered by Contrast (Minimum) and Non-text Contrast.

3. Why does it matter for accessibility?

Imagine getting the message “Please correct the fields marked in red” – but you can’t see red. Or you’re asked to tell the green bars from the red ones in a chart, and to you they all look the same.

Visual cues beyond color make content accessible because they:

• Give people with color vision deficiencies access to all information – no matter which colors they can’t tell apart.
• Help older people, who often find it harder to perceive color.
• Support people with cognitive disabilities, since multiple visual cues improve understanding.
• Account for technical limitations – such as black-and-white displays, grayscale mode or poorly calibrated screens.
• Help everyone in difficult situations – bright sunlight, poor lighting or tired eyes.

And finally, they make interfaces more intuitive and robust for everyone, including people without disabilities.

4. How to meet the criterion

The good news: most solutions are technically simple and often improve the design. Here are some proven strategies:

For forms:

• Mark required fields with an asterisk (*) or the word “required” – in addition to color. Explain the asterisk once at the start of the form.
• Give error messages a warning icon and explanatory text, not just a red border.
• Confirm successful actions with a checkmark icon or a text such as “Saved”.

For links and navigation:

• Underline links in body text or highlight them in another non-color way (for example bold text or a border).
• Show button states with borders, icons or text changes, not just a color change.
• Mark the active menu item with an underline, a bar or an icon.

For charts and infographics:

• Use different patterns, line styles or shapes instead of color alone.
• Label data series directly in or next to the relevant areas.
• Add symbols or text to legends.

Technical implementation:

• Use CSS properties such as border, outline, text-decoration or patterns via background-image.
• Embed icons as SVG and give them a text alternative where needed.
• Also expose the state in code, for example with aria-invalid="true" on invalid fields – this helps screen readers but doesn’t replace the visible cue.

Tip: Test your website with a color vision deficiency simulator or switch to grayscale in your developer tools or system settings – everything should still make sense.

5. Why this criterion matters for businesses

Success Criterion 1.4.1 is another example of accessibility paying off in several ways – well beyond inclusion.

1. Reach a wider audience Color-independent design automatically reaches more people: around 8% of men with a color vision deficiency, older audiences and anyone using your content in difficult lighting or on basic displays.

2. Improve usability for everyone Additional visual cues make interfaces clearer and quicker to scan. When forms show what matters through clear icons and text, not just color, everyone benefits – especially people in a hurry.

3. Strengthen your brand Thoughtful, inclusive design looks more professional and trustworthy. Companies that show they think of everyone stand out from the competition.

Last but not least: legal requirements. The European Accessibility Act (Directive (EU) 2019/882) has applied since 28 June 2025 to many consumer products and services, such as online shops and banking services; in Germany it is implemented by the Barrierefreiheitsstärkungsgesetz (BFSG). The technical benchmark is the harmonised standard EN 301 549, which references WCAG 2.1 Level AA for web content – and 1.4.1 is part of that. Public sector bodies are covered by the Web Accessibility Directive (EU) 2016/2102. This section is general information, not legal advice.

6. The success criterion in the W3C’s words

Success Criterion 1.4.1 Use of Color (Level A)

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

Note: This success criterion addresses color perception specifically. Other forms of perception are covered in Guideline 1.3 including programmatic access to color and other visual presentation coding.

In short: color may support information, actions, prompts and distinctions, but it must never be the only visual cue.