Accessibility

Accessibility

Beautiful and unreadable is a failure, not a style. AA is the floor, measured on the real backdrop in both themes.

The decision

The problem

Contrast checked by eye, or at the end, if at all.

What I chose

AA as a floor, measured on the backdrop each text really sits on, in both themes, with transparency mixed in. Every rule written where the next component will find it.

Ruled out

Checking at the end. By then the colours already exist.

What it cost

Fixing things after they shipped: some greys, one blue, one red and a handful of labels changed.

Contrast

  • The muted grey of dates and labels: 2.95:1 in 46 places on the home. Now 4.60.
  • White at 75% on the brand blue: 3.72:1. At 90%, 4.74.
  • The form error red: 3.53:1. Now 4.78 on light and 6.22 on dark.
  • Blue as small text on black: 3.81:1. On dark it lightens to 6.10.
  • The pill over photos: its label clears AA against the mean luminance of the six project images; the worst is 5.4:1.

Sizes and targets

  • Inputs never below 16px, so iOS doesn't zoom in on focus.
  • The smallest labels at 12.8px. Button labels go up to 16px on phones.
  • Buttons are 68px tall, the video controls 44px, the theme toggle 40px.

Focus

Every focusable element shows a ring in the brand blue when reached with the keyboard. On blue surfaces the ring turns white, because blue on blue disappears.

Motion

Everything expensive respects prefers-reduced-motion. Every video that moves for more than five seconds can be paused, and a video paused by hand stays paused.

Screen readers

  • A link to skip straight to the content.
  • The contact assistant has a way out to a classic form.
  • Alternative texts are written after looking at each image. Several described another picture, one of them promising "two seaside portraits". All of them were rewritten.
  • Headings follow the structure of the page, and controls carry their own labels: a placeholder doesn't count as one.

How it is checked

A script audits every text on a page against its real backdrop in both themes and reports only what fails. Another sweeps horizontal overflow from 320 to 2560 pixels. And the site gets used, on a phone, a laptop and an iPad, which is where the rest were found.