Q23 of 24 · Accessibility
How do you test that colour is not the only means of conveying information?
Short answer
Short answer: WCAG 1.4.1 requires any information conveyed by colour to also be available through another channel. Test by converting the UI to greyscale — if you can no longer determine which state is active, which fields have errors, or which items are selected, the criterion fails.
Detail
WCAG success criterion 1.4.1 (Use of Colour, Level A) states: "Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."
The greyscale test: in Chrome DevTools, open the Rendering panel and select "Emulate vision deficiencies → Blurry vision" (or use a greyscale CSS filter: filter: grayscale(100%) applied to the root element). Now evaluate:
- Can you tell which radio button is selected?
- Can you tell which form fields have validation errors?
- Can you distinguish a link from surrounding text without underline?
- Can you read a chart with colour-coded series?
- Can you see which navigation item is the active page?
Common failures:
- Error fields highlighted in red with no icon, border change, or text label — greyscale users see a slightly different shade of grey and may miss the error entirely.
- Active navigation items indicated only by a colour change — no underline, bold, or other non-colour signal.
- Charts and graphs with colour-only data series — a common accessibility failure in dashboards.
- Status indicators using traffic-light colours (green/amber/red) with no text label or icon — critical for users with colour vision deficiency (approximately 8% of males).
The test passes when: any information that can be perceived via colour can also be perceived via shape, pattern, position, text, or icon. An error field with both a red border AND an error icon AND an error text label passes — you have multiple non-colour signals.