Now Flash sale: 50% off everything until midnight
```
```css
.flash-sale {
padding: 2rem 1rem;
background: #111;
color: #ffd400;
font-size: 2rem;
font-weight: 800;
text-align: center;
}
.badge {
display: inline-block;
padding: 0.125rem 0.5rem;
background: #ffd400;
color: #111;
font-size: 0.875rem;
vertical-align: middle;
animation: strobe-badge 0.2s steps(1) 10;
}
@keyframes strobe-badge {
50% { background: #111; color: #ffd400; }
}
```
The banner stays still and only the "Now" badge strobes, ten cycles in two seconds. At about 50 × 24 pixels it covers around 1% of the 341 × 256 field, far under the quarter 2.3.1 allows; even at 400% zoom it covers under a quarter. This holds only under conditions outside the snippet. The badge must stay that small at the largest zoom people use. Nothing else may flash in the same part of the screen, because flashes side by side add up. And it must stay out of red, since a red flash counts on its own. It still flashes five times a second, which fails 2.3.2 at Level AAA, and people who are highly sensitive can still react to it.
## Which option to use
All three pass 2.3.1. The still banner needs no measuring and passes every flash and motion criterion; what it gives up is the flash itself, so the design has to earn attention with colour and size. One flash a second keeps a blink as the page opens, at a rate below which seizures are uncommon, by changing two values; choose it when the brief asks for movement. The small badge keeps a fast strobe, but it passes only while it stays small and alone, and fails 2.3.2; choose it only when a fast flash is part of a brand you can't change, and plan to slow it when you can.
## Implementation decisions
Count flashes as pairs. A swap to light and back is one flash, so an animation that changes once each way per cycle flashes once per `animation-duration`. With `animation-direction: alternate`, each cycle is only half a flash, so `0.2s alternate` flashes 2.5 times a second. Keep every cycle at one second or longer and the count never needs care.
Some changes look like fixes and are not. Each leaves the flash in place for someone:
- A seizure warning before the page or the video: by the time it is read, the flash is on screen, and someone who has never had a seizure doesn't know to heed it.
- A Pause or Stop button: W3C notes that turning the flash off is not an option, because a seizure can come faster than most people could turn it off.
- The reduced-motion query alone: most people with photosensitive epilepsy have never set it. Write motion inside `no-preference` as well, never instead of a safe rate.
A change between two light colours is not a general flash when the darker of them has a relative luminance of 0.80 or more, such as a pale yellow flickering to a paler one. It passes on paper, but the next brand colour can break it, and a change to or from a saturated red counts as a red flash even with no change in brightness. Red is counted on its own because red flashing is especially likely to set off seizures: the red and blue flashing in a 1997 anime episode sent hundreds of viewers in Japan to hospital. Treat a pale flicker as the small badge is treated, and confirm it with a tool.
Video, animated GIFs, Lottie files and canvas animations hold the flash in their frames, so CSS can't fix them. Run each through a flash analysis tool at the size the page shows it, such as PEAT, a free Windows tool from the Trace Center, or IRIS, an open-source library from EA that checks video for luminance flashes, red flashes and patterns. Then fix the edit: cut or slow the strobe, darken it, or shrink it in the frame. A third-party ad or embed counts too, because 2.3.1 applies to everything on the page.
Flashing is not the only movement on a sale page. A banner that pulses or glows without end, a ticker and a countdown each have their own guides: [pulsing buttons, glowing badges and animations that never stop](/learn/endless-animations) and [tickers, carousels and animations that can't be paused](/learn/moving-content). A small badge or dot that blinks fast is the subject of [badges and icons that blink more than three times a second](/learn/fast-blinking).
## Verify the fix
1. List everything on the page that changes by itself: CSS animations, script timers, SVG animations, video, animated images, canvas, ads and embeds.
2. For each, count the flashes in its busiest second: slow the browser's Animations panel to 10%, or step through a screen recording frame by frame. Three or fewer passes; anything faster goes to step 3.
3. For anything that flashes faster, measure the flashing area at the largest zoom people use, together with anything else flashing beside it: under a quarter of a 341 × 256 CSS pixel area, and not red.
4. Run every video, animated image and canvas animation through a flash analysis tool at the size the page shows it, and confirm no general or red flash fails.
5. Turn Reduce motion off in the operating system and repeat steps 1 and 2: the page must pass for people who never set it.
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after the design, a campaign banner, a video or the animation library changes.
## Limits
This is a starting pattern, not a guarantee for every application, and not medical advice. The thresholds lower the risk of a seizure but don't remove it: some people react below three flashes a second, and to still patterns of stripes or checks that 2.3.1 doesn't cover. The audit measures flashes it can read from the page, not video, animated images or canvas, and it doesn't add up small flashes that sit side by side. A flash analysis tool and a person still need to check what it can't see.