WCAG 2.2 Demo Suite

1.4.1 Level A Guideline 1.4 Distinguishable Added in WCAG 2.0 Partly detectable automatically

Use of Color

Colour is not the only visual means of conveying information, indicating an action, prompting a response, or distinguishing an element.

Who this affects

Around 1 in 12 men and 1 in 200 women have some colour vision deficiency. Users of monochrome displays, high-contrast modes, and printouts are affected too.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 1.4.1

Open the failing example in a new tab

fail.html — the problem

<h1>Your orders</h1>

<!-- FAILURE 1: status is conveyed by text colour alone. In greyscale, or to a
     colour-blind user, "Delayed" and "On time" are indistinguishable. -->
<table class="order">
  <caption>Recent orders</caption>
  <thead><tr><th scope="col">Order</th><th scope="col">Status</th></tr></thead>
  <tbody>
    <tr><th scope="row">#1041</th><td class="late">3 March</td></tr>
    <tr><th scope="row">#1042</th><td class="ontime">5 March</td></tr>
  </tbody>
</table>
<p>Dates shown in red are delayed.</p>

<!-- FAILURE 2: links identified only by colour, with no underline and no other
     visual difference from the text around them. -->
<div class="prose-fail">
  <p>See our <a href="#delivery">delivery information</a> or read the
     <a href="#returns">returns policy</a> before contacting us.</p>
</div>

<!-- FAILURE 3: required fields marked with a red asterisk whose meaning is
     explained only by colour ("fields in red are required"). -->
<form>
  <div class="field">
    <label for="email"><span class="req-star">*</span> Email address</label>
    <input type="email" id="email">
  </div>
  <p>Fields marked in red are required.</p>
  <button type="submit" class="button">Save</button>
</form>

<p id="delivery">Delivery information.</p>
<p id="returns">Returns policy.</p>

Meets 1.4.1

Open the passing example in a new tab

pass.html — the fix

<h1>Your orders</h1>

<!-- FIX 1: the status is written out in text. Colour still helps people who
     can see it, but it is now redundant rather than load-bearing. The word
     and the icon both survive greyscale, a monochrome printout, and
     Windows High Contrast mode. -->
<table>
  <caption>Recent orders</caption>
  <thead>
    <tr><th scope="col">Order</th><th scope="col">Expected</th><th scope="col">Status</th></tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">#1041</th><td>3 March</td>
      <td class="status status--late"><span aria-hidden="true">▲</span> Delayed</td>
    </tr>
    <tr>
      <th scope="row">#1042</th><td>5 March</td>
      <td class="status status--ontime"><span aria-hidden="true">●</span> On time</td>
    </tr>
  </tbody>
</table>

<!-- FIX 2: links are underlined, so they are distinguishable from body text by
     shape as well as colour. If you must remove the underline, you need
     another non-colour difference of at least 3:1 - a bold weight or a
     background - and it must reappear on hover and focus. -->
<p>See our <a href="#delivery">delivery information</a> or read the
   <a href="#returns">returns policy</a> before contacting us.</p>

<!-- FIX 3: "(required)" is in the label as text. The required attribute also
     exposes the state programmatically. -->
<form>
  <div class="field">
    <label for="email">Email address (required)</label>
    <input type="email" id="email" required>
  </div>
  <button type="submit" class="button">Save</button>
</form>

<p id="delivery">Delivery information.</p>
<p id="returns">Returns policy.</p>

How to test it

View the page in greyscale. Any information still distinguishable? Classic failures: required fields marked only in red, chart series distinguished only by colour, links in body text with no underline.

  • Automated

    Scanners can flag links that rely on colour alone against surrounding text. Most other uses of colour require human review in greyscale.

    Relevant axe rules:

    • link-in-text-block

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification