Agent WranglersAccessibility Required
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).
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.
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
View the page in greyscale, for example with a DevTools vision emulation. Every state and every link can still be told apart.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/not-color-alone.