Accessibility
Every page in this design system meets WCAG 2.1 Level AAA. This page demonstrates the four a11y pillars live: keyboard navigation, contrast, high-contrast mode, and screen-reader structure.
Keyboard navigation
Tab through every focusable element below. Each one must display a visible focus ring that meets AAA (3:1 minimum against adjacent colours). No element may be keyboard-unreachable.
All interactive elements receive a 2px offset outline in the accent colour on focus. No JS required — pure CSS :focus-visible.
Contrast swatches
Every token pair below is verified AAA (7:1 for normal text). Swatches render live using the active CSS custom properties — change the theme toggle to verify dark and light modes.
--kdr-text --kdr-bg--kdr-accent-on --kdr-accent--kdr-text-muted --kdr-bg--kdr-text --kdr-surface--kdr-text --kdr-surface-2Rendered using the page's live CSS vars. Ratios are verified at build time by the pa11y gate (tools/a11y-test/).
High-contrast preset
The `high_contrast` UI style preset flips every surface to a near-black/near-white pair and raises border widths. Useful for low-vision users or bright-sunlight outdoor viewing.
High-contrast body text sample. Edges are sharp; no gradients.
Inline linkThe high_contrast preset is part of the canonical 19-preset library in specs/themes/ui-style.kmd.
Screen-reader structure
Every generated page includes skip-link, landmark regions (header, main, nav, footer), and a page heading hierarchy that a screen reader can traverse as a document outline.
This outline is generated from the real heading structure of this page — not hard-coded. Screen readers produce the same list from any generated page.
Color-blindness considerations
The design system avoids colour-only information encoding. Every status is reinforced with shape, text, or icon.
- Error states use ❌ icon + red border, not red alone.
- Success states use ✓ icon + green border, not green alone.
- Focus indicators use outline shape, not colour shift alone.