2.3.1 Drei Blitze oder Unterschreitung des Schwellenwertes

WCAG - Definition

Inhalte dürfen nicht mehr als drei Blitze pro Sekunde enthalten.
Ausnahme: Blitze liegen unterhalb des allgemeinen und roten Grenzwertes für visuelle Reizungen (gemäß Definition in den WCAG).

Bedeutung

  • Warum wichtig? Starke visuelle Blitze können bei Menschen mit photosensitiver Epilepsie Anfälle auslösen.

  • Auch ohne Epilepsie sind blinkende Inhalte für viele Nutzer störend, stressig oder ablenkend.

  • Ziel: Inhalte sollen sicher und angenehm für alle sein.

Ausreichende Techniken

  • Blinkende Inhalte vermeiden.

  • Wenn Blinken nötig (z. B. Warnsignale):

    • Frequenz unter 3x pro Sekunde halten.

    • Fläche klein halten (nicht mehr als 25 % des Bildschirms).

  • CSS statt GIF: langsame Übergänge (z. B. opacity-Fades) statt hartes Blinken.

  • Blinkende Warnungen durch Ton, Text oder Symbole ersetzen.

  • Bewegung subtil halten – lieber Farbänderung oder Icon hinzufügen.

  • prefers-reduced-motion beachten → Bewegung bei Bedarf komplett ausschalten.

Beispiel – schlechte Praxis:

.blink {
  animation: blink 0.2s infinite; /* 5x pro Sekunde  */
}
@keyframes blink {
  50% { opacity: 0; }
}

Beispiel – gute Praxis:

.blink {
  animation: fade 2s infinite; /* max. 0,5x pro Sekunde */
}
@keyframes fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

Fehler

  • GIFs mit stroboskopartigen Effekten.
  • „Attention Grabber“-Banner mit 10x pro Sekunde blinkendem Text.
  • Video mit Explosionen/Blitzen ohne Vorwarnung.
  • Keine Option, blinkende Effekte auszuschalten.