WCAG 1.4.1 — Color Is the Only Visual Means of Conveying Information

Who Is Affected

Approximately 8% of men and 0.5% of women have color vision deficiency (color blindness) — most commonly red-green color blindness (deuteranopia or protanopia). Users with low vision may also have difficulty distinguishing colors. Any information conveyed only through color is inaccessible to these users.

What This Means

Color may be used to enhance communication, but it cannot be the sole means of conveying any information. Every piece of information communicated through color must also be communicated through at least one other means: text, pattern, shape, position, or icon.

Common failures on government websites:

• Required form fields marked only in red — add an asterisk (*) and a visible legend, or the word "required"
• Error states shown only by red border on an input — add an error message in text
• Calendar availability shown only by color — add text labels ("Available" / "Unavailable" / "Limited")
• Chart lines or segments distinguished only by color — add data labels, patterns, or a data table alternative
• Link color as the only distinction from surrounding text — links must also be distinguished by underline or another non-color visual difference
• Status indicators using only color — "green = approved, red = denied" must also use text or icons

Fix: CMS / Theme

For form required field indicators:

<!-- Add both a visual asterisk AND hidden text for screen readers -->
<label for="applicant-name">
  Applicant Name
  <span class="required-marker" aria-hidden="true">*</span>
</label>
<!-- At the top of the form, include: -->
<p>Fields marked with * are required.</p>

For links distinguished only by color: Ensure all links in body text are underlined (the browser default). If your theme removes underlines, re-enable them:

/* Ensure links are underlined in body text */
article a, .content a {
  text-decoration: underline;
}

For charts and data visualizations:

• Add direct data labels to chart elements
• Use patterns in addition to colors for chart fills (hatching, dots, stripes)
• Provide a data table as an alternative to the chart
• Choose color palettes that are distinguishable under common forms of color blindness — test with Coblis

For status indicators (approved/denied, open/closed, available/unavailable): Add text labels or icons in addition to color:

<!-- Instead of a colored dot alone -->
<span class="status-open">● Open</span>
<span class="status-closed">● Closed</span>
<!-- Or use icons -->
<span class="status-open">✓ Open</span>
<span class="status-closed">✗ Closed</span>

Standard Reference

WCAG 2.1 Success Criterion 1.4.1 — Use of Color, Level A

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

• W3C Understanding SC 1.4.1
• WCAG Technique G14 — Ensuring that information conveyed by color differences is also available in text
• WCAG Technique G182 — Ensuring that additional visual cues are available when text color differences are used to convey information
• WCAG Failure F73 — Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision