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
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
Example message:
“Email address is required.”
This ensures the issue is clear to all users.
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
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
WCAG 1.4.1 Use of Color Frequently Asked Questions
What is WCAG 1.4.1 Use of Color?
WCAG 1.4.1 requires that colour is not the only method used to convey information or indicate actions on a webpage.
Why can’t colour alone be used?
Users with colour vision deficiencies may not be able to distinguish colour differences, which can cause them to miss important information.
Do links need to be underlined?
Links must be distinguishable without relying only on colour. Underlining links is one common and effective solution.
Does this apply to charts and graphs?
Yes. Charts and graphs should use labels, patterns, or other visual indicators so data is understandable without relying solely on colour.