Skip to main content

Avoid Content Flashing More Than Three Times Per Second

WCAG 2.1 Ultimate Guide
Disabilities Affected: Visual
Success Criterion: 2.3.2
Level: AAA
WCAG Link
Web pages must not contain anything that flashes more than three times in any one-second period. (Note: This removes the “below threshold” exception from the Level A version, 2.3.1).

Why It Matters

This stricter AAA criterion provides the highest level of protection against seizure triggers by completely prohibiting content that flashes more than three times per second, regardless of size or contrast changes.

Fixing the Issue

Avoid any content that flashes more than three times per second. This is the simplest and safest approach. If flashing content is considered, ensure it strictly adheres to the three-times-per-second limit. Use tools or careful analysis to verify flash rates. Generally, prefer alternative methods for drawing attention or indicating status that do not involve flashing.

Note: It’s best practice to avoid flashing content altogether.

Good Code Example

Content with no flashing or very slow effects:

  • <div style="border: 2px solid red; padding: 10px;">Alert: System Maintenance Soon</div>

<style>
  @keyframes slow-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }
  .aaa-safe-pulse {
    animation: slow-pulse 2s ease-in-out infinite; /* 2-second cycle = 0.5 Hz */
    background-color: orange; padding: 10px;
  }
</style>
<div class="aaa-safe-pulse">Slow Pulse Notice</div>
  • Alert: System Maintenance Soon
    Slow Pulse Notice

Bad Code Example

Content flashing exactly three times per second

  • <style>
  @keyframes three-flashes {
     0%, 33%, 66%, 100% { background-color: yellow; }
     16.5%, 49.5%, 82.5% { background-color: red; }
     /* Attempts to flash 3 times per second. Fails AAA. */
     /* Also likely fails Level A (2.3.1) if large/bright enough. */
  }
  .three-flash-warning {
    width: 50px; height: 50px;
    animation: three-flashes 1s steps(6, end) infinite;
  }
</style>
<div class="three-flash-warning"></div>
Search Ultimate Guide
Tablet displaying an eBook cover titled 'Integrating Accessibility Compliance Into Your Budget' by AccessiTREE. The cover features a digital tree with accessibility-related icons, symbolizing inclusive design and compliance.
Free eBook
Integrating Accessibility Compliance Into Your Budget
A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling
Learn More
Need Help with Compliance?
Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.
Schedule Consult