WCAG 2.1 · Level A · Perceivable
WCAG 1.4.1 — Use of Color, explained with examples
Color must not be the only visual means of conveying information, indicating an action, or distinguishing a visual element. 8% of men and 0.5% of women have some form of color vision deficiency. Red-only error states are the most common offender.
- Number
- 1.4.1
- Level
- A
- Principle
- Perceivable
- Guideline
- 1.4 Distinguishable
Why this criterion exists
8% of men and 0.5% of women have some form of color vision deficiency. Red-only error states are the most common offender.
If you only remember one thing: color must not be the only visual means of conveying information, indicating an action, or distinguishing a visual element. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Use of Color affects:
Color-blind users
Low-vision users
Users on monochrome printouts
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
Required-field markers in red only
Form errors only red border, no text
Chart series distinguished only by hue
How to test for it
View the page in greyscale; can you still understand all information?
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
Combine color with text or icon so the message remains clear without color perception.
The problem
<input type="text" style="border-color: red">The fix
<input type="text" aria-invalid="true" aria-describedby="err">
<p id="err" class="text-red-700">⚠ Email is required.</p>Combine color with text or icon so the message remains clear without color perception.
Frequently asked questions
Does a green/red status indicator always fail 1.4.1?
Only if color is the sole difference. A green circle labelled "Active" and a red circle labelled "Inactive" passes — the text label distinguishes the states. A green dot and red dot with no other difference fails. The pattern "color + text + icon" is robust for all users including those with deuteranopia (red-green color blindness, affecting 8% of men).
Do chart series need non-color differentiation?
Yes. A line chart with three series distinguished only by red, green, and blue fails 1.4.1 for color-blind users. Use pattern fills, dashed vs solid lines, or shape markers at data points in addition to color. Label lines directly at the end rather than relying on a color-coded legend alone.
Does 1.4.1 apply to links in body text?
Yes. If links in paragraph text are distinguished from surrounding text only by color (typically blue or purple), they fail 1.4.1. The fix is to add an underline or another non-color indicator. The underline can be removed on hover/focus for a design-forward look, but at rest the link must be identifiable without color perception.
Other Perceivable criteria
1.1.1 Non-text Content
Perceivable · Level A
1.3.1 Info and Relationships
Perceivable · Level A
1.4.3 Contrast (Minimum)
Perceivable · Level AA
1.4.11 Non-text Contrast
Perceivable · Level AA
All WCAG 2.1 criteria
Browse the full index by principle
Complete WCAG 2.1 guide
POUR principles, conformance levels, legal requirements
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.