Content that flashes more than three times per second can induce photosensitive seizures in users with photosensitive epilepsy — an estimated 3 in 100,000 people worldwide, with real documented harm. WCAG 2.2 SC 2.3.1 (Three Flashes or Below Threshold) is a Level A requirement. This is not a theoretical risk: the Pokémon seizure incident in 1997 caused over 600 hospitalizations. Strobe-effect loading animations and attention-seeking flashing banners are the most common sources.
Low because most applications do not produce high-frequency flashes — this applies only to explicit animations with rapid brightness cycling — but when it occurs it poses a direct physical safety risk and violates WCAG 2.2 SC 2.3.1 at Level A.
Replace any high-frequency flashing animation with a smooth, low-frequency alternative that pulses rather than flickers.
/* Bad — flashes at ~2Hz (above the danger threshold on short loops) */
@keyframes flash {
0%, 49% { opacity: 1; background: white; }
50%, 100% { opacity: 1; background: black; }
}
.bad-loader { animation: flash 0.3s infinite; } /* 3.3 Hz — dangerous */
/* Good — gentle fade at 0.5 Hz, well below the 3Hz threshold */
@keyframes pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.loader { animation: pulse 2s ease-in-out infinite; }
Also apply @media (prefers-reduced-motion: reduce) { .loader { animation: none; } } to disable all motion for users who have requested it in their OS settings.
ID: accessibility-wcag.robust.no-flash
Severity: low
What to look for: Enumerate every relevant item. Look for animations, transitions, or content updates. Check for any rapid flashing or brightness/color changes. Use a tool like Photosensitivity Analyzer or manually count flashes per second.
Pass criteria: No content flashes more than 3 times per second. No rapid brightness or color changes that could trigger photosensitivity.
Fail criteria: Content flashes more than 3 times per second.
Skip (N/A) when: The project has no animations or dynamic content.
Detail on fail: Example: "Loading spinner flashes white and dark gray more than 3 times per second"
Remediation: Reduce flash frequency or use solid animations:
/* Bad: flashing animation */
@keyframes flash {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Good: smooth fade */
@keyframes fade {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
animation: fade 2s infinite; /* 0.5 Hz = safe */