Goal
Make sure meaning is not conveyed by color alone.
Success Criterion · WCAG 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.
Level AWCAG 2.0Perceivable1.4 · Distinguishable
Copy button ready
What to do
When you use color to communicate something (errors, required fields, statuses), add a non-color cue like text, icons, patterns, or underline.
Why it matters
People who cannot perceive color differences still need to understand instructions, status, and required actions.
Success criterion
What WCAG 1.4.1 requires
Summarized directly from the official Understanding document so teams can quote the requirement accurately.
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Intent
Why WCAG created this requirement
- Color can enhance understanding, but it must not be the only mechanism that communicates meaning.
- Non-color cues ensure people with color vision deficiencies and some low vision users can still complete tasks.
- This applies to text, charts, form validation, status indicators, and interactive affordances (like links).
Benefits
Who gains when you pass
- People with color vision deficiencies can identify errors, required fields, and selected states without guessing.
- Low vision users who use high contrast settings or custom themes can still understand the interface.
- Screen magnifier users who see only part of the screen at a time can rely on explicit labels and icons.
- Users in poor lighting or glare conditions benefit from redundant cues beyond color.
Why it matters
User impact when this criterion fails
Summaries drawn from the Understanding document help you socialize impact statements with product stakeholders.
Users may miss form errors if they are only indicated by a red border.
Charts that rely only on color become unreadable to people who cannot distinguish the series.
Users may not discover links if they are distinguished only by color without an underline or other cue.
Overview
If color is used to indicate meaning—like “required fields are red,” “errors are red,” or “selected items are green”—there must also be another way to perceive the same information. Provide text, icons, patterns, positioning, or other visual indicators that do not depend on color perception.
- For errors: use text like “Error: …” and/or an icon plus `aria-invalid` and `aria-describedby`.
- For required fields: use “(required)” text, an asterisk with a legend, or both.
- For links in body text: underline (or other strong cue) in addition to color.
- For charts: add labels, patterns, markers, or direct annotations; don’t rely only on legend colors.
- For status: combine color with text (Success/Warning/Error) or iconography and headings.
Reference: All summaries and highlights originate from Understanding WCAG 1.4.1 and the W3C quick reference.
Fast facts
- Conformance level
- Level A
- WCAG version introduced
- WCAG 2.0
- Principle
- Perceivable
- Guideline
- 1.4 · Distinguishable
Examples
Make success tangible for teams
Share pass/fail snapshots to coach designers, engineers, QA, and content authors.
Form error
Pass
Field shows red border AND an inline message “Error: Email is required” associated via `aria-describedby`.
Fail
Field shows only a red border with no text or icon.
Body link
Pass
Links are blue and underlined (or otherwise clearly styled) in body text.
Fail
Links are only a different color with no underline or other cue.
Chart series
Pass
Each series uses a distinct marker shape/pattern plus a labeled legend.
Fail
Series differ only by color.
Evidence to keep
Document conformance decisions
Capture artifacts for VPATs, procurement reviews, and regression testing.
- Capture screenshots of key states (error/success/selected) showing redundant cues beyond color.
- Document chart patterns/markers and label strategies used for multi-series graphics.
- Define a standard for required field indicators and link styling in the design system.
Official resources
Deep dives and supporting material
Keep these links handy when writing acceptance criteria or responding to audits.
Understanding 1.4.1
Official W3C interpretation, techniques, and intent for Use of Color.
Quick Reference 1.4.1
Filterable list of sufficient techniques and failures.
Technique G14
Ensuring information conveyed by color is also available without color.
Technique G111
Using color and pattern to identify items.
Failure F13
Failure due to relying on color to communicate information.
Implementation checklist
Capture progress and blockers
- Audit UI for color-only meaning: required fields, errors, selected states, active tabs, charts, and legends.
- Add non-color cues: icons with labels, text badges, patterns, and/or underline links.
- Ensure validation messages are adjacent and programmatically associated with inputs.
- For charts, add labels or patterns and ensure data is available in text or table form when needed.
- Verify states (hover/focus/active/disabled) remain distinguishable without color alone.
- Include this requirement in design tokens and component guidelines.
Testing ideas
Prove conformance with evidence
- View the page in grayscale and verify meaning is still conveyed.
- Test with a color blindness simulator for common deficiencies (protanopia/deuteranopia/tritanopia).
- Use a screen reader on forms and confirm errors/required states are announced and discoverable.
- Review charts/graphs to ensure series can be distinguished without color alone.
- Check body-text links: ensure there is a non-color affordance (underline, bold + icon, etc.).
Related success criteria
More from Distinguishable (1.4)
WCAG 1.4.2Audio ControlLevel AWCAG 1.4.3Contrast (Minimum)Level AAWCAG 1.4.4Resize TextLevel AAWCAG 1.4.5Images of TextLevel AAWCAG 1.4.6Contrast (Enhanced)Level AAAWCAG 1.4.7Low or No Background AudioLevel AAAWCAG 1.4.8Visual PresentationLevel AAAWCAG 1.4.9Images of Text (No Exception)Level AAAWCAG 1.4.10ReflowLevel AAWCAG 1.4.11Non-text ContrastLevel AAWCAG 1.4.12Text SpacingLevel AAWCAG 1.4.13Content on Hover or FocusLevel AA