Guideline 2.3 - Seizures and Physical Reactions
Do not design content in a way that is known to cause seizures or physical reactions.
Success criterion 2.3.1. - Three Flashes or Below Threshold
Do not let your website trigger seizures.
People with photosensitive seizure disorders, such as photosensitive epilepsy, can have a seizure triggered by content that flashes at certain frequencies for more than a few flashes. Individuals affected with such disorders are even more sensitive to red flashing than other colors, so WCAG provides special tests for saturated red flashing. WCAG guidelines for this success criterion are based upon the broadcast industry standards adapted for computer screens (instead of TV, which is viewed from a larger distance).
While flashing can also be caused by the display and the computer rendering the page, as that's something you don't have control over, this success criterion applies only to the content itself.
This success criterion requires that web pages do not contain anything that flashes more than three times in any one-second period, or that the flash is below the general flash thresholds and red flash tresholds. Please note that these are very strict standards and that you should take care to follow them properly when claiming flashes are below thresholds.
While the Level A success criterion we're discussing here allows for a certain threshold for flashing, taking into account the relative luminance of the image and the combined area of the flashes, we recommend not having three or more flashes in any one-second period on the whole web page, as is required by the Level AAA Success Criterion 2.3.2. - Three Flashes.
Examples of implementation provided by WCAG are:
- A Web site has a video of the muzzle flash of machine gun fire but limits the size of the flashing image to a small portion of the screen below the flash threshold size.
- A movie with a scene involving very bright lightning flashes is edited so that the lightning only flashes three times in any one-second period.
Techniques and notes
WCAG suggests:
- ensuring that no component of the content flashes more than three times in any one-second period
- keeping the flashing area small enough
- using a tool to ensure that content does not violate the general flash threshold or red flash threshold
Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion.
While this is not in line with WCAG, in cases where no techniques can prevent flashing or flashing is essential to the content provided, we suggest informing the user about flashing and collecting user consent for flashing before it starts. For instance, a video showing explosion footage on a news site might not be below the flash threshold and might not be limited to a small enough area. In this case, you could show a warning like "This video contains flashes that may cause seizures" and play it only after the user has confirmed flashing is okay.
Note that flashes can also be caused by styling bugs. For instance, setting color: inherit during a transition may cause flashing in certain cases.
.accordion {
// This accordion is :active when opened, and will blink on opening because of conflicting rules.
// Still, this example isn't a WCAG-defined flash, but keep in mind that this class of issues might cause flashing.
background-color: white;
color: black;
transition: all 1s ease-in;
&:hover {
background-color: blue;
color: black;
}
&:active {
color: inherit;
}
}