1.4.1 Use of Color
Level A · added in WCAG 2.0
Color must not be the only visual way you convey information, show an action, prompt a response or tell elements apart. Add a second cue, such as text, an icon, a pattern or an underline.
Who it helps
Among people of Northern European descent, about 1 in 12 men and 1 in 200 women have a color vision deficiency. Many cannot tell red from green. It also helps people with low vision, people using monochrome or high-contrast displays, and anyone reading a screen in bright sunlight.
How to meet it
- Underline links inside paragraphs, or give them a non-color cue such as bold weight, so they stand out from the surrounding text.
- Show form errors with text and an icon, not only a red border.
- Mark required fields with a text indicator, such as "(required)" or an asterisk explained above the form, not only a red label.
- In charts and graphs, add direct labels, patterns or different marker shapes so series can be told apart without color.
- Show the selected state of tabs, filters or toggles with a border, weight change or check mark as well as a color change.
- Check your design in grayscale: if any meaning disappears, add a non-color cue.
Examples
p { color: #333; }
p a {
color: #1a5fb4;
text-decoration: none;
}<label for="email">Email</label>
<input id="email" type="email" style="border-color: #d32f2f">p { color: #333; }
p a {
color: #1a5fb4;
text-decoration: underline;
}<label for="email">Email</label>
<input id="email" type="email" style="border-color: #d32f2f"
aria-invalid="true" aria-describedby="email-err">
<p id="email-err">Error: enter an email address like [email protected].</p>Can a scanner detect this?
Partly
Automated tools can flag links in a text block that differ from nearby text only by color, with less than 3:1 contrast. They cannot judge whether color alone carries meaning in charts, status labels, form errors or selected states, so a person must review those.
axe-core rules that test it
link-in-text-block
Common mistakes
- Removing the underline from links in body text for a cleaner look.
- Using green and red dots alone to show online and offline, or pass and fail.
- Building a line chart where the only difference between series is the line color.
- Assuming that meeting contrast rules also meets this one; two colors can each contrast with the background and still look the same to a color-blind user.
Related criteria
Check your own page
See which automated WCAG checks your page fails, with the failing elements and how to fix them.
Reviewed November 2, 2026