Three Flashes or Below Threshold

Who this affects

Users with photosensitive epilepsy, for whom a flashing sequence can trigger a seizure. This is the one criterion whose failure can cause immediate physical harm.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

<h1>Flash sale</h1>

<!-- 2.3.1 is the only success criterion whose failure can cause immediate
     physical harm: a sequence flashing more than three times a second, over a
     large enough area, can trigger a seizure in someone with photosensitive
     epilepsy.

     For that reason this demonstration is BUILT DIFFERENTLY from every other
     fail.html in this suite. The unsafe animation does not start on load, and
     the user has to opt in after an explicit warning. Teaching material must
     not injure the person being taught.

     WHAT WOULD BE WRONG in production: a banner that strobes at roughly 5.5
     flashes per second, over a large area, with high luminance contrast
     between the two states, and no way to stop it. -->
<div class="callout callout--fail">
  <p class="callout__title">Health warning</p>
  <p>The button below starts a rapidly flashing animation of the kind 2.3.1
     prohibits. <strong>Do not use it if you have photosensitive epilepsy</strong>,
     or if you are unsure.</p>
  <button type="button" class="button" id="go">Show the unsafe flashing (5 seconds)</button>
</div>

<div class="flasher" id="box" role="img" aria-label="Demonstration area for the flashing animation"></div>

<h1>Flash sale</h1>

<!-- FIX: draw attention without flashing.
     This block pulses at about 0.5 cycles per second - six times slower than
     the three-per-second threshold - with a small luminance change, and it
     stops entirely for anyone who has asked their system to reduce motion.

     The thresholds you are testing against:
       - more than 3 flashes in any one second is a failure, UNLESS
       - the flashing area is small (below about 25% of 10 degrees of visual
         field - roughly a 341 x 256 px area on a standard display), AND
       - the flash does not involve a transition to or from saturated red,
         which has its own, stricter threshold.

     Saturated red is called out separately because red flashes provoke
     seizures at intensities other colours do not. -->
<div class="pulse">
  <h2>Ends Sunday</h2>
  <p>20% off all paperbacks this weekend.</p>
</div>

<!-- Testing note: no general-purpose accessibility scanner tests for flashing.
     Use the free Photosensitive Epilepsy Analysis Tool (PEAT) from the Trace
     Center on any video or animation, and be especially careful with
     autoplaying video, rapid scene cuts, explosions and strobe effects. -->

How to test it

Analyse video and animation with a tool such as PEAT (Photosensitive Epilepsy Analysis Tool). Pay attention to rapid cuts, strobe effects, explosions, and large areas of saturated red.

• Automated

  Specialist tools such as PEAT analyse video frame by frame, but standard accessibility scanners do not test for flashing at all.

  No axe rule maps to this criterion. It has to be checked by a person.

• Keyboard

  Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

• Screen reader

  Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

• Visual

  Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

Related criteria

• 2.3.2 Three Flashes (Level AAA)
• 2.2.2 Pause, Stop, Hide (Level A)

In the specification

• Understanding 2.3.1 Three Flashes or Below Threshold — the W3C explanation, intent and exceptions
• 2.3.1 in the WCAG 2.2 Recommendation — the normative wording