1.4.1 Use of Color
Level: A | Principle: Perceivable | Since: WCAG 2.0 | Automation: Manual
What This Means
Color must not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Any information communicated through color alone must also be available through another visual indicator — such as text labels, patterns, shapes, underlines, or icons.
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. If your error state is "the field turns red" with no other indicator, those users will not know there is an error.
Who This Affects
- Color-blind users — they cannot distinguish information conveyed solely through color differences
- Low-vision users — reduced color perception makes color-only cues unreliable
- Users of monochrome displays — some e-readers and assistive devices show no color
- Users printing in grayscale — printed pages lose color distinctions
Common Pitfalls
1. Links distinguished only by color
<!-- Bad: links are blue but have no underline or other visual indicator -->
<style>
a { color: blue; text-decoration: none; }
</style>
<p>Read our <a href="/terms">terms of service</a> before signing up.</p>
<!-- Color-blind users cannot distinguish the link from surrounding text -->
2. Form errors indicated only by color
<!-- Bad: only the red border indicates an error -->
<style>
.error { border-color: red; }
</style>
<input type="email" class="error" value="invalid">
<!-- No error message, icon, or other visual cue -->
3. Charts and graphs using color alone
<!-- Bad: pie chart slices distinguished only by color -->
<svg>
<circle fill="red"><!-- Revenue --></circle>
<circle fill="green"><!-- Expenses --></circle>
<circle fill="blue"><!-- Profit --></circle>
</svg>
<!-- No patterns, labels on slices, or other distinguishing marks -->
4. Status indicators using only color
<!-- Bad: green dot for online, red dot for offline -->
<span style="color: green;">●</span> Server Status
<!-- Color-blind users see two identical dots -->
5. Required fields indicated only by color
<!-- Bad: required field labels are red, optional are black -->
<label style="color: red;">Email</label>
<label style="color: black;">Nickname</label>
How to Fix
Add underlines or other visual cues to links
<!-- Good: links have underlines in addition to color -->
<style>
a { color: blue; text-decoration: underline; }
</style>
<p>Read our <a href="/terms">terms of service</a> before signing up.</p>
Add text and icons to error states
<!-- Good: error message and icon supplement the color change -->
<div class="field-group">
<label for="email">Email</label>
<input type="email" id="email" class="error" aria-describedby="email-error" aria-invalid="true">
<p id="email-error" class="error-message">
<svg aria-hidden="true"><!-- warning icon --></svg>
Please enter a valid email address.
</p>
</div>
Use patterns in charts alongside color
<!-- Good: chart slices have both color and distinct patterns -->
<svg>
<circle fill="red" stroke-dasharray="5,5"><!-- Revenue --></circle>
<circle fill="green" stroke-dasharray="10,3"><!-- Expenses --></circle>
<circle fill="blue"><!-- Profit (solid) --></circle>
</svg>
<!-- Also include a text-based legend or direct labels -->
Add text labels to status indicators
<!-- Good: text label supplements the color dot -->
<span style="color: green;" aria-hidden="true">●</span> Online
<span style="color: red;" aria-hidden="true">●</span> Offline
Mark required fields with text indicators
<!-- Good: asterisk and text supplement color -->
<label for="email">Email <span aria-hidden="true">*</span><span class="sr-only">(required)</span></label>
<input type="email" id="email" required>
<p class="form-note">Fields marked with * are required.</p>
How to Test
- View the page in grayscale (macOS: System Settings > Accessibility > Display > Color Filters > Grayscale; or use a browser extension).
- Check that all information previously conveyed by color alone is still distinguishable (links, error states, required fields, chart segments, status indicators).
- Verify links within text blocks have a non-color indicator like an underline, bold weight, or icon.
- Check form error states for text-based error messages and icons in addition to color changes.
- Inspect charts and graphs for patterns, labels, or other non-color distinguishing marks.
- Pass: All information is perceivable in grayscale; links, errors, and status indicators have non-color visual cues.
- Fail: Any information is lost in grayscale, links are indistinguishable from surrounding text, or errors rely solely on a color change.
axe-core Rules
| Rule | What It Checks |
|------|---------------|
| link-in-text-block | Links within a block of text must be distinguishable from surrounding text by means other than color alone (e.g., underline, bold, outline) |
Tools
Test this criterion with the Color Blindness Simulator.