Don't rely on color alone

Pair every color-coded state with an icon, label or pattern.

From refactoring-ui: Accessibility Depth, “Don't rely on color alone”.

An email field with an error

Fix the address, then view it as Deuteranopia.

Border color onlyBad

class="border-red-500"

Border + icon + textGood

aria-invalidaria-describedby

<label for="email">Email</label>
<input id="email" type="email" class="border-red-500"
       aria-invalid="true" aria-describedby="email-error">
<p id="email-error" class="text-red-600">
  <svg aria-hidden="true">…warning…</svg>
  Email is required
</p>

Find the overdue invoices

Pick every overdue invoice, then press Check.

Colored dot onlyBad

"#1043, Northwind, $860"

Dot + icon + labelGood

"#1043, Northwind, $860, Overdue"

<span class="pill pill-overdue">
  <svg aria-hidden="true">…clock…</svg>
  Overdue
</span>

Two chart series

Which line ends higher? Try it under each lens.

Color legendBad

Revenue Costs

Dash + direct labelsGood

Why it matters

About 1 in 12 men can't tell red from green, and screen readers don't announce color. Color alone leaves them no signal.

Pros

Survives colorblindness, grayscale and glare.
Screen readers get the same message.
Labels scan faster than legends.

Cons

Labels take more room than dots.
Icons must differ in shape, not only color.
Decorative color that encodes nothing is exempt.