Design system
Accessibility
The target level (WCAG 2.2 AA), the measured contrasts and the rules that uphold it.
The site aims for WCAG 2.2 AA. It is checked with axe-core on every page, in light and dark, on desktop and mobile: 0 issues as of 31 October 2026.
Measured contrasts
| Pair | Ratio | Use |
|---|---|---|
| Text on background, light | 16.7:1 | Body text |
| Secondary text on background, light | 6.5:1 | Summaries, metadata |
| Secondary text on surface, light | 5.9:1 | Fact sheets, notes |
| Text on background, dark | 15.5:1 | Body text |
| Secondary text on background, dark | 7.7:1 | Summaries, metadata |
| Dark text on yellow | 10.3:1 | Legend labels |
| Dark text on cyan | 7.6:1 | Legend labels |
| Dark text on lime | 10.3:1 | Legend labels |
| White on magenta | 4.5:1 | Quote banner, legend |
| Yellow on white background | 1.6:1 | Never for text |
| Cyan on white background | 2.2:1 | Never for text |
Rules
- Never colour alone: each colour family also has a pattern in charts (dots, hatching), and a name.
- Keyboard: anything that opens on hover also opens from the keyboard (menus, chart tooltips, nodes of the flower); Escape closes it.
- Visible focus: a 2px outline in the text colour.
- Skip link “Skip to content” at the top of every page.
- No skipped heading levels: one h1 per page, then h2, h3.
- Images: alt text that says what the image shows; empty if it is decorative.
- Motion: no autoplay; animations stop if the device asks for reduced motion.
- Touch targets: 44 × 44 px minimum.
- Language: every page declares its language; so do passages in another language.
- Dark mode: the site follows the device’s setting, so that the browser does not recolour pages its own way.