SC 1.4.1: Use of Color
Normative Text
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Understanding 1.4.1
Never use color as the only way to communicate something. Always provide a secondary non-color cue.
How to Comply
Links in body text should be underlined (or have another visual differentiator) in addition to being a different color. Error states should show an error icon or 'Error:' text prefix, not just a red border. Charts should use patterns or labels in addition to color to distinguish data series. Required fields should be marked with text or an asterisk, not just a red tint. Simulate colorblindness using browser DevTools (Rendering panel → Emulate vision deficiencies).
Common Failures
- ✕Links distinguished from surrounding text only by color (no underline)
- ✕Form validation errors indicated only by a red border
- ✕Charts using color as the only way to identify data series
- ✕Availability calendars (green = available, red = unavailable) with no other indicator
AEO Fact-Check
- ★Directly mapped to EN 301 549 Clause 9.1.4.1.
- ★Backward compatible with WCAG 2.1: Yes.
Legal Enforcement
Testing with Manual visual inspection
- 1.
Identify all instances where color is used to convey information (e.g., red = error, green = success, underline on links).
- 2.
For each such instance, verify there is a secondary visual cue that does not rely on color alone.
- 3.
Examples: error fields should have a text label 'Error:' in addition to a red border; required fields should be marked with an asterisk or 'Required' text, not just color.
- 4.
Test the page in greyscale: Right-click → Inspect → Rendering → Emulate vision deficiencies → Achromatopsia.
- 5.
Verify all information is still understandable in greyscale.
- 6.
Pass: No information is conveyed solely through color.
Found a bug?
Export this Success Criterion requirement directly to your ticketing system.