---
title: "Never use colour as the only signal · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/not-color-alone
updated: 2026-10-20
licence: "All rights reserved"
---

# Never use colour as the only signal

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: 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: 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.
- 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.

Example:

```html
<!-- 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>
```

**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`.

- Previous: [Make links look like links](https://agentwranglers.se/playbook/website/accessibility/links-look-like-links)
- Next: [Name every link and button](https://agentwranglers.se/playbook/website/accessibility/empty-links-buttons)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)