Reduced motion and forced colours
In DevTools, open Rendering and emulate prefers-reduced-motion: reduce (the spinner slows down) and forced-colors: active (the custom box keeps a visible border, because shadows are removed in that mode).
CSS decides whether people can read, see where they are, and use a page comfortably: give text enough contrast, keep a clear focus indicator, hide text visually without hiding it from screen readers, survive forced-colours mode, and calm motion for people who ask for less.
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 :focus-visible style for buttons that also stays visible in forced colours mode, even though the normal design uses a box-shadow ring.
Write CSS that turns off a .carousel slide animation for users who prefer reduced motion.
Write a .visually-hidden class and use it to label a search button that only shows a magnifying-glass icon.
Explain it without notes
What contrast ratios does WCAG AA require, and for what?
Why is outline: none harmful, and how do you style focus properly?
How do you hide text visually but keep it for screen readers? Why not display: none?
What is forced colours mode, and how should CSS handle it?
How should CSS respond to prefers-reduced-motion?
Preview
Console
Nothing logged yet.