Perceivable · 1.4 Distinguishable
Color must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element. Color can still be used, as long as text, a pattern, an icon or an underline carries the same meaning.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Turn on the grayscale, protanopia or deuteranopia filter, then try to answer the question in each version.
In which month were there more orders in store than online?
In which month were there more orders in store than online?
The tools follow the version you last used.
What happened
Why it passes
The in-store bars have stripes, in the chart and in the key, so you can tell the two series apart in grayscale or with red-green color blindness.
Why it fails
The two series differ only in red and green of the same lightness. In grayscale or with red-green color blindness they look the same, so you cannot tell which bar is online and which is in store.
Examples
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
+ (required)
Fails
Live preview
<label for="email" style="color: #c62828">Email</label><input id="email" name="email" type="email" required><label for="phone">Phone</label><input id="phone" name="phone" type="tel">Only the red label color shows that Email is required, so people who cannot tell red from dark text miss it. The required attribute helps screen readers, not sighted users.
Passes
Live preview
<label for="email" style="color: #c62828">Email (required)</label><input id="email" name="email" type="email" required><label for="phone">Phone</label><input id="phone" name="phone" type="tel">The word "required" carries the meaning without color, so the red is only extra emphasis (technique G14).
− none + underline
Fails
Live preview
p { color: #333333; }p a { color: #2a6db0; text-decoration: none; }The link blue is only 2.35:1 against the #333333 body text and has no underline, so many people cannot see which words are links.
Passes
Live preview
p { color: #333333; }p a { color: #2a6db0; text-decoration: underline; }The underline marks each link without relying on color. The link color still has 5.37:1 contrast with a white background.
Passes
Live preview
p { color: #000000; }p a { color: #2a6db0; text-decoration: none; }p a:hover,p a:focus { text-decoration: underline; }Links without an underline need 3:1 contrast with the surrounding text and a non-color cue on hover and focus. #2a6db0 is 3.91:1 against black text and 5.37:1 against white (technique G183).
Why it matters
People with color vision deficiencies, low vision or monochrome displays may not see color differences, so a second cue gives them the same information.
W3C: Understanding 1.4.1Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures