WCAG 2.3.1 Three Flashes or Below Threshold: How to Prevent Dangerous Flashing Content

WCAG 2.3.1 is the success criterion that prevents content that can trigger photosensitive seizures. It says content must not flash more than three times in any one second period, unless the flashes fall below the guideline thresholds. This page explains what counts as a flash, how to test for dangerous flashing, and how to fix or avoid it.

What WCAG 2.3.1 requires

This is a Level A success criterion in Guideline 2.3, Seizures and physical reactions. The rule has two parts:

• Do not show anything that flashes more than three times in any one second period.
• If content flashes, it must be below the defined thresholds for general flash or red flash to be allowed.

Why this matters

Some people have photosensitive epilepsy. Rapid changes in brightness, colour, or contrast can trigger seizures. Avoiding problematic flashing reduces risk for those users and is required under WCAG for accessibility compliance.

What counts as a flash

A flash is a rapid, repeated change in luminance or contrast. Typical sources are:

• Animated GIFs with rapid frame changes
• Video segments with fast cuts or strobe effects
• CSS animations that toggle background colour, visibility, or opacity quickly
• Slideshows that switch images rapidly without transition

Exceptions and the threshold concept

The criterion allows flashes up to three occurrences in one second. It also allows flashes that are below the general flash and red flash thresholds defined by the guidelines. Those thresholds combine frequency, contrast, and colour conditions to estimate risk. If you are unsure whether a sequence is below a threshold, assume it is not and take steps to remove the flashing.

How to test for dangerous flashing

Use both automated and manual checks. Automated tools flag obvious problems. Manual checks catch complex cases.

Quick manual test

1. View the content at normal speed and normal brightness.
2. Record the screen with a camera or software at 60 frames per second.
3. Play the recording and count the number of visible flashes within each one second window. More than three is a fail unless you know the flashes are below threshold.

Developer checks

• Inspect CSS animations and keyframes. Look for abrupt visibility or colour changes faster than 333ms per cycle.
• Inspect video tracks for rapid cuts or intense strobe frames.
• Run a photosensitive epilepsy analysis tool where available to check video or animated content.

How to fix flashing content

Replace or modify any element that flashes frequently. The following approaches work in most cases.

Reduce frequency and intensity

• Slow the animation so it flashes three times or fewer in a second. For a single flash cycle this means making the cycle longer than 333 milliseconds.
• Reduce contrast and abrupt luminance changes. Use gradual transitions rather than instant swaps.

Use safer animation techniques

• Prefer opacity or transform transitions over rapid colour or brightness changes.
• Use easing and longer durations. A 500ms fade is far safer than a 50ms color toggle.

Provide user controls

• Give users a way to pause, stop, or hide the animation. Make the control keyboard accessible and announce its role with WAI-ARIA attributes, for example using aria-pressed for toggle buttons and aria-controls to point to the animated region.
• Do not depend solely on scripts that users might block. Ensure controls are usable without extra downloads.

Respect reduced motion preferences

Use the prefers-reduced-motion media query to disable non-essential animations for users who ask for less motion. But remember that prefers-reduced-motion is not a substitute for removing dangerous flashing. If an animation strobe remains, disable it regardless of the setting.

Step-by-step: convert a flashing banner to safe animation

1. Identify the flashing element and note how often it flashes under normal conditions.
2. Stop the automatic flashing for testing. Add a visible pause control so you can toggle the animation.
3. Replace instant swaps with fades. Swap visibility changes for opacity transitions over at least 300 to 500 milliseconds.
4. Limit the number of on/off cycles so there are three or fewer flashes per second, or remove the flashing entirely.
5. Test again with a 60 fps recording and with an automated PSE checker where available.
6. Add a keyboard-focusable control that stops the animation and label it with aria-label and aria-controls.

Common mistakes

• Assuming prefers-reduced-motion alone makes flashing safe
• Using GIFs or video clips without checking frame rate and brightness
• Adding a visually hidden stop control that is not keyboard accessible
• Relying only on automated tools and skipping manual checks

Launch checklist

• Record and count flashes in one second windows for any animated area
• Ensure transitions are gradual rather than instant
• Provide an accessible pause/stop control with WAI-ARIA where relevant
• Respect prefers-reduced-motion but also remove any high-risk strobe effects
• Test with real users when possible or consult clinical guidance for high-risk content

When to consult an expert

If you publish video or marketing creative that intentionally uses flashing or strobe effects, ask an accessibility specialist or a medical adviser before release. High-profile campaigns and broadcast media often require formal photosensitive epilepsy review.

Further reading

Read the official WCAG documents for the authoritative rules and test procedures. Also consult resources from epilepsy foundations and accessibility organisations for practical testing tools and guidance.