2.3.1 Three Flashes or Below Threshold

Who it helps

People with photosensitive epilepsy can have seizures triggered by flashing content, especially bright, saturated red or large flashes. Other people can get migraines or feel unwell.

How to meet it

• Avoid flashing content entirely; it is the simplest way to be sure.
• If something must flash, keep it to three flashes or fewer in any one second.
• If it flashes faster, keep the flashing area to 25% or less of any 341 by 256 CSS pixel block. That block stands for a 10-degree field of view.
• Avoid flashes to and from saturated red, which have their own, stricter red flash threshold.
• Test videos and animations with a flash analysis tool such as PEAT or the Harding test before you publish them.
• This applies to all content, including ads and embeds. It must pass by default, not only when a reduced-motion setting is on.

Examples

.alert-banner {
  background: #000;
  color: #fff;
  animation: strobe 0.1s steps(1, end) infinite;
}
@keyframes strobe {
  50% { background: #fff; color: #000; }
}

.alert-banner { background: #1a1a1a; color: #fff; }
.alert-banner .icon {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  50% { opacity: 0.6; }
}

Common mistakes

• Publishing video with strobe effects, lightning or rapid camera flashes without running a flash test.
• Using a fast blinking animation to draw attention to an alert or sale.
• Assuming a flash is fine because it is short; even one second of rapid flashing can fail.
• Letting flashing red transitions into an animation, which hit the red flash threshold sooner.

Related criteria

• 2.3.2 Three Flashes
• 2.2.2 Pause, Stop, Hide
• 2.3.3 Animation from Interactions

Official W3C explanation of 2.3.1