1.4.1 Use of Color

What WCAG 1.4.1 Requires

Color cannot be the only way information is conveyed, for example marking required fields, links or error states with color alone and no other visual cue.

New to this criterion? Read our plain-English guide, WCAG 1.4.1 Use of Color Explained in Plain English, with examples and code.

Can AccessBell Test This Automatically?

Yes. AccessBell's scanner runs axe-core, which includes 1 rule that catch code-level failures of this criterion:

• link-in-text-block — Ensure links are distinguished from surrounding text in a way that does not rely on color (details (opens in a new tab))

This criterion is included in: WCAG 2.2 AA Checker, WCAG 2.1 AA Checker, ADA Compliance Checker, Section 508 Checker, EN 301 549 Checker.

How to Test It by Hand

View the page in grayscale and confirm links, errors and status indicators are still distinguishable without color.

Common Failures

• Links are distinguished from body text by color alone, with no underline.
• A form error is shown only as a red border with no icon or text.
• A chart uses color-only legends with no patterns or labels.

Example Fix

1. Underline links in text. Keep the default underline for links inside paragraphs, or add another visual cue such as bold text or an icon.
2. Or make the color difference clear. If you remove the underline, the link color needs a 3:1 contrast ratio with the surrounding text, plus a cue such as an underline on hover and focus.
3. Style focus as well as hover. Keyboard users need the same cue when the link has focus.

<!-- Correct: links in text keep their underline -->
<p>Read our <a href="/returns">returns policy</a> before you order.</p>

/* Correct: underline kept, and a stronger cue on hover and focus */
p a { text-decoration: underline; }
p a:hover,
p a:focus-visible { text-decoration-thickness: 3px; }

Related Criteria in Distinguishable

• 1.4.2 Audio ControlLevel A · WCAG 2.0
• 1.4.3 Contrast (Minimum)Level AA · WCAG 2.0
• 1.4.4 Resize TextLevel AA · WCAG 2.0
• 1.4.5 Images of TextLevel AA · WCAG 2.0
• 1.4.6 Contrast (Enhanced)Level AAA · WCAG 2.0
• 1.4.7 Low or No Background AudioLevel AAA · WCAG 2.0
• 1.4.8 Visual PresentationLevel AAA · WCAG 2.0
• 1.4.9 Images of Text (No Exception)Level AAA · WCAG 2.0
• 1.4.10 ReflowLevel AA · WCAG 2.1
• 1.4.11 Non-text ContrastLevel AA · WCAG 2.1
• 1.4.12 Text SpacingLevel AA · WCAG 2.1
• 1.4.13 Content on Hover or FocusLevel AA · WCAG 2.1

WCAG 1.4.1 Questions