Colour can’t be your only signal. Here’s how to fix that without redesigning everything.

Relying on colour alone is one of the most common accessibility fails I see. And it’s an easy one to fix.

Whether it’s form errors, buttons, or active states, here are 3 quick ways to make your UI clearer for everyone.

---

1. Add Text or Icons to Error States

Bad:

<p class="text-red-600">Password is required</p>

Why it fails: If someone’s colour blind, or using a greyscale screen, that red text means nothing. Also, without extra cues, screen readers might miss the importance.

Better (for dynamic errors):

<p class="text-red-600" role="alert" aria-live="assertive">
  <span aria-hidden="true">&#10060;</span>
  <span>Password is required</span>
</p>

• Adds a clear symbol that’s ignored by screen readers
• Uses role="alert" and aria-live for proper announcements
• Doesn’t rely on colour alone

If the error is already visible when the page loads, drop the role="alert" and just make sure it’s properly linked to the input field.

---

2. Use Underlines or Style Shifts for Hover States

Bad:

a:hover {
  color: #007acc;
}

Better:

a:hover {
  color: #007acc;
  text-decoration: underline;
}

Or even:

a:hover::after {
  content: " ↗";
}

Anything that changes shape, icon, or text gives a better cue than colour alone.

---

3. Make Selected States Clear Without Colour

Let’s say you’ve got a set of toggle buttons.

Bad:

.button.active {
  background: #2ecc71;
}

Better:

• Add a visible checkmark
• Use aria-pressed="true" if it’s a toggle
• Change the shape or text style

<button class="active" aria-pressed="true">
  ✔ Grid view
</button>

Now it’s clear, both visually and semantically.

---

Final Note

Ask yourself this: if all the colour vanished from your site, could users still work out what’s going on? If not, it’s time to back it up with something else.