2.3.2 Three Flashes

Key Points

• No part of your site or app should flash or blink, even within safe thresholds.
• Applies to animations, videos, SVGs, banners, and background effects.
• Unlike 2.3.1 (which allows limited flashing), this guideline forbids any flashing whatsoever.
• Safer alternatives:
  • Subtle transitions (fade, scale, color shift)
  • Static alerts or motion reduced by user preference (prefers-reduced-motion)

Short Summary

Avoid all flashing visuals — no exceptions. Use calm, gradual animations instead of sudden blinking or flickering to ensure universal safety.

Example Issue and Fix

<div x-data="timingControl" class="flex w-full flex-col justify-center items-center gap-4 p-8 text-center">
  <p class="font-medium text-gray-700 !m-0 inline-flex">Flashing alert (unsafe):</p>
  <div class="animate-flash w-full rounded bg-red-600 p-4 text-center font-bold text-white">EMERGENCY ALERT!</div>

  <style>
    @keyframes flash {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .animate-flash {
      animation: flash 0.3s infinite; /* ❌ 6 flashes per second */
    }
  </style>
</div>

<div x-data="timingControl" class="flex w-full flex-col items-center justify-center gap-4 p-8 text-center">
  <p class="!m-0 font-medium text-gray-700">Accessible alert (no flashing):</p>
  <div class="w-full rounded bg-red-600 p-4 text-center font-bold text-white transition duration-700 hover:bg-red-700 focus:bg-red-700 focus:ring-2 focus:ring-red-400 focus:outline-none">EMERGENCY ALERT!</div>
</div>

Quick Checklist

• No flashing, blinking, or strobing effects anywhere
• Replace flashing with fades, slides, or color transitions
• Respect prefers-reduced-motion media query
• Ensure contrast and visibility without motion
• No autoplay videos or GIFs with flashing scenes
• Use CSP-compliant animation patterns (CSS or Alpine transitions only)

Short Summary

Any animations caused by user interaction must have a reduced-motion fallback. If motion is not critical, simplify or remove it when the user opts out.