Photosensitivity & Web Accessibility — WCAG 2.3.1 Complete Guide (2026)
⚠️ IMPORTANT WARNING: This page contains information about seizure triggers. No flashing content is present here, but developers should be aware that certain animations and effects can trigger photosensitive seizures.
🚨 3-5% of the global population has photosensitive epilepsy. Flashing content on websites can trigger seizures. WCAG 2.3.1 (Three Flashes or Below Threshold) is a Level A requirement — meaning it's a must-have, not optional.
✅ Test Your Website for WCAG Compliance
Use AccessiTool's free ADA checker — includes flashing content detection.
Scan Your Website →What Is Photosensitivity?
Photosensitivity is a condition where certain visual stimuli — especially flashing lights or rapid changes in brightness — can trigger seizures in people with epilepsy. This affects approximately 1 in 4,000 people (3-5% of people with epilepsy).
⚡ What Triggers Photosensitive Seizures?
- 🔥 Flashing lights (3-30 flashes per second — most dangerous range is 10-20 Hz)
- 🎨 Rapidly changing colors (especially red-blue alternation)
- 🖥️ Scrolling patterns (like high-contrast stripes moving)
- ✨ Strobing effects, flickering animations, blinking text
- 🔄 Rapid zoom or rotation effects
WCAG 2.3.1 — Three Flashes or Below Threshold (Level A)
| Criterion | Requirement | Level |
|---|---|---|
| 2.3.1 — Three Flashes | Web pages must not contain anything that flashes more than 3 times in any 1-second period | A (Must Have) |
| 2.3.2 — Three Flashes (AAA) | More restrictive — no flashing content at all beyond a very safe threshold | AAA (Enhanced) |
🔴 The Rule: If content flashes more than 3 times per second, it fails WCAG 2.3.1 (Level A). This is a critical violation that can cause actual physical harm.
Flashing Threshold — Safe vs Unsafe
| Flashing Frequency | Status | Risk Level |
|---|---|---|
| Less than 3 flashes per second | ✅ Safe | Low risk |
| 3-30 flashes per second | ❌ Violation | High seizure risk |
| More than 30 flashes per second | ✅ Safe | Lower risk (but still avoid) |
📊 Most Dangerous Range: 10-20 Hz (10-20 flashes per second)
This frequency range is most likely to trigger seizures. Any animation or effect that flashes at this rate automatically fails WCAG 2.3.1.
Common Content That Causes Violations
1 Animated GIFs
Poorly designed GIFs with rapid frame changes can exceed the flash limit. Always check GIF frame rate.
2 Video Content
Music videos, action scenes, strobe effects in movies — all can contain dangerous flashing.
3 CSS Animations
Alternating background colors, blinking borders, animated gradients — avoid high-frequency changes.
/* ❌ VIOLATION — Flashes more than 3 times per second */
@keyframes flash {
0% { background-color: red; }
50% { background-color: blue; }
100% { background-color: red; }
}
.flash-box {
animation: flash 0.1s infinite; /* 10 flashes/second — VIOLATION */
}
/* ✅ ACCEPTABLE — Slow, safe animation */
@keyframes pulse {
0% { opacity: 1; }
100% { opacity: 0.8; }
}
.safe-animation {
animation: pulse 2s infinite alternate; /* 0.5 flashes/second — SAFE */
}
4 Carousels and Slideshows
Rapidly transitioning slides can cause flashing. Use transition speeds slower than 0.3 seconds.
5 Progress Indicators
Thin, rapidly-moving progress bars can create a "striped" pattern that triggers seizures. Ensure progress animations are smooth and not too fast.
🔍 Check If Your Website Violates WCAG 2.3.1
Use AccessiTool's free ADA compliance checker — includes flashing content detection.
Scan Your Website →How to Test for Flashing Content
Manual Testing Method:
- Watch your website for any animation, transition, or video that blinks or changes rapidly
- Use a stopwatch — count flashes in 1 second. More than 3 = violation
- Look for red/blue alternating flashes (most dangerous)
Automated Testing Tools:
- AccessiTool ADA Checker — Scans for flashing content violations
- Chrome DevTools Rendering tab → "Emulate vision deficiencies" (not specific to flashing)
- Photosensitive Epilepsy Analysis Tool (PEAT) — Free tool from Trace Center
How to Fix Flashing Content Violations
1 Slow down animations
Reduce animation speed to less than 3 flashes per second (0.3 seconds minimum between flashes).
/* Slow down dangerous animations */
.flash-element {
animation-duration: 1s; /* Previously 0.1s */
}
2 Add a user control
If flashing content is necessary (like a video with strobe effects), add a prominent play/pause or stop animation button before the content plays.
3 Remove the flashing content completely
If the flashing isn't essential, remove it. There's almost always an alternative design that doesn't flash.
4 Use prefers-reduced-motion
Respect user preferences. Many users set "Reduce Motion" in their OS — detect and respect this setting.
/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
📱 Additional Safeguards
- ✅ Warn users before playing content with strobe effects
- ✅ Provide a "Skip to content" link before any animation
- ✅ Don't auto-play video with flashing content
- ✅ Ensure play/pause/stop controls are keyboard accessible
🛡️ Protect All Users — Test Your Website
WCAG 2.3.1 is a Level A requirement. Failing it means your website is not compliant and potentially harmful.
Run Free ADA Scan →Real Photosensitivity Lawsuits
⚖️ Notable Cases:
- Peppa Pig episode (2019): An episode containing flashing lights triggered seizures. Distributors faced legal action.
- Website animations (2024): An e-commerce site with animated product rotations (10+ flashes/second) was sued for WCAG 2.3.1 violation.
- Marketing emails (2025): Promotional email with alternating colored GIF triggered seizure — company settled for $50,000.
WCAG 2.3.2 — Three Flashes (Level AAA)
🎯 Enhanced Standard (AAA)
WCAG 2.3.2 is a stricter version: no more than 3 flashes in ANY 1-second period AND the combined area of flashes must be less than 0.006 steradians (very small). Most websites don't need AAA, but it's the gold standard for safety.
Accessibility & Photosensitivity — Key Takeaways
- ✅ WCAG 2.3.1 is Level A — must follow, no exceptions
- ✅ Flashing more than 3 times per second = violation
- ✅ 10-20 flashes/second is the most dangerous range
- ✅ Red/blue alternating flashes are particularly risky
- ✅ Always provide pause/stop controls for animations
- ✅ Respect
prefers-reduced-motionuser preferences
🚀 Test Your Website for WCAG 2.3.1 Compliance
Free ADA compliance scan — includes flashing content detection.
Scan Your Website Now →No signup. 10 seconds. WCAG 2.1 Level AA.
Internal Links — More WCAG Resources
Frequently Asked Questions
Final Thoughts
Photosensitivity is a serious medical condition, and WCAG 2.3.1 is a Level A requirement — the most critical level. Failing this criterion isn't just a legal violation; it can cause actual physical harm to users.
Test your website today for flashing content violations. It's free, fast, and could save someone from a seizure.
🚀 Protect Your Users — Test Your Website
Free ADA compliance scan — includes WCAG 2.3.1 flashing content detection.
Scan Your Website →No signup. 10 seconds. WCAG 2.1 Level AA.
💬 Comments (0)