CSS Animation Accessibility Checker

Paste your CSS to check for animation and transition properties that may cause issues for users with vestibular disorders or motion sensitivities. The tool detects missing @media (prefers-reduced-motion) blocks, infinite animations, smooth scrolling, and long-duration animations, and provides ready-to-use fix snippets.

WCAG 2.3.3 — Animation from Interactions (AAA) & 2.2.2 — Pause, Stop, Hide (AA)

Motion, animation, and transitions can trigger vestibular disorders, nausea, and seizures. Always provide a @media (prefers-reduced-motion: reduce) block to disable non-essential animations for users who request it.

Paste your CSS

Universal Reduced-Motion Fix

Add this snippet to the top of your global CSS file to ensure all animations are disabled for users who request it:

/* ─── Safe default: disable all motion for reduced-motion users ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Alternatively: opt-in approach (WCAG best practice) ─── */
/* 
@media (prefers-reduced-motion: no-preference) {
  .animated-element {
    animation: slide-in 0.3s ease-out;
    transition: transform 0.2s;
  }
}
*/

Why This Matters

Vestibular disorders affect millions of people. Animations, parallax effects, and rapid motion on screen can trigger nausea, dizziness, and even seizures. The CSS `prefers-reduced-motion` media query allows users to request minimal motion through their OS settings. WCAG 2.3.3 (AAA) and 2.2.2 (AA) address motion-triggered barriers.

How to Use This Tool

1
Paste your CSS
Paste your stylesheet or a relevant portion containing animations, transitions, or @keyframes rules.
2
Review issues
The tool highlights missing prefers-reduced-motion blocks, infinite animations, and smooth scrolling without fallbacks.
3
Apply fixes
Each issue includes a specific CSS fix snippet. The universal fix at the bottom covers all common cases.
4
Download the fix
Download the universal prefers-reduced-motion CSS snippet to add to your global stylesheet.

Frequently Asked Questions

What is prefers-reduced-motion?

A CSS media query that detects whether the user has requested minimal animation in their OS accessibility settings (System Preferences > Accessibility > Reduce Motion on macOS, or Settings > Accessibility > Remove Animations on Windows). When enabled, your CSS can respond by disabling or reducing animations.

Does this check for WCAG conformance?

The tool checks for common patterns related to WCAG 2.3.3 (Animation from Interactions, AAA) and 2.2.2 (Pause, Stop, Hide, AA). Note that WCAG 2.3.3 is Level AAA, but implementing it is considered best practice and is required by some laws.

Should I remove all animations for reduced-motion users?

Not necessarily. Animations that convey essential information should be preserved. The recommended approach is to keep opacity/color transitions (which are less likely to cause issues) but disable transform-based motion, parallax, and infinite animations.

Does this tool send my CSS to a server?

No. All analysis runs entirely in your browser using JavaScript. Your CSS never leaves your device.

Related Tools

Contrast Checker

Check WCAG 2.1/2.2 contrast ratios for text and UI components. Supports AA and AAA levels with live preview.

WCAG Checklist

Interactive checklist with all 86 WCAG 2.2 success criteria. Track progress, filter by level, and export your audit results.

Heading Analyzer

Paste your HTML and visualize the heading hierarchy. Detect skipped levels, missing H1s, and structural issues.

Form Checker

Check HTML forms for missing labels, improper associations, and other WCAG form accessibility violations.