Foundations
Accessibility.
Lumino is built for everyone who wants to learn — including the 15%+ of users with disabilities. The system enforces WCAG 2.2 AA contrast, keyboard-first interaction, motion-safe animation, and semantic HTML by default.
Contrast checker
Pick any two colors. Lumino tells you the contrast ratio and which WCAG criteria pass.
Focus states
Every interactive element shows a visible focus ring on keyboard navigation — never outline: none without a replacement. Try tabbing through these.
Motion safety
Lumino respects prefers-reduced-motion. Animations that aren't essential to meaning stop, and those that remain cross-fade instead of translating. Try toggling "Reduce motion" in your OS — the shape below stops bobbing.
Animation pauses when prefers-reduced-motion: reduce
Semantics & ARIA
✓
Use native elements first.<button> over <div onclick>. <a> over onClick handlers for navigation. Fewer ARIA roles is better.
✓
Label every input.<label for="x"> or aria-label. Placeholders don't count — they vanish on input.
✓
Landmark regions.<header>, <nav>, <main>, <aside>, <footer> — screen readers navigate by them.
✓
Heading hierarchy.One h1 per page. Don't skip levels for visual styling — use CSS for that.
✓
Icon-only buttons need labels.aria-label="Search" on the magnifying-glass button. Always.
✓
Status updates are polite.Toast messages use aria-live="polite" so they're announced without interrupting.
✓
Modals trap focus.Tab cycles through the modal. Esc closes it. Focus returns to the trigger.
✓
Skip links at the top.<a href="#main">Skip to content</a> — hidden until focused. Saves keyboard users from re-tabbing through nav.
Don't rely on color alone
Around 8% of men and 0.5% of women have red–green color-vision deficiency. Pair every color meaning with a shape, icon, or text cue.
✓ Do — status + shape + label
Green dot + "Live" · Red circle + "Offline" · Both the shape and the word convey state.
✗ Don't — color alone
"Red means broken, green means fine" — invisible to a CVD user.
Hit targets
Interactive targets on touch surfaces must be ≥ 44×44px (WCAG 2.2 AAA). Desktop can go to 32px if spacing around the element is ≥ 8px.