WCAG 1.4.1: Use of Color
Color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Additional cues like text, patterns, or icons must supplement color-based information.
What is WCAG 1.4.1 Use of Color?
WCAG 1.4.1 Use of Color is a Level A web accessibility success criterion under the Perceivable principle. Color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Additional cues like text, patterns, or icons must supplement color-based information. Common failures include using only red text to indicate form errors without icons or error messages and links that are the same font size/weight as surrounding text and only differ by color. Meeting this criterion is essential for accessible, inclusive web design.
How to Test
- ✓ Check form error messages are not indicated by color alone
- ✓ Verify link text is distinguishable from body text by more than just color (underline, bold, icon)
- ✓ Ensure chart data uses patterns or labels in addition to colors
- ✓ Check that required form fields are indicated by more than a red asterisk
- ✓ View the page in grayscale to test if information is lost
Common Failures
- ✗ Using only red text to indicate form errors without icons or error messages
- ✗ Links that are the same font size/weight as surrounding text and only differ by color
- ✗ Charts and graphs that rely solely on color to distinguish data series
- ✗ Status indicators (green = good, red = bad) without text labels
- ✗ Required fields marked only with color
✓ Good Example
<!-- Error with icon + color + text --> <div role="alert" style="color: #dc2626;"> <svg aria-hidden="true"><!-- error icon --></svg> <strong>Error:</strong> Email address is required. </div> <!-- Link with underline --> <p>Read our <a href="/terms" style="color: #2563eb; text-decoration: underline;">terms of service</a>.</p>
The error message uses color, an icon, and explicit text. The link uses both color and underline decoration to be distinguishable from body text.
✗ Bad Example
<!-- Error indicated only by color --> <input style="border-color: red;" type="email"> <!-- Link not distinguishable --> <p>Read our <a href="/terms" style="color: #2563eb; text-decoration: none;">terms of service</a>.</p>
The error is only indicated by the red border color. The link has no underline and is indistinguishable from body text for users who cannot perceive color differences.
Test Your Site for 1.4.1 Compliance
Use our free accessibility tools to check your website against WCAG 1.4.1.
Open Testing Tool