Agent Wranglers

AXS-4Required

Never use colour as the only signal

Never show meaning by colour alone, such as red for an error or a coloured line in a chart. Add text, an icon, a pattern or an underline. This is WCAG criterion 1.4.1 (A).

By Agent Wranglers. Updated .

How to do it

Pair every colour cue with a second one. Mark errors with a word and an icon, required fields with text, and chart lines with labels or patterns. Underline links inside text.

Examples

HTML example

<!-- Bad: only the red border says something is wrong -->
<input class="error" id="phone">
<!-- Good: a word and an icon say it too -->
<input id="phone" aria-invalid="true" aria-describedby="phone-error">
<p id="phone-error"><span aria-hidden="true">⚠</span> Enter a phone number with the country code.</p>

How to check

axe link-in-text-block passes. A browser test takes greyscale screenshots of error, required and chart states, and each still shows a word, icon or pattern.

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/accessibility/seeing-and-reading/not-color-alone">Agent Wranglers accessibility playbook</a>. In code you write, add a comment next to it with the same link.