Skip to main content

Accessibility discovery

Find the orders that need action

The scenario

It is Monday morning on the customer service desk. Your manager wants to know how many orders need chasing before the 10 o'clock stand-up. The dashboard uses a traffic light system that everybody says is obvious.

Your task

  1. Count the orders that need action and type the number in. Do not read the table row by row, do it the way you would at 9am.
  2. Now change the colour vision setting and count again without reloading.
  3. Try the greyscale setting, then imagine this printed out or read over the phone.
Time
8 minutes
Barrier
Colour used as the only way of telling things apart
Success criterion
WCAG 2.2 — 1.4.1 Use of Color

Orders dashboard

Version
Applies to the dashboard below only, not the rest of the page.
Orders, last 7 days
Order Customer Value Status

Key:

An important caveat: these filters are a rough approximation, not what anybody actually sees. Nobody with a colour vision deficiency wakes up one morning and finds the world has changed; they have always seen it this way and are often very good at working round it. Use the simulation to find the design that fails, not to imagine somebody else's experience.

What this exercise is showing

The broken dashboard carries its entire meaning in hue. There is no text, no shape, no position and no label — so the moment hue is unavailable, the information is gone. That happens for around 1 in 12 men and 1 in 200 women with a colour vision deficiency, for anyone using a screen reader, on a printout, on a cheap projector in a meeting room, on a phone in sunlight, and for anyone reading the number out over the phone.

Notice what the key does. It lists three coloured dots and never says what any of them mean, which is a surprisingly common pattern once you start looking for it.

There is a second, quieter failure. Run a screen reader over the broken table and the status column is silent: an empty cell in every row. Colour is not just hard to perceive, it is genuinely absent from the accessibility tree.

Questions for the group

  • Did anyone's count change between the settings? Did anyone feel confident and still get it wrong?
  • Where do we use red and green together — validation, charts, status pills, diffs, availability calendars?
  • If someone read our dashboard down the phone to a colleague, what would they lose?

What good looks like

  • Colour is the second signal, never the first. Add the word, then colour it.
  • Where labels will not fit, use shape as well as hue — a tick, a cross, a warning triangle — and give the icon a text alternative.
  • Charts get direct labels or patterns, not a colour key off to one side.
  • Test it by taking a screenshot and desaturating it. If you cannot read it, neither can a good number of your users.