What kinds of motion are risky?

Large sliding translations, spinning rotations, strong zoom scaling and parallax-style 3D transforms can trigger nausea or dizziness in people with vestibular disorders. Rapid flashing content above three flashes per second can trigger photosensitive seizures.

What is the 3 Hz flash threshold?

WCAG 2.3.1 requires that nothing flashes more than three times in any one second, because rates above roughly 3 Hz are associated with photosensitive seizures. The checker estimates the cycle rate of infinite animations and flags any that imply more than three cycles per second.

What does prefers-reduced-motion do?

It is a CSS media feature that is true when the user has asked their operating system to minimise animation. Wrapping non-essential motion in '@media (prefers-reduced-motion: reduce)' and disabling it there lets sensitive users turn off motion, which is the core requirement of WCAG 2.3.3.

Is this a guarantee of compliance?

No. It is a heuristic static analysis. It cannot measure actual on-screen flash area, luminance change or perceived speed, so it may miss subtle issues or flag harmless ones. Treat it as a fast first pass and confirm borderline cases by watching the animation.

Is my CSS uploaded anywhere?

No. The CSS is parsed and analysed entirely in your browser. Nothing you paste is sent to a server or stored anywhere.

Motion & Animation Safety Checker

Animation makes interfaces feel alive, but the wrong motion can make some users physically ill or, in rare cases, trigger a seizure. This checker reads your CSS, finds the rules that move things, and flags the ones most likely to cause harm, while reminding you to give users a way to opt out.

How it works

The tool splits your CSS into top-level blocks (selectors, @keyframes and @media queries) using a brace-aware scanner, then inspects the declarations inside each one.

Vestibular risk (WCAG 2.3.3)

These transform patterns are flagged because they create the large or disorienting motion that bothers people with vestibular conditions:

Rotation — any rotate, rotateX/Y/Z or rotate3d.
Large translation — a translate over about 150px, or any motion expressed in vh or vw (full-viewport sliding).
Strong scale — a scale factor at or above 1.5, or at or below 0.5.
Parallax / depth — perspective, translateZ or rotate3d.

Seizure risk (WCAG 2.3.1)

For infinite animations the tool reads the duration and estimates a cycle rate:

cyclesPerSecond = 1000 / durationMs

If that exceeds 3 Hz, the rule is flagged as a potential flash hazard, since anything flashing faster than three times per second can trigger photosensitive seizures.

The opt-out check

The whole stylesheet is searched for a @media (prefers-reduced-motion: reduce) query. If none exists, that is reported prominently, because without it sensitive users have no way to turn motion off.

Example

.loader { animation: spin 0.2s linear infinite; }

A 0.2s infinite loop runs at 5 Hz, above the 3 Hz threshold, so it is flagged as a seizure risk. Slow it down, or better, disable it under reduced-motion.

Tips

Default to subtle motion: short fades and small movements rarely cause problems.
Gate every non-essential animation behind prefers-reduced-motion: reduce and set it to none or a minimal fade there.
Avoid full-screen slides, spinners that never stop, and large zoom-in reveals on scroll.
This is a static heuristic, not a luminance measurement. Confirm borderline cases by actually watching the animation. All analysis is local to your browser.