Color Blindness
Conveying information beyond color alone
Color blindness affects approximately 8% of men and 0.5% of women. Content that relies on color alone to convey meaning excludes these users.
The core rule
Color must never be the only means of conveying information. Any information communicated through color must also be communicated through text, pattern, shape, or another non-color cue.
Common failures
- Required form fields marked only by a red border
- Charts where data series are distinguished only by color
- Status indicators using only green/red with no text or icon
- Links distinguished from text only by color with no underline
Best practice
<!-- Wrong: color only -->
<label style="color: red;">Email address</label>
<!-- Right: color + text indicator -->
<label>Email address <span class="sr-only">(required)</span> *</label>The asterisk and the visually hidden "(required)" text communicate the same information as the color, so users who cannot distinguish red from surrounding text still understand the field is required.
Links in body text
Links distinguished from surrounding text only by color fail WCAG 1.4.1 unless the contrast ratio between link and text colors is at least 3:1. The simplest fix is to keep the default underline - it provides a non-color visual distinction that works for all users.