# Content does not flash more than 3 times per second

- **Pattern:** `ab-000128` (`accessibility-wcag.robust.no-flash`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000128
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000128)

## Why it matters

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.

## Severity rationale

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.

## Remediation

Replace any high-frequency flashing animation with a smooth, low-frequency alternative that pulses rather than flickers.

```css
/* 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.

## Detection

- **ID:** `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:

  ```css
  /* 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 */
  ```

## External references

- wcag 2.3.1
- section-508 501.1

Taxons: accessibility

HTML version: https://auditbuffet.com/patterns/ab-000128