Level A
Perceivable
WCAG 2.0+
Success Criterion 1.4.1: Use of Color
Official W3C Definition
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Why This Criterion Matters
Approximately 8% of men and 0.5% of women have some form of color vision deficiency (color blindness). When color is the only way to distinguish elements or convey meaning, these users cannot access that information.
Common color blindness types: Red-green (most common), blue-yellow, and complete color blindness. Users with these conditions may not be able to distinguish between colors that look very different to others.
Who Benefits
Color Blind Users
About 300 million people worldwide have color vision deficiency.
Blind/Low Vision Users
Cannot perceive color-only information at all.
Monochrome Display Users
Some devices or settings display in grayscale.
Print Users
Printed pages may be in black and white.
How to Meet This Criterion
Technique 1: Add Text Labels
Good Example - Color Plus Text
<!-- Good: Color AND text indicate status -->
<span class="status-badge bg-success">
<i class="fas fa-check-circle" aria-hidden="true"></i>
Active
</span>
<span class="status-badge bg-danger">
<i class="fas fa-times-circle" aria-hidden="true"></i>
Inactive
</span>
<!-- Good: Required field with asterisk, not just red -->
<label for="email">
Email Address
<span class="text-danger">*</span>
<span class="visually-hidden">(required)</span>
</label>Technique 2: Add Icons or Patterns
Good Example - Color Plus Icons
<!-- Good: Error messages with icon AND color AND text -->
<div class="alert alert-danger" role="alert">
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
<strong>Error:</strong> Please correct the errors below.
</div>
<!-- Good: Chart with patterns, not just colors -->
<!-- Use stripes, dots, crosshatch patterns in addition to color -->Technique 3: Links Distinguished by More Than Color
Good Example - Links with Underline
<!-- Good: Links have underline AND color -->
<style>
a {
color: #0066cc;
text-decoration: underline;
}
a:hover, a:focus {
text-decoration: none;
outline: 2px solid currentColor;
}
</style>
<p>Visit our <a href="/accessibility">accessibility page</a> for more info.</p>
Bad Examples
<!-- Bad: Only color indicates required fields -->
<label class="text-danger">Email Address</label>
<p class="help-text">Red labels are required.</p>
<!-- Bad: Links only distinguished by color -->
<style>
a { color: blue; text-decoration: none; }
</style>
<!-- Bad: Error state shown only with red border -->
<input type="text" class="border-danger">Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Red text for errors only | Colorblind users may miss errors | Add error icon and descriptive text |
| Green/red for success/failure | Most common color blindness affects red-green | Add checkmark/X icons and text labels |
| Links without underline | Cannot distinguish from regular text | Keep underlines or add other visual cues |
| Color-coded charts/graphs | Data cannot be distinguished | Add patterns, labels, or legends with shapes |
| Form validation with color only | Users don't know what's wrong | Include error messages and icons |
Testing Methods
Simulation Testing
- Grayscale test: View your page in grayscale - can you still understand all information?
- Color blindness simulator: Use tools like Toptal Colorblind Web Page Filter
- Browser extensions: Use NoCoffee or similar extensions to simulate color vision deficiencies
Manual Checklist
- Are required fields indicated by more than just color?
- Do error messages include icons and text, not just red color?
- Are links underlined or otherwise distinguishable from text?
- Do charts and graphs use patterns or labels in addition to color?
- Can form validation states be understood without color perception?
Related Criteria
1.3.3 Sensory Characteristics
Instructions don't rely solely on sensory cues
1.4.3 Contrast (Minimum)
Text has sufficient color contrast