WCAG 2.2 - Success Criterion
1.4.1 Use of Color
Description
Color must not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Users who are colorblind or who use high contrast modes or monochrome displays may not be able to perceive color differences, so any information conveyed through color must also be conveyed through another visual means such as text, pattern, shape, or position.
How To Test
- Identify all instances where color is used to convey information, indicate an action, prompt a response, or distinguish elements.
- For each instance, determine whether the same information is also conveyed by a non-color visual means (text, icon, shape, pattern, underline, etc.).
- Use a grayscale filter or browser extension to view the page without color and verify all information is still perceivable.
- Test with a color blindness simulation tool to check readability for common types such as deuteranopia and protanopia.
- Review form validation states, charts, graphs, status indicators, and inline links as common areas of failure.
- Check navigation and interactive elements to ensure their state (active, selected, required) is not conveyed by color alone.
Testing Tools
- Color Contrast Analyser (CCA) — Free desktop app. Download from GitHub, install, use the eyedropper tool to measure contrast ratios on the demo. Read the ratio value and compare to AA (4.5:1) or AAA (7:1) standards.
- Lighthouse — Built into Chrome DevTools. Open DevTools (F12), go to Lighthouse tab, select "Accessibility", and run the audit. Review contrast violations and pass criteria in the results.
- axe DevTools — Browser extension for Chrome/Firefox. Install from official page, open DevTools, go to axe tab, run scan, and see detailed contrast violations with remediation advice.
Demo 1: Form field requirement indicators
Required fields are shown only by changing the label color to red. Users who cannot distinguish color have no way to know which fields are mandatory.
Required fields are marked with an asterisk * and a visible legend - two distinct cues, not color alone.
Code
Code
Demo 2: Links in paragraph text
Links are distinguished only by color. A user with color blindness cannot tell which text is clickable and which is regular text.
Accessible web design requires attention to multiple factors. For more information about color blindness, visit our color accessibility guide. You can also learn about testing methods to ensure your designs work for everyone. Check out our case studies to see real-world examples of inclusive design in action.
Links are distinguished by both color and underline. All users can identify clickable text regardless of color perception.
Accessible web design requires attention to multiple factors. For more information about color blindness, visit our color accessibility guide. You can also learn about testing methods to ensure your designs work for everyone. Check out our case studies to see real-world examples of inclusive design in action.
Code
Code
Demo 3: Data visualization with color-only legend
The legend has labels, but color is the only way to match them to the lines. A colorblind user cannot tell which line is Revenue and which is Expenses.
Color and line style both differentiate the series. The dashed line is distinguishable from the solid line even without color perception.
Code
Code
WCAG Techniques
- Failures: F81 (color used as only visual means to convey information)
- Success Techniques: G14 (ensuring information conveyed through color is also conveyed through other visual means), H51 (using semantic HTML for form labels)
Fail Explanation
A failure occurs when color is the sole indicator used to communicate important information. Common examples include form fields outlined in red to indicate an error with no error text or icon, charts that use colored lines to distinguish data series with no legend labels or patterns, and links that are distinguished from surrounding text only by color with no underline or other non-color indicator. Users with red-green color blindness, the most common form, would be unable to distinguish these elements.
Pass Explanation
A passing implementation ensures that any information communicated through color is also communicated through at least one other visual means. Error fields are marked with both a red border and an error icon or text message. Chart data series are distinguished by both color and pattern or labeled directly. Links in body text are underlined or bold in addition to being a different color. When color is used decoratively and conveys no information, no additional indicator is needed.
Notes
This criterion does not prohibit the use of color; it only requires that color not be the only means of conveying information. It is important to note that contrast ratio requirements are covered under SC 1.4.3, not this criterion - 1.4.1 is specifically about redundancy of information, not color luminance.
Techniques
WCAG techniques used in this demo: G14, G85, G195
Suggested Solutions & References
Curated from 14 real-world audit findings and official WCAG guidance.