<?xml version="1.0" encoding="utf-8"?>

Avoid flashing elements

Avoid flashing elements Bad Practice
Avoid flashing elements Best Practice

Photosensitive epilepsy occurs when flashing or flickering light triggers seizures. In digital interfaces, these triggers can come from various sources like video content, animated GIFs, or programmed animations. Even seemingly subtle effects can pose risks if they create rapid light changes.

Understanding flash thresholds helps create safer digital experiences. A problematic flash occurs when there are rapid shifts in brightness (relative luminance) that exceed specific measurements.

Two key factors determine if a flash is dangerous:

  1. The brightness change must be 10% or greater between frames
  2. The darker frame must have a relative luminance below 0.80 (where 1.0 represents white)

For example, imagine a white background (luminance = 1.0) that quickly switches to a dark gray (luminance = 0.75). This 25% change in brightness, combined with the dark gray being below 0.80, would qualify as a problematic flash pattern. Common culprits include auto-playing videos, carousel transitions, and hover effects with dramatic contrast changes.

The safest approach is avoiding flash patterns entirely. When motion or animations are necessary, provide clear advance warnings and user controls to turn off such content within your product.

Improve your UX & Product skills with interactive courses that actually work