Skip to main content
Operable WCAG 2.3.1

2.3.1 Three Flashes or Below Threshold

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.

Level A Critical WCAG 2.0 (new) WCAG 2.1 WCAG 2.2

What this rule means

WCAG 2.3.1 protects users from content that could trigger seizures. Web pages must not contain anything that flashes more than three times per second, unless the flashing content is small enough and dim enough to fall below the general flash threshold and the red flash threshold. This is a critical safety criterion — violations can cause physical harm.

The general flash threshold is exceeded when there are three or more flashes within a one-second period and the combined area of the flashing content is sufficiently large (more than 25% of 10 degrees of visual field, or roughly a 341 x 256 pixel area at typical viewing distance). The red flash threshold applies specifically to transitions involving saturated red. Content can flash more than three times per second only if both thresholds are not exceeded.

Why it matters

Approximately 1 in 4,000 people have photosensitive epilepsy, a condition where flashing lights or rapidly changing visual patterns can trigger seizures. Seizures range from brief loss of awareness to full convulsions and can be medically dangerous. The most infamous incident was a 1997 Pokemon episode that caused seizures in nearly 700 Japanese children due to rapidly flashing red and blue animations.

Beyond epilepsy, flashing content can cause migraines, dizziness, nausea, and disorientation in people with photosensitivity or vestibular disorders. Unlike most accessibility issues where the consequence is inconvenience or inability to use a feature, violations of this criterion can cause immediate physical harm. This makes it one of the most critical WCAG requirements.

Related axe-core rules

There are no automated axe-core rules for this criterion. Detecting flash frequency and threshold violations requires frame-by-frame video analysis with specialized tools like the Photosensitive Epilepsy Analysis Tool (PEAT) or Harding test. Automated DOM analysis cannot detect flashing content reliably.

How to test

Testing requires analyzing visual content for flash frequency and size.

  1. Review all video content, animations, GIFs, and dynamic visual effects on the page.
  2. For any content that appears to flash, count the number of flashes per second. More than three per second is a potential violation.
  3. Use the Photosensitive Epilepsy Analysis Tool (PEAT) to analyze video content for threshold violations.
  4. Check CSS animations and JavaScript-driven visual changes for rapid color or luminance transitions.
  5. Pay special attention to transitions involving red — these have a lower threshold for triggering seizures.
  • Test at full screen and at typical viewing sizes to assess whether the flashing area exceeds the size threshold.

How to fix

Eliminate or reduce flashing content to stay within safe thresholds.

Avoid rapid visual transitions

/* Bad: fast flashing animation */
@keyframes flash-danger {
  0%, 100% { background: #ff0000; }
  50% { background: #000000; }
}
.alert {
  animation: flash-danger 0.2s infinite; /* 5 flashes/sec! */
}

/* Good: gentle pulsing animation */
@keyframes pulse-gentle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.alert {
  animation: pulse-gentle 2s ease-in-out infinite;
}

Provide a way to disable animations

/* Respect prefers-reduced-motion */
@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;
  }
}

Safe video embedding

<!-- Warn users about potentially problematic content -->
<div class="video-container">
  <div class="flash-warning" role="alert">
    <p>
      <strong>Warning:</strong> This video contains
      flashing lights that may not be suitable for
      people with photosensitive epilepsy.
    </p>
    <button onclick="playVideo()">I understand, play video</button>
  </div>
  <video id="video" controls preload="metadata"
    poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

<script>
function playVideo() {
  document.querySelector('.flash-warning').hidden = true;
  document.getElementById('video').play();
}
</script>

Common mistakes

  • Animated GIFs with rapid frame changes that exceed three flashes per second.
  • CSS animations that rapidly toggle between high-contrast colors (especially involving red).
  • Video content with strobe effects, lightning, or rapid scene changes that was not analyzed with PEAT.
  • Game-like interfaces with explosion effects, screen flashes on hit, or rapid visual feedback.
  • Auto-playing video content with no warning about flashing and no way to stop it before it plays.
  • Ignoring the prefers-reduced-motion media query, which signals user sensitivity to motion and flashing.

Resources