WCAG 1.4.1: How to Fix Color-only Information Failures

Last updated: 2026-03-22

Level A Perceivable WCAG 1.4.1

What This Criterion Requires

WCAG 1.4.1 requires that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. This does not mean you cannot use color -- it means that wherever color communicates something meaningful, there must also be a non-color indicator such as text labels, patterns, icons, underlines, or shape differences. Common violations include links that are distinguished from surrounding text only by color with no underline or other visual distinction, form fields where errors are indicated only by a red border, required fields marked only with color, charts and graphs where data series are differentiated solely by color, and status indicators that use only green, yellow, and red dots. An estimated 300 million people worldwide have some form of color vision deficiency, meaning they may not be able to distinguish the colors you have chosen. Even users with normal color vision may encounter situations where color differences are obscured by screen glare, low-quality displays, or printed materials.

Why It Matters

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. The most common type, red-green color blindness, makes it difficult or impossible to distinguish red from green, which are the exact colors most frequently used for error and success states in web interfaces. Users who are completely color blind see only shades of gray and cannot perceive any color-based information. Beyond color vision deficiency, users who are blind and use screen readers receive no color information at all. Users viewing content on monochrome displays, in high-contrast mode, or in printed grayscale also lose color information. When color is the sole indicator of meaning, all these users miss critical information: they cannot tell which fields have errors, which items are selected, which links are clickable, or which data points belong to which series in a chart. Adding a redundant non-color indicator ensures everyone can access the information regardless of their ability to perceive color.

Common Failures and How to Fix Them

Links distinguished from body text only by color

Hyperlinks within body text are styled with a different color but no underline, font weight change, or other visual indicator. Users with color vision deficiency cannot distinguish links from surrounding text.

Inaccessible 
<style>
  a { color: #0066cc; text-decoration: none; }
</style>
<p>Read our accessibility guide for more information about WCAG compliance.</p>
Accessible 
<style>
  a {
    color: #0066cc;
    text-decoration: underline;
  }
  a:hover, a:focus {
    text-decoration: underline;
    outline: 2px solid #0066cc;
  }
</style>
<p>Read our <a href="/guide">accessibility guide</a> for more information about WCAG compliance.</p>

Required form fields indicated only by color

Required fields in a form are marked with a red label or red asterisk where the red color is the only visual cue. Users who cannot see the red color cannot tell which fields are required.

Inaccessible 
<style>
  .required-label { color: red; }
</style>
<p>Fields in red are required.</p>
<label class="required-label" for="name">Full Name</label>
<input type="text" id="name">
Accessible 
<p>Fields marked with <span aria-hidden="true">*</span> (asterisk) are required.</p>
<label for="name">Full Name <span aria-hidden="true">*</span><span class="sr-only">(required)</span></label>
<input type="text" id="name" required aria-required="true">

Status indicators using only colored dots

A dashboard uses colored circles (green, yellow, red) to indicate status without any text label or icon to convey the meaning. Color-blind users cannot distinguish between statuses.

Inaccessible 
<ul class="status-list">
  <li><span class="dot green"></span> Server A</li>
  <li><span class="dot red"></span> Server B</li>
  <li><span class="dot yellow"></span> Server C</li>
</ul>
Accessible 
<ul class="status-list">
  <li><span class="dot green" aria-hidden="true"></span> Server A: <span class="status-text">Online</span></li>
  <li><span class="dot red" aria-hidden="true"></span> Server B: <span class="status-text">Offline</span></li>
  <li><span class="dot yellow" aria-hidden="true"></span> Server C: <span class="status-text">Degraded</span></li>
</ul>

How to Test

  1. View the page with a color blindness simulator (browser extensions like NoCoffee or built-in Chrome DevTools color vision emulation) and check that all information is still understandable.
  2. Print the page in grayscale or apply a grayscale CSS filter and verify that links, errors, required fields, and status indicators are still distinguishable.
  3. Check that links within body text have a non-color visual indicator such as underline, bold, or an icon in addition to a color difference.
  4. Inspect charts, graphs, and data visualizations to ensure data series are distinguished by patterns, labels, or shapes in addition to color.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria