Skip to main content
WCAG 1.4.1 Use of Color
This page demonstrates how to properly convey information without relying solely on color.
- Goal: Color is not the only way of distinguishing information.
- What to do: Use information in addition to color, such as shape or text, to convey meaning.
- Why it's important: Not everyone sees colors or sees them the same way.
Links and Interactive Elements
Bad Example: Color-Only Links
Here is some text with a color-only link that relies solely on color to indicate it's clickable.
Why this fails: Links are only distinguished by color, making them difficult to identify for colorblind users or when printed in black and white.
Good Example: Links with Multiple Indicators
Here is some text with a properly styled link that uses both color and underline.
Why this works: Links are identified by both color and underline, providing multiple visual cues.
Status Indicators
Bad Example: Color-Only Status
Operation Successful
Operation Failed
Why this fails: Status is indicated only by background color.
Good Example: Status with Icons and Patterns
Operation Successful
Operation Failed
Why this works: Status is indicated by color, icons, and text.
Form Validation
Bad Example: Color-Only Validation
Why this fails: Invalid state is shown only through red border color.
Good Example: Multi-Indicator Validation
Why this works: Invalid state is shown through color, icon, and text message.
Charts and Graphs
Bad Example: Color-Only Chart
Why this fails: Data is represented only through color-filled bars.
Good Example: Chart with Patterns
Why this works: Data is represented through color, patterns, and text labels.
Best Practices Summary
- Always provide multiple visual indicators beyond just color
- Use patterns, icons, or textures to supplement color information
- Include clear text labels and descriptions
- Ensure sufficient color contrast for text and important elements
- Test your design in grayscale to verify information is still clear