Contrast ratios and a reduced-motion hook
#767676 is the lightest grey that passes 4.5:1 on white; the popular #999999 fails. The hook reads the operating system setting (here: no preference) and re-renders if the user changes it. Turn on "reduce motion" in your OS settings and run again: the log says true and the fade disappears. DevTools can emulate it too (Rendering panel).
Test accessibility in layers: role-based Testing Library queries that fail when names and roles are missing, automated axe scans, keyboard-only walkthroughs, real screen reader checks, and checks for reduced motion and colour contrast.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a test (using the tiny test helper style) that checks a Modal returns focus to its opener when closed.
Write a useReducedMotion-aware Toast that slides in normally and just appears when the user prefers reduced motion.
Explain it without notes
How do Testing Library's role queries act as accessibility checks?
What can automated tools like axe catch, and what can't they?
Describe a keyboard-only test pass. What are you looking for?
How do you respect reduced motion in a React app, and what contrast ratios does WCAG AA require?
Preview
Console
Nothing logged yet.Expected console output
prefers reduced motion: false
#767676 on #ffffff → 4.54:1 passes AA
#999999 on #ffffff → 2.85:1 fails
#ffffff on #087ea4 → 4.64:1 passes AA
#000000 on #ffd43b → 14.73:1 passes AA