Content does not flash more than 3 times per second

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.

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: 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 */