Avoid Flashing Content More Than Three Times Per Second (or Ensure Below Threshold)

Disabilities Affected: Visual

Success Criterion: 2.3.1

Level: A

Web pages must not contain anything that flashes more than three times in any one-second period, or the flash must be below the general flash and red flash thresholds.

Why It Matters

Certain types of flashing content (especially bright, regular flashes, and red flashes) can trigger seizures in individuals with photosensitive epilepsy. Adhering to these thresholds is critical for preventing serious harm.

Fixing the Issue

Avoid flashing content altogether if possible. If flashing is used (e.g., for alerts or animations), ensure it flashes no more than three times per second. Also, ensure the flashing area is small enough and the contrast changes are limited to meet the detailed general flash and red flash thresholds defined in WCAG. Use tools or manual analysis to verify compliance if using flashing content. It’s generally safer to avoid flashing animations or use very slow, subtle effects instead.

Good Code Example

Content with no flashing or very slow, subtle animation:

Markup
Preview

<div style="background-color: lightblue; padding: 10px;">
  Important Update Available.
</div>

<style>
  @keyframes slow-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .subtle-pulse {
    animation: slow-fade 5s ease-in-out infinite; /* 5-second cycle */
    background-color: orange;
    padding: 10px;
  }
</style>
<div class="subtle-pulse">Gentle pulsing notice</div>

Important Update Available.

Gentle pulsing notice

Bad Code Example

Rapidly flashing content created with CSS or JavaScript:

Markup
Preview

<style>
  @keyframes rapid-flash {
    0%, 49% { background-color: red; }
    50%, 100% { background-color: yellow; }
  }
  .dangerous-flash {
    width: 100px;
    height: 100px;
    /* Flashes twice per second (0.25s red, 0.25s yellow) */
    /* If contrast is high, this could be dangerous */
    animation: rapid-flash 0.5s linear infinite;
  }
</style>
<div class="dangerous-flash"></div>

<script>
  // const element = document.getElementById('some-element');
  // setInterval(() => {
  //   element.style.backgroundColor = (element.style.backgroundColor === 'red' ? 'yellow' : 'red');
  // }, 100); // Flashes 5 times per second - violates WCAG 2.3.1
</script>

Search Ultimate Guide

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