Goal
Ensure that no content flashes more than three times per second, or if it does, the flashes are below the general flash and red flash thresholds, to prevent seizures or other physical reactions in sensitive users.
Key Points
- Rapid flashing or strobing visuals can trigger photosensitive epilepsy.
- Applies to any visible element — video, animation, GIF, SVG, or CSS transition.
- Safe if:
- The flashing is no more than 3 times per second, or
- The combined area of flashes is small and low contrast,
- Or the flashing is outside the red spectrum and not intense.
- Audio or light-based notifications should never simulate strobe-like behavior.
Short Summary
Avoid rapid or high-contrast flashing elements. If animation is necessary, keep it below 3 flashes per second or reduce intensity and contrast.
Example Issue and Fix
Rapid flashing warning animation
Fail
<div x-data="timingControl" class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<p class="text-gray-700 font-medium !m-0">Warning (flashes rapidly):</p>
<div class="w-32 h-32 bg-red-600 animate-pulse-fast rounded"></div>
</div>
Warning (flashes rapidly):
Pass
<div x-data="timingControl" class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<p class="text-gray-700 font-medium !m-0">Warning (accessible animation):</p>
<div class="w-32 h-32 bg-yellow-500 animate-safe-pulse rounded"></div>
</div>
Warning (accessible animation):
Quick Checklist
- No flashing element exceeds 3 flashes per second
- Avoid bright red or white flashes
- Reduce contrast changes in animations
- Test GIFs, videos, and CSS animations for flashing frequency
- Provide a pause or disable animation option if applicable
- Follow CSP best practices — use external or Alpine-managed scripts, no inline JS