2.3.1 Three Flashes or Below Threshold

Level: A | Principle: Operable | Since: WCAG 2.0 | Automation: Manual

What This Means

No content on the page may flash more than three times per second, unless the flash is below the general flash and red flash thresholds. Flashing content can trigger seizures in people with photosensitive epilepsy — this is a safety-critical requirement, not just a usability concern.

The thresholds are defined precisely: a flash is a pair of opposing changes in luminance that can cause seizures. If the flashing area is small enough (less than 25% of 10 degrees of visual field), it is also considered safe.

Who This Affects

Users with photosensitive epilepsy — flashing content can trigger life-threatening seizures
Users with migraine conditions — flashing can trigger severe migraine episodes
Users with vestibular disorders — rapid flashing can cause dizziness and disorientation

Common Pitfalls

1. Flashing banner advertisements

Animated ads that rapidly alternate between light and dark frames can exceed the three-flash threshold.

2. Video content with strobe effects

<!-- Bad: video with strobe lighting effects -->
<video autoplay>
  <source src="concert-footage.mp4" type="video/mp4">
</video>

Videos with strobe lights, lightning effects, or rapid scene changes may exceed the threshold.

3. CSS animations with rapid color changes

/* Bad: rapid flashing animation */
@keyframes flash {
  0%, 100% { background: white; }
  50% { background: black; }
}

.alert {
  animation: flash 0.2s infinite; /* 5 flashes per second — dangerous */
}

How to Fix

Limit flash frequency

/* Good: slow, gentle pulse instead of rapid flash */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.alert {
  animation: pulse 2s ease-in-out infinite; /* less than 1 flash per second */
}

Add a warning and opt-in for flashing content

<!-- Good: warn users before showing flashing content -->
<div class="warning" role="alert">
  <p>The following video contains flashing lights that may affect photosensitive viewers.</p>
  <button onclick="playVideo()">I understand, play video</button>
</div>

Respect prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  .alert {
    animation: none;
  }
}

Use the PEAT tool for video content

For pre-recorded video, run it through the Photosensitive Epilepsy Analysis Tool (PEAT) to verify it does not exceed flash thresholds.

How to Test

Watch all animated content on the page (GIFs, CSS animations, JavaScript animations, videos) and visually count luminance changes per second.
Look specifically for rapid alternations between light and dark states (flashes) in banners, videos, and animated elements.
For any content that appears to flash more than 3 times per second, measure the flashing area. If it occupies more than 25% of 10 degrees of visual field (roughly a 341x256 pixel area), it violates this criterion.
Check if the site respects prefers-reduced-motion for animations that might flash.
Pass: No content flashes more than 3 times per second, or flashing content is below the general flash and red flash thresholds.
Fail: Any content flashes more than 3 times per second in an area larger than the threshold, with no warning or option to disable it.

axe-core Rules

No automated axe-core rules. This criterion requires manual testing.