WCAG 2.3.1: How to Prevent Seizure-inducing Flashing Content

Level A Operable WCAG 2.3.1

What This Criterion Requires

WCAG 2.3.1 requires that 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. A flash is defined as a pair of opposing changes in relative luminance that can cause seizures in people with photosensitive epilepsy. The general flash threshold is exceeded when there are more than three flashes per second where the flashes are sufficiently large and bright. The red flash threshold is exceeded when any pair of opposing transitions involves a saturated red. This criterion is unique among WCAG requirements because it addresses a direct physical safety concern -- flashing content can trigger seizures that pose serious health risks. Content that flashes includes animations, videos, GIFs, dynamic advertisements, strobe effects, rapid slideshow transitions, and even certain CSS animations that create flashing effects. The safest approach is to ensure no content flashes more than three times per second. If flashing content is necessary, it must be kept below the size and luminance thresholds defined in the WCAG specification.

Why It Matters

Photosensitive epilepsy affects approximately 1 in 4,000 people, and flashing content can trigger seizures that range from mild disorientation to loss of consciousness and potentially life-threatening convulsions. This is not a matter of comfort or convenience; it is a direct health and safety issue. The most infamous incident occurred in 1997 when a Pokemon television episode featuring rapid red and blue flashing caused seizures in over 600 viewers in Japan. Similar incidents have occurred on the web with flashing advertisements, video content, and animated graphics. Unlike other accessibility failures that cause inconvenience or difficulty, triggering a photosensitive seizure can cause immediate physical harm. Users with photosensitive epilepsy cannot simply 'look away' fast enough, as seizures can be triggered within fractions of a second of exposure. Beyond epilepsy, flashing content can cause discomfort, headaches, and disorientation for many users, including those with migraines, vestibular disorders, and certain cognitive conditions. Ensuring content does not flash excessively is a fundamental safety requirement.

Common Failures and How to Fix Them

CSS animation creating rapid flashing effect

A CSS animation rapidly alternates between light and dark colors or between high-contrast colors at a rate exceeding three flashes per second, potentially triggering seizures in users with photosensitive epilepsy.

Inaccessible

<style>
  @keyframes flash {
    0%, 100% { background-color: #ffffff; }
    50% { background-color: #000000; }
  }
  .attention-banner {
    animation: flash 0.2s infinite;
    /* Flashes 5 times per second - dangerous */
  }
</style>
<div class="attention-banner">SALE ENDING SOON!</div>

Accessible

<style>
  @keyframes gentle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
  .attention-banner {
    animation: gentle-pulse 2s ease-in-out infinite;
    background-color: #fef3cd;
    /* Slow, subtle pulsing - safe */
  }
  @media (prefers-reduced-motion: reduce) {
    .attention-banner {
      animation: none;
    }
  }
</style>
<div class="attention-banner">SALE ENDING SOON!</div>

Auto-playing GIF or video with strobe effects

An animated GIF or video containing strobe-like effects or rapid brightness changes is displayed on the page without any warning or control, exposing users to potentially seizure-inducing content.

Inaccessible

<img src="/images/celebration-strobe.gif" alt="Celebration animation">
<!-- GIF contains rapid flashing lights that exceed 3 flashes per second -->

Accessible

<!-- Option 1: Use a static image with play control -->
<div class="safe-animation">
  <img src="/images/celebration-static.jpg" alt="Celebration scene" id="celebration-img">
  <button onclick="playAnimation()" aria-label="Play celebration animation (contains flashing lights)">Play animation</button>
  <p class="warning">Warning: This animation contains flashing lights that may affect users with photosensitive epilepsy.</p>
</div>

<!-- Option 2: Replace with a non-flashing alternative -->
<img src="/images/celebration-no-strobe.gif" alt="Celebration animation with confetti">
<!-- GIF has been edited to remove strobe effects -->

How to Test

Review all animated content on the page including CSS animations, GIFs, videos, and JavaScript-driven animations for rapid flashing or strobe-like effects.
Use the Photosensitive Epilepsy Analysis Tool (PEAT) or the Harding Test to analyze video content for flash rates that exceed three per second.
Check that the page respects the prefers-reduced-motion media query and reduces or eliminates animations for users who have enabled this setting.
Verify that any content containing potentially seizure-inducing effects includes a warning before the content is displayed and requires user action to play.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Related WCAG Criteria

WCAG 2.2.2