• Success Criterion 2.3.1
  • Conformance level A

Rapid Full-Screen Color Flash on Load or Error

2.3.1 — Three Flashes or Below Threshold

Scenario

Setting

A real-estate marketplace's listing page

What’s wrong

Rapid full-screen color inversion animations on load or error states.

Example 

setInterval(() => document.body.classList.toggle("inverted"), 100); // runs for 2 seconds on load

Why it matters

A house hunter opening a listing is hit with rapid full-screen color inversion meant to signal loading, before seeing any photos.

How to test

Review any rapid full-screen color-inversion animation (on load or error states) with PEAT: above-threshold flashing fails.

How to fix

A skeleton screen signals loading without any full-screen flashing.

<div class="skeleton-loader" aria-hidden="true"></div>
<!-- remove the classList.toggle interval -->

Outcome

Loading with a calm spinner, a house hunter's listing page never flashes at them.

Who is affected

Users with photosensitive epilepsy risk a seizure from a full-screen flashing effect they can't anticipate or skip.

Learn more

Related scenarios