Task

Use subtle animations that don't flash more than recommended

Category: 
Animation
When: 
Design
Check as complete

Significant on-screen flashing can trigger seizures. Animations and background videos can also be distracting and disruptive for people with cognitive disabilities like ADHD.

3 flashes or below threshold

What constitutes excessive motion can be subjective, but often refers to motion that takes up more than 10% of the central visual field.

"Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds."

WCAG

Let’s look at how to apply these recommendations.

Avoid flashing content if it isn’t necessary

If you do have flashing content, make sure it flashes less than 3 times per second.

Avoid certain visual patterns that can trigger seizures, like:

  • Intense strobe lights
  • Rapid flashes or alternating patterns with different colors, especially contrasting colors like red and green
  • Heavy contrast between 2 frames (black to white, bright blue to red, etc.)
  • Patterns, like stripes with contrasting colors

Reduce the size of the flashing content to be smaller than 341x256 on desktop, or approximately 10% of the central visual field.

Use interactive motion with caution

Motion that’s triggered by an action, like scrolling, can cause dizziness, nausea, and headaches in people with vestibular disorders.

Unless the animation is essential to the functionality of the page, a user should be able to disable motion triggered by interaction.

Be sure your animations:

  • Include a button or toggle to disable animations
  • Don’t block users from accessing page content
  • Avoid parallax effects or use them sparingly in small fields since they can be especially triggering
  • Keep movement within background videos minimal
  • Provide full playback controls on all background videos and animations that play automatically and last 5 seconds or more. See also Provide controls to pause all media

WCAG reference:

2.3.1 Three Flashes or Below Threshold

Back to checklist

Total progress

Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
Celebration horn and streamer emoji
0 / 0
Hide progress
Show progress