WCAG 1.4.1 — Use of Color

What this requires

Colour cannot be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing an element. There must be a second cue — text, an icon, a pattern, a position, an underline — that delivers the same information. The criterion isn't anti-colour; it's anti-colour-only.

How AI coding tools fail this

When asked to "make required fields stand out" or "highlight overdue rows", AI tools reach for colour as the entire signal: a red asterisk with no text, a red row background with no row-level label, a green dot for "available" with no aria-label.

The second pattern: links indistinguishable from surrounding text except by colour. The default Tailwind text-blue-600 on a link with no underline puts the burden of distinguishing link from prose on colour-perception alone. WCAG 1.4.1 plus the contrast requirement means link colour must either have 3:1 contrast against surrounding text and a non-colour cue (typically an underline), or it must have an underline.

The third: status badges where the colour is the entire status. "Red = broken" with no word and no icon next to the dot.

Failing examples

Required fields signalled by red label colour alone:

<label className="text-red-700">Email</label>
<input type="email" />

A list of rows where overdue status is shown only by a red row tint:

<tr className={isOverdue ? "bg-red-50" : ""}>
  <td>{invoice.id}</td>
  <td>{invoice.amount}</td>
  <td>{invoice.dueDate}</td>
</tr>

Passing examples

Required fields signalled by colour and a textual indicator:

<label>
  Email <span aria-hidden="true">*</span>
  <span className="sr-only"> (required)</span>
</label>
<input type="email" required aria-required="true" />

Overdue rows signalled by colour and a text status (and an icon for double-redundancy):

<tr className={isOverdue ? "bg-red-50" : ""}>
  <td>{invoice.id}</td>
  <td>{invoice.amount}</td>
  <td>{invoice.dueDate}</td>
  <td>
    {isOverdue ? (
      <span className="inline-flex items-center gap-1 text-red-800">
        <AlertIcon aria-hidden="true" />
        Overdue
      </span>
    ) : (
      "On time"
    )}
  </td>
</tr>

Edge cases

Links in prose need an underline (or a 3:1 contrast against surrounding text plus another cue on focus/hover). Pure colour differentiation fails.
Charts must convey series identity through more than colour: patterns (dashed lines, hatching), direct labelling, distinct markers, or an accompanying data table.
Form validation error state is the most common failure. A red border around an invalid input needs an accompanying error message and ideally an icon.
Heat maps depend on colour. Provide a paired data view (a sorted list, a hover tooltip with values) so the information is reachable without colour perception.
Greyed-out disabled state is a form of colour signalling. Pair it with disabled (so AT announces "dimmed") or aria-disabled and a tooltip.

How Jeikin handles this

axe-core catches some patterns (links without underlines that rely on colour, for example). The harder cases — overdue rows, validation errors, status badges — need a guided review. The dashboard surfaces candidate failures and asks the reviewer to confirm a second cue exists, with the evidence recorded against each finding.