WCAG 2.2 Demo Suite

Visual and zoom testing

Five procedures, each taking a couple of minutes, that between them cover the criteria most likely to affect users with low vision — and the ones automated tools are worst at.

1. Contrast 1.4.3 1.4.6 1.4.11

  1. Pick foreground and background with a colour picker — the browser devtools contrast panel, the Colour Contrast Analyser, or a browser extension.
  2. Check text against the thresholds: 4.5:1 normal, 3:1 large (18pt / 24px, or 14pt / 18.66px bold). At AAA, 7:1 and 4.5:1.
  3. Check non-text too: input borders, focus indicators, icons that carry meaning, chart elements. 3:1 against adjacent colours.
  4. Test every state: default, hover, focus, visited, and disabled controls that still convey information.
  5. For text over an image or gradient, measure at the worst point, not the average.

This repository checks its own palette: node tools/check-contrast.mjs verifies every design token pair in both light and dark themes and fails if any drops below threshold.

2. Colour independence 1.4.1

  1. View the page in greyscale — devtools rendering panel, or an OS colour filter.
  2. Ask whether any information has disappeared: required fields, error states, chart series, links inside body text, status indicators.
  3. Print it, or preview the print. Anything colour-only vanishes on paper too.

3. Zoom to 200% 1.4.4

  1. Press Ctrl/Cmd and + until the browser reads 200%.
  2. Look for clipped text, overlapping elements, controls pushed off screen, and fixed-height boxes hiding overflow.
  3. Check the viewport meta tag has no user-scalable=no or maximum-scale.

4. Reflow to 320 CSS pixels 1.4.10

  1. Set the browser window to 1280 px wide and zoom to 400% — or use device emulation at 320 × 256.
  2. The page must not scroll horizontally, and nothing may be lost or cut off.
  3. Data tables, maps, diagrams and code blocks are exempt — but their scroll container must be keyboard reachable.
  4. Check that menus collapse rather than overflow, and that sticky bars do not eat the viewport.

5. Text spacing overrides 1.4.12

Paste this into the devtools console, or save it as a bookmarklet. It applies exactly the values WCAG requires a page to survive:

document.head.insertAdjacentHTML('beforeend', `<style>
  * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
  }
  p, li, dd, blockquote { margin-bottom: 2em !important; }
</style>`);
  1. Apply it and look for clipped text, overlapping elements, and text escaping its container.
  2. The usual cause is a fixed height on something containing text. Use min-height instead.

6. Orientation and motion 1.3.4 2.3.3

  1. Rotate a device, or make the window wider than it is tall. Content must work in both.
  2. Turn on the operating system's reduce-motion setting and reload. Large movement, parallax and long smooth scrolls should be gone — not merely faster.

Practise on these demos