Seizures and physical reactions

Limit content to 3 flashes or below (Level A, 2.3.1)

Some types of seizures can be triggered by flashing or flickering content. Red flashes are worse than other colours for people with photosensitive epilepsy or similar conditions. When possible, avoid using flashing or flickering content. If it’s necessary, it must not have more than 3 flashes in a one-second period. They also must meet the general and red flash thresholds defined by WCAG. These are specific brightness thresholds.

The general flash threshold is the maximum brightness of flashes. To meet this threshold, they must be below 20.0 candela per square meter (cd/m²). The red flash threshold is even dimmer at below 6.0 cd/m².

Controlling flash speed

You can use Cascading Style Sheets (CSS) to define the duration and time between flashes. By adjusting the values of animation-duration and animation-timing-function, you can control the flash speed.

In this example, the flash animation has a duration of 1 second. The animation-timing-function property is set to linear, meaning the time interval between flashes is constant.

Controlling the brightness of flashes

You can also use CSS to adjust the brightness. One way to do this is by adjusting the opacity using CSS keyframe animations. By setting it to a lower value during the animation, you can reduce the overall brightness to meet the thresholds.