WCAG 2.3.1: Three Flashes or Below Threshold

WCAG 2.3.1, known as “Three Flashes or Below Threshold,” is a crucial Success Criterion at Level A, primarily focused on preventing content from causing seizures in individuals with photosensitive epilepsy. It mandates that web content must not contain anything that flashes more than three times within any one-second period, unless the flashes are below specific general flash and red flash thresholds.

This criterion ensures that users can interact with web pages without risking their health and safety due to rapidly flashing or intensely bright content. Adhering to this guideline is not just about compliance; it’s about safeguarding vulnerable users from potentially severe medical incidents.

WCAG 2.3.1: Three Flashes or Below Threshold

This success criterion directly addresses the danger posed by certain types of visual content to individuals with photosensitive epilepsy. Flashing content, especially with high contrast and specific frequencies, can trigger seizures. By setting clear limits on the frequency and intensity of flashes, WCAG 2.3.1 aims to create a safer online environment for everyone.

Why This Criterion Matters

• Accessibility Impact: Preventing Seizures

  The primary impact of this criterion is to prevent seizures in individuals with photosensitive epilepsy. For these users, certain visual stimuli, particularly rapid flashes of light, can induce neurological events that range from mild discomfort to severe, life-threatening grand mal seizures. Ensuring compliance is paramount for user safety.

• User Groups Affected

  Individuals with photosensitive epilepsy are the most directly affected. This condition causes seizures in response to flickering lights or certain visual patterns. While relatively rare in the general population, the consequences of exposure to triggering content can be severe, making this criterion essential for a significant, albeit specific, user group.

• Severity

  The potential for physical harm makes this one of the most critical WCAG criteria. Unlike other accessibility issues that might cause inconvenience or difficulty, non-compliance with 2.3.1 can lead to serious health crises, loss of consciousness, and secondary injuries from falls or other incidents during a seizure. This elevates its importance significantly.

Understanding the Success Criterion

The full text of WCAG 2.3.1 states: “Web pages do not contain anything that flashes more than three times in any one-second period, or the flash is below the general flash threshold and red flash threshold.”

To comply, content creators and developers must understand the specific definitions and thresholds:

• General Flash Threshold

  A sequence of flashes is above the general flash threshold if both of the following are true:

  1. There are a pair of opposing changes in relative luminance of 25% or more relative to the maximum luminance of the screen.
  2. The area of the flashing content simultaneously occupies more than 10 degrees of visual field on a screen (approximately 25% of any given 3840 x 2160 pixel rectangle on a 24-inch screen at 22 inches viewing distance) or 0.006 steradian at a typical viewing distance.

  What counts as a flash? A flash is defined as a pair of opposing changes in relative luminance. This means a rapid shift from light to dark or dark to light counts as one flash. For example, going from black to white and back to black within a short period counts as two flashes (black-white, white-black).

• Red Flash Threshold

  Even if the general flash threshold is not met, a sequence of flashes is still dangerous if it involves saturated red. A flash is above the red flash threshold if a pair of opposing flashes of saturated red occurs. Specifically, it involves the display of any saturated red (where the sum of the RGB values for the red component (R) is greater than or equal to 80% and the difference between the red component and the sum of the green (G) and blue (B) components (R – (G+B)) is greater than or equal to 80% of the maximum possible value for (R – (G+B))).

  The reason for the specific red flash threshold is that red light is particularly effective at triggering seizures in photosensitive individuals.

• Counting Flashes

  The “three times in any one-second period” rule is critical. If any content flashes more frequently than this, it must fall below both the general flash threshold and the red flash threshold. If it exceeds three flashes per second and also exceeds either threshold, it fails this criterion.

Practical Guidelines for Compliance

Achieving compliance with WCAG 2.3.1 requires careful consideration during all stages of web development:

• Design Phase
  • Minimize Flashing Content: The safest approach is to avoid flashing content altogether. If motion or emphasis is needed, consider subtle animations, slow fades, or changes in color that do not involve sharp luminance contrasts.
  • User Control: Design for user-controlled animations. Provide options to pause, stop, or reduce motion, especially for any content that might approach the flashing thresholds.
  • Color Palettes: Avoid using high-contrast color pairs, particularly involving saturated reds, for any dynamic or animated elements.
• Development Phase
  • CSS Animations: Use CSS `transition` or `animation` properties with care. Ensure that `animation-duration` is long enough (e.g., no faster than 0.5 seconds for a single transition, implying at least 1 second for a full cycle if it involves opposing changes). Set `animation-iteration-count` to a finite number or allow users to pause/stop it.
  • JavaScript Animations: Implement JavaScript-driven animations with user controls. Use `requestAnimationFrame` for smoother animations, but strictly control their frequency and intensity. Ensure any loops can be easily stopped by the user.
  • `prefers-reduced-motion` Media Query: Implement the `prefers-reduced-motion` media query to provide alternative, static content or significantly reduced animations for users who prefer less motion in their operating system settings.
• Content Management
  • Review All Media: Scrutinize all embedded videos, GIFs, and third-party widgets for flashing content. Even short, rapidly flashing sequences within a video can be problematic.
  • Image and Video Editing: If creating content, ensure that any effects, transitions, or special sequences do not introduce rapid flashes.
• Testing
  • Automated Tools: While challenging to fully automate, some tools can help identify potential issues by analyzing animation frequencies.
  • Manual Review: Carefully review all dynamic content, paying close attention to any element that changes appearance rapidly.
  • Photosensitive Epilepsy Analysis Tool (PEAT): This free tool from the Trace Research & Development Center can analyze video content to determine if it contains flashes that exceed WCAG 2.3.1 thresholds. It’s highly recommended for video and GIF content.

Examples of Correct Implementation

.safe-fade-element {  animation: safeFade 2s infinite alternate;  background-color: #3498db;  width: 100px;  height: 100px;}.safe-fade-element:hover {  /* Example for user interaction, not animation */  background-color: #2980b9;}@keyframes safeFade {  0% { opacity: 0.5; }  100% { opacity: 1; }}

<button id="toggleAnimation">Toggle Animation</button><div id="animatedBox" class="safe-box"></div>

.safe-box {  width: 50px;  height: 50px;  background-color: green;  margin-top: 10px;  border-radius: 5px;}.safe-box.animating {  animation: subtleMove 3s infinite alternate;}.safe-box.animating.paused {  animation-play-state: paused;}@keyframes subtleMove {  0% { transform: translateX(0); }  100% { transform: translateX(150px); }}@media (prefers-reduced-motion: reduce) {  .safe-box.animating {    animation: none; /* Disable animation by default for users with preference */  }}

const toggleButton = document.getElementById('toggleAnimation');const animatedBox = document.getElementById('animatedBox');let isAnimating = !window.matchMedia('(prefers-reduced-motion: reduce)').matches; // Initial state based on preferenceanimatedBox.classList.toggle('animating', isAnimating);toggleButton.textContent = isAnimating ? 'Pause Animation' : 'Play Animation';toggleButton.addEventListener('click', () => {  isAnimating = !isAnimating;  animatedBox.classList.toggle('animating', isAnimating);  animatedBox.classList.toggle('paused', !isAnimating && window.matchMedia('(prefers-reduced-motion: no-preference)').matches); // Only pause if not reduced-motion  toggleButton.textContent = isAnimating ? 'Pause Animation' : 'Play Animation';});

Examples of Incorrect Implementation

.seizure-flash-div {  animation: rapidFlash 0.2s infinite alternate; /* 5 flashes per second */  width: 200px;  height: 200px;}@keyframes rapidFlash {  0% { background-color: white; }  100% { background-color: black; }}

<div id="redFlashBox" style="width: 150px; height: 150px;"></div>

const redFlashBox = document.getElementById('redFlashBox');let isRed = true;setInterval(() => {  if (isRed) {    redFlashBox.style.backgroundColor = '#FF0000'; // Saturated Red  } else {    redFlashBox.style.backgroundColor = '#FFFFFF'; // Bright White  }  isRed = !isRed;}, 150); // Flashes roughly 3.3 times per second (Red-White-Red-White-Red in ~0.6s)

Best Practices and Common Pitfalls

• Best Practices
  • Default to Static: Assume users prefer static content unless they explicitly opt for motion or animation.
  • Graceful Degradation: If animations are critical, provide a non-animated fallback.
  • Test with PEAT: For any video content, always run it through the Photosensitive Epilepsy Analysis Tool (PEAT) to verify compliance.
  • User-Initiated Animations: Provide clear controls (play/pause buttons) for any animation that runs for more than a few seconds or could potentially cause issues.
  • Subtle Changes: If animating, ensure changes in luminance are minimal and color changes are desaturated. Avoid sharp contrasts.
• Common Pitfalls
  • Ignoring Small Animations: Thinking that small animated elements (e.g., loading spinners, notifications) are too insignificant to cause problems. If they flash rapidly, they can still contribute to a cumulative effect.
  • Third-Party Content: Not reviewing embedded videos, ads, or widgets from external sources for flashing content. You are responsible for the accessibility of all content on your page.
  • Rapid State Changes: Unintentionally creating flashes through rapid UI updates, error messages that flash, or quick success/failure indicators.
  • Lack of Testing: Failing to test dynamic content with appropriate tools or manual review.
  • Over-Reliance on CSS `opacity`: While `opacity` changes are generally safer than `background-color` changes, rapid toggling of `opacity` on very large, high-contrast elements can still create a flash effect.

Conclusion

Adherence to WCAG 2.3.1 “Three Flashes or Below Threshold” is a fundamental aspect of creating an inclusive and safe web. By understanding the specific thresholds and implementing careful design and development practices, developers and content creators can prevent the potentially life-threatening risks associated with photosensitive epilepsy. Prioritizing user safety through thoughtful implementation of this criterion is a non-negotiable step towards true web accessibility.