Foundations
Accessibility
Accessibility shows up as infrastructure in the product, not an add-on layer. This page documents the strongest product patterns and the specific source-backed risks to preserve.
Contrast
Check any pair against WCAG
Try the presets, or enter your own. Ratios use the real WCAG relative-luminance formula, computed live.
What the system gets right
Citable evidence, not a marketing scorecard
Open Dyslexic font option
A literal Open Dyslexic family reference exists in the production bundle — a genuine display-setting toggle, not a curiosity.
forced-colors & prefers-contrast
Windows High Contrast Mode overrides and OS-level 'increase contrast' are both respected in production.
Screen-reader-only utility
A textbook visually-hidden-but-AT-accessible class confirms hidden label text ships for at least some icon-only controls.
:focus-visible support
Keyboard focus rings show without appearing on every mouse click — present as foundational rules, not richly customized per component.
Antialiasing on light weights
-webkit-font-smoothing: antialiased is applied wherever a Light/200–300 weight renders on a flat background.
Robust cursor fallback
Custom cursor SVGs always pair with the default keyword — if the asset fails to load, the cursor still works.
Risk areas
Specific, citable, not editorialized
This site
Practicing what the manual preaches
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Plus a real skip-link, a visible focus ring on every interactive element (:focus-visible, magenta, 2px), and semantic heading order on every page — check the source.