Design language
Accessibility
The WCAG 2.2 AA checklist with live tools: a contrast checker and a colour-vision simulator.
Checklist (WCAG 2.2 AA minimum)
- Contrast: text 4.5:1 and interface marks 3:1, tested for every token pair.
- Never colour alone: tone, icon and words for every state; charts have tables.
- Text scaling to 200 % and reflow at 320 px, with no truncated patient sentence.
- Targets of 44 px for patients and 40 px for staff.
- A visible focus ring everywhere, a logical order, skip links, and focus returned after dialogs.
- Landmarks, one h1, a heading hierarchy, aria-current on the timeline, aria-sort on tables, polite live regions.
- Reduced motion and reduced transparency respected; nothing flashes.
- lang on the page and on every language switch.
- Visible labels, specific errors and an error summary; no CAPTCHA for patients.
- Plain language (grade 6 to 8), one task per screen, no time pressure.
- High contrast mode on every screen.
Contrast checker
Pick any two colour roles; the ratio is computed live for light and dark.
light
Aa · 42 min
5.78:1 · text passes AA (4.5:1) · UI passes (3:1)
dark
Aa · 42 min
7.49:1 · text passes AA (4.5:1) · UI passes (3:1)
Colour-vision simulator
The chart palette as people with each colour-vision deficiency see it.
Typical vision
Protanopia
Deuteranopia
Tritanopia
Screen-reader text of the timeline
What a screen reader says for each step of the stage timeline.