WCAG 1.4.1 - Use of Color

Table of Contents

In this WCAG Fix It guide, we’re looking at a common accessibility issue: relying on colour alone to communicate meaning.

Colour can be a powerful design tool but if colour is the only way information is conveyed, many users may miss that information completely. Fixing this often requires small design adjustments rather than major redesign.

What Is WCAG 1.4.1?

WCAG 1.4.1 – Use of Color requires that colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. In simple terms, Users must be able to understand information even if they cannot perceive colour differences.

This requirement supports users who are:

Colour blind
Using monochrome displays
Using high contrast settings
Viewing screens in poor lighting conditions

Information must be communicated using more than colour alone.

Why Color Alone Causes Problems

Roughly 1 in 12 men and 1 in 200 women have some form of colour vision deficiency.

Common types include:

Red-green colour blindness
Blue-yellow colour blindness
Reduced colour sensitivity

If a website relies solely on colour differences to communicate meaning, those users may not be able to distinguish important information.

For example:

Links that are only blue with no underline
Form errors shown only in red
Charts that rely only on colour differences

Without additional indicators, these cues disappear.

The Human Impact of Color-Only Communication

Imagine completing an online form and one field is highlighted in red, but the form doesn’t explain what went wrong. If you have colour vision deficiency, you may not even notice the red highlight.

You don’t know:

Which field has the error
What needs fixing
Why the form won’t submit

Or imagine reading a chart where categories are only separated by colour. Without labels or patterns, the chart becomes impossible to interpret. Colour alone cannot carry meaning. Information must always be reinforced through additional cues.

Common WCAG 1.4.1 Failures

Here’s what we typically see when scanning websites:

Links distinguished only by colour
Form errors highlighted only in red
Required fields marked only by colour
Charts and graphs relying solely on colour differences
Buttons that change colour without other indicators
Navigation elements using colour to show state

All of these can fail WCAG 1.4.1.

How to Fix Color-Only Communication

Here are a few different strategies to help you fix color-only communication issues:

Add Text or Icons to Reinforce Meaning

Instead of using colour alone, add clear indicators.

Bad example: A form field outlined in red.

Better example:

Red outline
Error message text
Error icon

Underline Links

Links should be visually distinguishable without relying only on colour.

Bad: Blue text links with no underline.

Better: a { text-decoration: underline; }

Underlining links ensures users can identify them even if colour differences are unclear.

Label Required Fields Clearly

Instead of marking required fields only in red, use text indicators.

Example:

Email Address *

* Required field

Or clearly state in the label:

Email Address (Required)

Improve Charts and Visualisations

Charts should use more than colour differences.

Add:

Labels
Patterns or textures
Legends
Data labels

This ensures the information remains understandable.

If You’re Using a CMS or Website Builder

Colour issues often appear when:

Themes rely on subtle colour differences
Designers remove link underlines
Form validation uses colour only
Charts use default colour palettes

To fix:

Adjust link styling
Add text instructions
Update chart labels
Review form validation feedback

Accessibility should be built into the design system.

How to Test WCAG 1.4.1

After making updates:

Re-run your accessibility scan
View your page in grayscale mode
Use colour blindness simulation tools
Check links, errors, and visual indicators

Ask:

Is information still clear without colour?
Are links identifiable without colour alone?
Are form errors explained clearly?

If yes, you’ve fixed it.

Why WCAG 1.4.1 Matters Beyond Compliance

Avoiding colour-only communication:

Improves readability
Improves usability
Supports colour blind users
Improves mobile visibility
Improves design clarity
Reduces legal risk

Accessible design is not about removing colour. It’s about making sure colour is not the only signal, and good design communicates through multiple cues.

WCAG 1.4.1 Quick Fix Checklist

If you want to make your website WCAG 1.4.1 compliant, use this checklist:

Information is not conveyed using colour alone
Links are identifiable without colour only
Form errors include text explanations
Required fields are clearly labelled
Charts use labels or patterns in addition to colour
Visual indicators tested without colour
Issues re-tested after updates