Why it matters
Motion on the web is more than decoration for some visitors. Content that flashes more than three times a second can trigger seizures, and large sliding, zooming or parallax effects make people with vestibular disorders feel ill. Operating systems have a "reduce motion" setting for this, and CSS can read it with prefers-reduced-motion, but most stylesheets never check it.
This auditor parses your CSS, follows every animation to its @keyframes and measures what it does: which properties move, how many times brightness or opacity swings in each cycle, how long it runs and whether it repeats forever. Flash rate is the number of swings there and back divided by the duration, compared with the WCAG limit of three a second. It also checks whether each rule is already switched off for reduced motion, either inside @media (prefers-reduced-motion: no-preference) or by a matching reduce rule, and writes overrides for the ones that aren't.
How to use it
- Paste your stylesheet, or just the parts with animations and transitions.
- Read the findings: anything flashing over three times a second is a failure.
- Add a pause control for any motion that runs over five seconds.
- Copy the reduced motion CSS into your stylesheet.
FAQ
What counts as a flash?
WCAG defines a flash as a pair of opposing changes in brightness: bright to dark and back. The auditor counts swings of opacity, colour, brightness filters and visibility in your keyframes, ignoring changes under 10%, and halves them to get flashes.
Does prefers-reduced-motion mean no animation at all?
No. It means reduce. Swap slides and zooms for fades, shorten them, or stop looping. The site-wide override is a safe starting point; the targeted one keeps the rest of your animation.
Are loading spinners allowed?
Usually. A spinner that only shows while something loads is part of the activity, but it should still respect reduced motion, for example by slowing down or pulsing instead of spinning.
Does this check JavaScript animations?
No, only CSS. For JavaScript animations, check window.matchMedia('(prefers-reduced-motion: reduce)') in your code.
