WCAG 1.4.1Use of Color

Color-only Information

What is this issue?

Color-only information refers to content where color is the sole visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. WCAG Success Criterion 1.4.1 (Level A) requires that color is not used as the only visual means of conveying information. A secondary visual cue -- such as text, icons, patterns, or shape -- must always accompany color.

Common examples include: links that are only distinguished from surrounding text by color (no underline), required form fields marked only with a red label, status indicators that use green for success and red for error without any text or icon, chart legends that rely solely on color to distinguish data series, and error states indicated only by changing a border from gray to red.

This issue is fundamentally about redundancy. Color can and should be used to reinforce information, but it must not be the only channel. Users who cannot perceive color differences -- due to color blindness, monochrome displays, high contrast mode, or simply printing the page in grayscale -- must still be able to access the same information.

Impact on users

Approximately 300 million people worldwide have color vision deficiency (color blindness). The most common form, red-green color blindness, affects about 8% of men. For these users, a red error border on a form field looks identical to a green success border. Required fields marked only in red are indistinguishable from optional fields. Status badges that use only green/yellow/red are meaningless.

Users with low vision who use high contrast modes or custom color schemes also lose color-based information. Windows High Contrast mode, for example, overrides page colors entirely, stripping away any color-only visual cues.

Even users with typical color vision can be affected in certain contexts: projected presentations wash out colors, poor display calibration shifts hues, and ambient lighting can make similar colors indistinguishable. Using redundant visual indicators ensures the information reaches everyone regardless of conditions.

Code example

Before (non-compliant)
<!-- Links distinguished only by color -->
<p>Visit our <a href="/pricing"
  style="color: blue; text-decoration: none;">
  pricing page</a> for details.</p>

<!-- Required fields marked only by red -->
<label style="color: red;">Email</label>
<input type="email">

<!-- Status using color only -->
<span style="color: green;">Active</span>
<span style="color: red;">Inactive</span>

<!-- Chart with color-only legend -->
<div class="legend">
  <span style="color: #ff6384;">Revenue</span>
  <span style="color: #36a2eb;">Expenses</span>
</div>
After (compliant)
<!-- Links with underline + color -->
<p>Visit our <a href="/pricing"
  style="color: blue; text-decoration: underline;">
  pricing page</a> for details.</p>

<!-- Required fields with text indicator -->
<label>Email <span aria-hidden="true">*</span>
  <span class="sr-only">(required)</span></label>
<input type="email" required aria-required="true">

<!-- Status with icon + text + color -->
<span style="color: green;">&#10003; Active</span>
<span style="color: red;">&#10007; Inactive</span>

<!-- Chart with pattern + color legend -->
<div class="legend">
  <span style="color: #ff6384;">&#9632; Revenue</span>
  <span style="color: #36a2eb;">&#9650; Expenses</span>
</div>

How Scrutia detects this issue

Scrutia identifies elements where color is the sole differentiating visual cue. It detects links without underlines or other non-color distinction, form fields marked as required only by label color, status indicators using only color, and chart elements without patterns or labels. Each finding includes the element location and a recommendation for adding a redundant non-color indicator.

Check your site for this issue

Scrutia audits your site against WCAG criteria in minutes.

Free audit

Frequently Asked Questions

Can I still use color to convey information?
Yes. WCAG 1.4.1 does not prohibit using color -- it requires that color is not the only means. Use color to reinforce information, but always pair it with text, icons, patterns, or other visual indicators that do not depend on color perception.
Do links need underlines?
If links are distinguished from surrounding text only by color, they fail WCAG 1.4.1 unless the contrast ratio between link and body text is at least 3:1 AND the link has a non-color indicator on hover/focus (like an underline). The simplest solution is to keep links underlined.
How do I make charts accessible to color-blind users?
Use different patterns, shapes, or direct labels in addition to different colors. For line charts, vary line styles (solid, dashed, dotted). For bar charts, use patterns or direct value labels. Always include a text-based data table as an alternative.

Does your site have this issue?

Scrutia scans your pages against WCAG success criteria and delivers actionable fixes. Results in 5 minutes.

Run a free audit