WCAG (Level A) SC 2.3.1 Three Flashes or Below Threshold (w3.org)
Issue description
WCAG 2.3.1, “Three Flashes or Below Threshold” aims to protect users with photosensitive epilepsy from seizures that can be triggered by flashing content on web pages. This guideline recognizes that certain types of flashing or flickering visuals can be dangerous for some users and provides clear thresholds to prevent these risks.
Some websites use flashing or flickering content for:
- Animations: Animated elements or transitions that flash or change rapidly.
- Advertisements: Blinking or flashing advertisements.
- Alerts and notifications: Alerts or notifications that flash to attract attention.
WCAG requirements
This guideline sets specific limits for flashing content:
- General flash and red flash thresholds: Web pages should avoid any flashing that exceeds the general flash and red flash thresholds defined by WCAG. These thresholds are based on the frequency and intensity of the flashes.
- Three flashes: Web pages should avoid any content that flashes more than three times in any one-second period.
Consequences of flashing content
- Seizures: For people with photosensitive epilepsy, flashing content can trigger seizures, which can be dangerous and disruptive.
- Headaches and migraines: Flashing content can also cause headaches, migraines, or discomfort for some users.
- Distraction and disorientation: Flashing content can be distracting and disorienting for many users, making it difficult to focus on the content.
Essentially, this guideline ensures that web pages do not contain flashing content that could trigger seizures or cause discomfort for users with photosensitive epilepsy. It promotes inclusivity and provides a safer online experience for everyone.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.3.1, “Three Flashes or Below Threshold” involves ensuring that your web content doesn’t contain any flashing or flickering elements that could trigger seizures or cause discomfort for users with photosensitive epilepsy. Here’s how:
Avoid flashing content
- Remove unnecessary flashing: Remove any flashing or blinking content that is not essential to the functionality or purpose of the website.
- Static alternatives: Replace flashing elements with static alternatives. For example, use a static image instead of a blinking animation.
- Subtle animations: If animations are necessary, use subtle transitions or animations that do not involve rapid changes in brightness or color.
Stay below the thresholds
- General flash and red flash: Ensure that any flashing content stays below the general flash and red flash thresholds defined by WCAG. These thresholds are based on the frequency, intensity, and area of the flashes. Use a flash testing tool (e.g., the Photosensitive Epilepsy Analysis Tool (PEAT)) to check your content. (Trace Rerc – Photosensitive Epilepsy Analysis Tool)
- Three flashes per second: Avoid any content that flashes more than three times in any one-second period.
Provide user controls
- Disable animations: Provide a control that allows users to disable animations or reduce their frequency.
- Alternative versions: Offer alternative versions of the content without flashing elements.
Testing
- Flashing test tools: Use tools like PEAT (Photosensitive Epilepsy Analysis Tool) to analyze your web pages for potentially problematic flashing content.
- User testing: Conduct user testing with people with photosensitive epilepsy to get feedback on the accessibility of your design.
Examples
- Animated banner ads: Replace flashing banner ads with static images or ads with subtle animations.
- Blinking notifications: Use a static notification icon or a subtle animation that doesn’t involve flashing.
- Flashing call-to-action buttons: Use a static button with a clear visual cue, such as a contrasting color or an arrow, instead of flashing.
By following these practices, you can create a safer and more inclusive online experience for everyone, including those with photosensitive epilepsy.
