Skip to main content

Accessibility discovery

Read the reference number

The scenario

You have just bought a train ticket on your phone. The ticket office wants the booking reference before they will help you. You are standing outside, it is bright, and your screen brightness is turned down to save battery.

Your task

  1. Without changing anything, read the booking reference out loud and type it in.
  2. Then drag the contrast slider up until the text feels comfortable, not just possible.
  3. Note the ratio you stopped at, and compare it with the rest of the group.
Time
5 minutes
Barrier
Low contrast text
Success criterion
WCAG 2.2 — 1.4.3 Contrast (Minimum), level AA

Your booking confirmation

Fixed to a light background so the ratio is the same for everyone.

Booking confirmed

London Paddington to Swansea

Saturday 4 October, departing 09:48. Quote your booking reference at the ticket office.

 

Change or cancel this booking

Tickets are non-refundable within 24 hours of departure.

—

Six characters, for example K4X92T. Case does not matter.

Watch out for this one: the slider only changes the text colour. Everything else on the card — the link, the small print, the disabled button greys you will meet later — usually fails for the same reason.

What this exercise is showing

The original text sits at roughly 2:1. It is not invisible, which is exactly why it survives design review: on a large calibrated monitor, indoors, with young eyes, it reads as “subtle” rather than “broken”.

WCAG asks for 4.5:1 for body text and 3:1 for large text (24px, or 19px bold) and for the visual boundary of controls. Most people in the room will stop somewhere between 6:1 and 10:1 when asked what is comfortable rather than what is possible, which is a useful thing to notice: the standard is a floor, not a target.

This affects far more people than most teams assume. Around 2 million people in the UK live with sight loss, roughly 1 in 12 men has a colour vision deficiency, and everybody's contrast sensitivity drops with age. Add sunlight, a cracked screen, a cheap laptop panel or night-shift eyes and the group in the room becomes most of your users.

Questions for the group

  • Who stopped at a different ratio to the person next to them, and why?
  • Where in our own product do we use grey text on grey backgrounds? Placeholder text? Disabled states? Timestamps? Footer links?
  • Who currently decides that a colour pair is acceptable, and what do they check it with?

What good looks like

  • Contrast pairs are decided once, in the design system's colour tokens, not per screen.
  • Body text meets 4.5:1 and non-text elements such as input borders and icons meet 3:1.
  • Placeholder text is never the only label, so it never has to carry contrast on its own.