Search topics
Badges and icons that blink more than three times a second
A live-stream badge has a red dot that blinks four times a second: too small to cross the seizure threshold, but faster than the three a second that Level AAA allows at any size.
animation: blink 0.25s steps(1) infinite; The problem
People who are highly sensitive to flashing can react to a small dot blinking four times a second, even though it is too small to fail Level A, and it keeps blinking for as long as they watch.
A clothing shop streams live try-on sessions, and its home page shows a card for the stream that is on now: a picture, the title "Autumn coats: try-on and Q&A", and in the corner a "Live" badge with a small red dot. To show the stream is live, the dot blinks: red, then white, so it vanishes against the badge, and back, four times a second, for as long as the page is open. The same fast blink turns up as an unread-message dot, a recording light in a video call, a "New" label, a bell icon that flickers when a notification arrives, a typewriter cursor drawn in CSS, and a "glitch" effect that makes a word flicker.
Success criterion 2.3.2 Three Flashes, at Level AAA, allows nothing on the page to flash more than three times in any one second. Unlike 2.3.1, it has no exception for flashes that are small or dim: Understanding 2.3.2 says it doesn't allow any flashing at a frequency greater than three a second, and that even a single flashing pixel would fail. The dot passes 2.3.1. At 10 × 10 pixels it covers about 0.1% of the 341 × 256 pixel field that 2.3.1 measures against, far under the quarter it allows. But every swap from red to white and back is a flash, both a general flash and a red flash, and it happens four times a second, so it fails 2.3.2. Because it blinks without end beside other content, it also fails 2.2.2 Pause, Stop, Hide at Level A.
Live shopping streams are watched for many minutes at a time, so the dot stays in view for the whole session, close to the title and the products people are reading about. Level AAA is rarely required in full, but this part of it costs one line of CSS to meet.
2 of 10 groups affected
- No vision (not affected)
- Low vision (not affected)
- Colour vision (not affected)
- No hearing (not affected)
- Hard of hearing (not affected)
- No speech (not affected)
- Motor (not affected)
- Reach, strength (not affected)
- Cognitive (affected)
- Seizures (affected)
- Photosensitive seizures A dot flashing four times a second is in the range of flashing that sets off seizures. Its size keeps the risk low for most people, but not for those who are highly sensitive, and it flashes for as long as the stream is open.
- Limited language, cognitive and learning abilities A dot blinking beside the stream's title keeps pulling the eye back, so people with attention difficulties lose their place in the products being shown.
The audit counts flashes at any size: it steps every CSS and Web Animations API animation through its first seconds, watches for scripts that swap a class on a timer, and reports anything that flashes more than three times in a second as a 2.3.2 finding, with its rate and colours. Size-based checks, including the audit's own 2.3.1 check, pass a small dot by design, so only counting finds it. The audit doesn't look inside frames from other sites, such as a third-party video player or chat widget, or inside video, animated GIFs and canvas. AI tools tend to treat a small blink as harmless decoration, and "live dot" and "notification ping" snippets online often use cycles of a quarter or half a second.
Try it
See how often the Live dot flashes in one second, and how little of the view it covers.
The strip under the card shows one second of the dot, frame by frame. The dot is far too small for 2.3.1’s limit; only the count fails it. "Stop demo" is the Learn page’s own button, not the shop’s.
Broken Can you fix this?
Autumn coats: try-on and Q&A
Far under the quarter 2.3.1 allows, so only the count fails it, under 2.3.2.
The fix
Keep the dot still, or pulse it once every two seconds and stop after two.
- 1Nothing flashes more than three times in any one second, at any size.
- 2Each flash takes a second or more, and the blinking ends within five seconds.
- 3The word, not the blink, says what the badge means.
<span class="live-badge"><span class="live-dot"></span>Live</span>A still dot
<span class="live-badge"><span class="live-dot"></span>Live</span>Why this fix: Flash no more than three times a second
The dot jumps from red to white and back every quarter of a second, so it flashes four times a second, and never stops.
The dot stays red and nothing flashes. The word "Live", which was always in the badge, says the stream is live, and the red dot still marks it at a glance. There is nothing to count and nothing to stop, so it passes 2.3.2, 2.3.1 and 2.2.2.
Both pass 2.3.2, 2.3.1 and 2.2.2. The still dot needs no measuring and nothing can make it fail later; it gives up the motion, and the word "Live" carries the meaning, as it already did. The slow pulse keeps a sign of life as the page opens, at a rate well clear of the flashing that sets off seizures, in a few lines of CSS; choose it when the design wants the dot to move. Neither can keep moving for the whole stream: that would need a Pause button under 2.2.2, and a status that stays true for an hour doesn't need to move to be seen.
A fade is a flash too. A flash is a change in brightness there and back, whether it jumps with steps() or eases, so the timing that matters is the length of each cycle, not its curve. With animation-direction: alternate, each cycle is only half a flash: 0.25s alternate flashes twice a second, and 0.125s alternate four times.
Fast blinks hide in small parts of a page that nobody thinks of as flashing. Each needs the same fix, still or a second or more per flash.
- Unread and notification dots: a still dot with the count in text, or one slow pulse when something new arrives.
- Recording and "on air" lights in video tools: still red, with the word beside it.
- Cursors drawn in CSS for a typing effect: a second or more per blink, and stop when the typing does.
- "Glitch" effects that make a word flicker: a single change, or none.
- Loading dots that light up in turn: keep each dot's cycle at a second or longer, and stop them when loading ends.
Red counts on its own. A change to or from a saturated red is a red flash even when the brightness barely changes, so swapping the white for a grey of the same brightness doesn't help.
Players, chat widgets and ad slots embedded from other sites bring their own indicators, and the page is responsible for them. Check them by hand, and use their settings to turn the blinking off where they offer one.
A large area that flashes is a Level A failure with a stricter cost: see flashing banners and videos that can trigger seizures. A pulse or glow that never ends, at any speed, is covered in pulsing buttons, glowing badges and animations that never stop.
Fixing this with an AI coding assistant? Get this guide as Markdown
Verify the fix
4 checks, no mouse.
Test with: Flash analysis, Reduced motion
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after the design system, the icon set or an embedded widget changes.
Limits
This is a starting pattern, not a guarantee for every application, and not medical advice. Meeting 2.3.2 lowers the risk further than 2.3.1 does, but some people react to slower flicker too. The audit counts flashes it can read from the page's own document, not inside frames from other sites, video, animated images or canvas; those still need a person and a flash analysis tool.
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
References
Keep this fixed as your code changes.
Turn guides like this into rules your coding agents and CI follow, then have the result retested with a keyboard and screen readers.