Level AWCAG 2.0

1.4.1 Use of Color

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

Last reviewed: September 9, 2026

Understanding 1.4.1

This criterion exists so that people who cannot perceive color differences, including users with color vision deficiencies (affecting roughly 1 in 12 men and 1 in 200 women), low vision, or those viewing content on a grayscale or low-quality display, are not excluded from understanding content or completing tasks. When color is the sole carrier of meaning, anyone who cannot distinguish that color loses access to the information entirely.

How to Meet It

Pair every color-coded cue with a redundant, non-color indicator: use icons, text labels, underlines, patterns, or shape changes alongside color. For form errors, add an icon and descriptive text rather than just a red border. For charts and graphs, use distinct patterns or direct data labels in addition to a color legend. For links within body text, add an underline or other non-color styling so links remain distinguishable from surrounding text without relying on color alone.

Code Examples

INCORRECT

<label for="email">Email</label>
<input id="email" type="text" style="border: 2px solid red;">
<!-- Error state is indicated only by the red border color -->

CORRECT

<label for="email">Email</label>
<input id="email" type="text" style="border: 2px solid #b00020;" aria-describedby="email-error">
<p id="email-error"><strong>Error:</strong> Please enter a valid email address.</p>

Frequently Asked Questions

Does this mean color can't be used in error messages or charts at all?

No, color can still be used; it just cannot be the only signal. Red text for an error is fine as long as it is also accompanied by an icon, a text label like "Error:", or a change in border style, so the meaning survives even in grayscale.

Does this criterion apply to link color?

Yes. If links are distinguished from surrounding text only by color, users with color vision deficiencies may not identify them as links. WCAG technique G183 recommends an underline, or a 3:1 contrast difference plus a non-color indicator on hover/focus.

Related Success Criteria

1.4.2 Audio Control 1.4.3 Contrast (Minimum)1.4.4 Resize Text 1.4.5 Images of Text

Quick Facts

Criterion1.4.1
LevelA
IntroducedWCAG 2.0

Automate Compliance

AccessiSight automatically scans and identifies 1.4.1 issues in your codebase.

Try Scanner Free