Reduced Motion & Contrast

Respect a reduced-motion preference

Some people experience discomfort from animated movement, so operating systems expose a preference to reduce motion. CSS can respond using @media (prefers-reduced-motion: reduce). In that block, remove non-essential movement or make transitions much less prominent. The preference does not mean every visual change must disappear; keep essential feedback understandable without animation.

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .decorative-motion { animation: none; }
}

For the quest, add a reduced-motion rule that disables or minimises the hover transition and any decorative animation you introduced. Test the normal experience too, so the rule does not accidentally remove useful focus cues.

Check contrast, not just the palette

Text needs enough contrast against its background to remain readable for people with low vision or in bright conditions. WCAG AA commonly requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Some interface components and graphical indicators also have contrast requirements. Use a contrast checker with the actual foreground and background colours rather than judging by appearance alone.

A dark palette can still have poor contrast when text is muted too far or an accent is too close to its background. After changing CSS variables, retest the combinations used for body text, buttons and labels.

Never communicate with colour alone

Colour is a useful cue but not everyone perceives it the same way, and colour can disappear in monochrome or low-quality displays. Pair colour with text, an icon, a shape, an underline or another clear signal. For example, a form error should include an explanatory message, not only a red border.

Apply the checks to your interface

Review the transition and reduced-motion rule as you finish the practical. Then check that important text and controls remain distinguishable and that any state is communicated through more than hue. Accessibility is not a final decoration: it is part of whether the interface communicates its purpose to all its users.

Test the preference rather than assuming the rule works

In Chrome/Edge DevTools, open the Rendering tools (the command menu can search for Rendering) and set “Emulate CSS media feature prefers-reduced-motion” to reduce. Reload or repeat the interaction. Your animated transform should disappear or become minimal while focus, colour and essential status feedback remain. Restore the emulation afterward.

You can also test your own system preference: Windows accessibility visual effects includes animation controls; macOS Accessibility → Display includes Reduce motion. Labels vary by system version. Confirm both normal and reduced modes; a misspelled media query may otherwise look convincing in source while doing nothing.

Make contrast checking concrete

Choose the actual text foreground and the actual background it sits on. Use browser accessibility/contrast tooling or a reputable checker to read the ratio. Test normal text against 4.5:1; large text uses 3:1 (WCAG's large-text definition is about 18pt normal or 14pt bold, not simply any heading). Do not lower the threshold because text “looks big enough”.

Normal, focused, hovered and disabled states can use different colours. Check the relevant states after changing custom properties. For background imagery or transparency, test the actual visible contrast, not only a token's isolated value. Controls and meaningful graphical boundaries have their own non-text contrast requirements.

A small finish check

Move the pointer onto your polished link, Tab to it, emulate reduced motion and repeat. Confirm you can locate focus in every mode. A form error should include words explaining the problem, not only red. A selected item can use a check mark or text as well as an accent colour.

Before the polish activity, demonstrate the preference changes the intended effect and that the page remains understandable without colour/motion alone. Record the tested text/background pair and ratio in your notes rather than saying “the palette seems fine”.