We build accessibility in from the first component.

This view shows the sample in this site’s own type and colours as most visitors see it.

With protanopia, the red of the Work floor darkens to an olive grey, and the Accessibility blue and the Studio purple become almost the same blue. Each floor still carries its name beside its colour, so visitors can find it without telling the colours apart.

With deuteranopia, three of the five floors turn a similar olive brown. Each floor’s name sits next to its colour, so nobody has to tell those three apart.

With tritanopia, the Accessibility blue and the Capture green turn into the same teal. The underlined links and the bordered button still stand out without any help from colour.

Without colour, all five floors turn into greys of nearly the same lightness. The text keeps its contrast, because contrast measures the difference in lightness between text and its background.

Blurred sight wipes out fine detail first. We keep body text at 18 pixels or more and set headings far larger, so the page’s structure still shows through the blur.

Here the text is twice its usual size in a column as narrow as a phone. We set the sample’s breakpoints in ems, so its layout rearranges around the bigger text and every word stays on screen.

High-contrast settings replace a site’s colours with a set the visitor picks, and this view uses black and yellow. Our buttons carry borders that show up in these modes, and the heading link keeps its underline.

Keyboard users move with the Tab key, and the numbers show the order focus takes through the sample. On a computer, press Tab now and a thick ring follows you from stop to stop.

A screen reader turns the sample into speech, and the list shows what it announces in order. We build that list from the sample’s code as you watch, and each screen reader words some of those lines in its own way.