← All criteria

Operable · Level A · 2.3.1

Three Flashes or Below Threshold

Nothing on a page should flash more than three times in any one-second period, unless the flash is small and dim enough to fall under a defined brightness/area threshold — because rapid flashing, especially saturated red flashing, can trigger seizures in people with photosensitive epilepsy.

  • Seizure / vestibular
The problem, in practice — select the image to enlarge it
A large red 'EMERGENCY ALERT: EVACUATE THE BUILDING IMMEDIATELY!' banner, compared as a seizure-risk flash rate versus a safe one. In the problem example, a timeline shows the alert flashing 5 times within one second (at 0s, 0.2s, 0.4s, 0.6s, and 0.8s), captioned as rapid flashing that could trigger seizures for people with photosensitive epilepsy. In the compliant example, the same alert flashes only 3 times within one second (at 0s, 0.4s, and 0.8s), the maximum allowed rate. A second compliant example shows a small, dim 'New message' notification banner that flashes below the brightness/area threshold, labeled 'Small and dim flash' with low brightness, small area, and marked Safe. A summary row explains why it matters (rapid or intense flashing, especially red, can trigger seizures in people with photosensitive epilepsy), how to comply (no more than three flashes per one-second period unless small and dim enough to fall under the threshold), and who it helps.

How to recognize it

Look for rapidly flashing content: a strobing animation, a warning banner that flashes on and off fast, an ad or GIF cycling between bright and dark frames quickly. If it flashes more than three times per second and covers a large enough portion of the screen, it's a candidate failure regardless of intent — this isn't about whether the flashing was decorative or accidental, it's purely about the flash rate and brightness. Red flashing gets extra scrutiny since saturated red-to-dark transitions are especially likely to trigger seizures. The consequence of getting this wrong is uniquely severe compared to most accessibility failures: it can cause an actual physical seizure, not just a usability obstacle.

How to fix it

Simplest fix: don't build anything that flashes faster than three times per second. If a flashing effect is genuinely wanted, keep it below the defined thresholds — small enough in on-screen area and low enough in relative luminance change — or slow it down below three flashes per second entirely. When in doubt, there's no reason to risk it: a slower transition or a static state change (fading, rather than flashing) achieves most of the same visual attention-getting effect without the seizure risk.

Example

Avoid

@keyframes strobe {
  0%, 100% { background: white; }
  50% { background: red; }
}
.alert { animation: strobe 0.2s infinite; }
/* flashes 5 times per second across a large area */

Prefer

@keyframes fade-attention {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.alert { animation: fade-attention 2s infinite; }
/* slow, low-contrast pulse, well under the flash threshold */

Resources