Evidence Layer
Accessibility
Measured, not claimed.
WCAG 2.1 AA site-wide, with AAA on all primary body text and headings. Every contrast ratio, keyboard behavior, and screen reader detail is documented here — not asserted.
Principles demonstrated
Transparency — every claim is backed by a specific ratio. Measure — accessibility is not estimated; it is computed against a standard.
Compliance Level
WCAG 2.1 AA site-wide, with AAA on all primary body text and headings.
Per-Element Contrast Ratios
All ratios measured against the base background (#0F0D0B). Ratios are computed values — verify with any WCAG contrast checker.
| Element | Color | Background | Ratio | WCAG |
|---|---|---|---|---|
| Body text | #B8B0A8 | #0F0D0B | 9.1:1 | AAA |
| Headings | #F0EAE2 | #0F0D0B | 16.2:1 | AAA |
| Accent text | #D4845A | #0F0D0B | 6.7:1 | AAA (large) |
| Links | #5BA8A0 | #0F0D0B | 7.0:1 | AAA |
| Nav / secondary | #7F7872 | #0F0D0B | 4.5:1 | AA |
| Labels / metadata | #625D56 | #0F0D0B | 3.0:1 | AA (large only) |
Keyboard Navigation
- ·All interactive elements are reachable via Tab in document order.
- ·Focus order follows visual reading order on all pages.
- ·Visible focus indicators on all focusable elements — no `:focus { outline: none }` without replacement.
- ·Escape key closes all open panels and menus, returning focus to the trigger.
- ·Arrow key navigation for principle strip (left/right between principles).
- ·Enter/Space activates all interactive elements as expected.
Screen Reader Compatibility
- ·Semantic HTML structure throughout — h1/h2/h3 hierarchy maintained on all pages.
- ·ARIA landmark regions: <header>, <main>, <footer>, <nav> with descriptive aria-labels.
- ·Heading hierarchy verified: no skipped levels, no decorative headings.
- ·Images carry descriptive alt text. Decorative SVGs use aria-hidden="true".
- ·Interactive illustration canvases carry role="img" with aria-label describing each principle's visual metaphor.
- ·Export menus use role="menu" and role="menuitem" with keyboard-accessible navigation.
Motion
prefers-reduced-motion is respected. When the user has requested reduced motion:
- ·Canvas-based interactive illustrations pause their animation loops.
- ·Card entrance/exit transitions are instant (0ms) rather than animated.
- ·Principle card swipe animations are removed.
- ·The spark particle system does not run.
- ·Easter egg reward fades in without translation.
All motion is progressive enhancement. No information is conveyed by animation alone.
Known Limitations
Warm Slate (#625D56) — 3.0:1 contrast
Warm Slate meets WCAG AA for large text only (18px bold or 24px regular). It is used exclusively for labels and metadata at sizes where large-text rules apply, never for body copy. If you encounter Warm Slate on text below those thresholds, that is a bug.
Feedback
If you encounter an accessibility barrier on this site, contact us. We will address it. Accessibility failures on a site about standards of care are not acceptable.