WCAG 2.3.1: Grenzwert von drei Blitzen

WCAG 2.3.1 verbietet Inhalte, die häufiger als dreimal pro Sekunde aufblitzen – es sei denn, die blitzende Fläche bleibt unter den definierten Schwellenwerten für Größe und Helligkeit. Es ist das einzige WCAG-Kriterium, dessen Verletzung Menschen körperlich schaden kann: Flackern in bestimmten Frequenzen kann epileptische Anfälle auslösen.

(Englisch: Three Flashes or Below Threshold. Im BIK-BITV-Test heißt der Prüfschritt „2.3.1 Verzicht auf Flackern“.)

Das Wichtigste in Kürze

• Die Grenze liegt bei drei Blitzen pro Sekunde – gezählt werden Paare von Helligkeitswechseln, nicht einzelne Bildwechsel.
• Rotes Flackern wird gesondert behandelt: Wechsel mit gesättigtem Rot gelten als eigener Auslöser und werden separat gezählt.
• Die Flächenschwelle ist klein. Unkritisch bleibt Flackern nur, wenn die kombinierte Fläche 0,006 Steradiant innerhalb eines zentralen 10-Grad-Sehfelds nicht überschreitet – grob ein Viertel dieses Felds.
• Blinken und Flackern sind nicht dasselbe. Blinken ist störend und fällt unter 2.2.2, Flackern ist anfallauslösend und schlicht unzulässig.
• Es gilt für alles, was sich bewegt: Videos, GIFs, CSS-Animationen, Werbebanner, Ladeindikatoren, WebGL-Szenen.
• Eine Warnung vor dem Video ersetzt die Konformität nicht. Sie ist guter Stil, mehr nicht.
• PEAT ist das Standardwerkzeug – kostenlos vom Trace Center, prüft Videomaterial auf Verstöße gegen beide Schwellenwerte.
• Stufe A und über die EN 301 549 verbindlich; große flackernde Flächen führen im BIK-BITV-Test zur Abwertung des Gesamtergebnisses.

Wie viel Blinken ist erlaubt?

Ein „Blitz“ im Sinne der WCAG ist kein Bildwechsel, sondern ein Paar gegenläufiger Helligkeitswechsel: hell nach dunkel und wieder zurück. Damit ein solcher Wechsel überhaupt zählt, muss er zwei Bedingungen erfüllen – der Unterschied der relativen Leuchtdichte beträgt mindestens 10 Prozent, und der dunklere der beiden Zustände liegt unter 0,80 relativer Leuchtdichte. Alles, was heller bleibt, gilt als unkritisch.

Daneben steht der rote Blitz, und der ist strenger geregelt. Wechsel, an denen gesättigtes Rot beteiligt ist, werden unabhängig von der Helligkeit gezählt. Der Grund liegt in der Physiologie: Sattes Rot löst bei photosensitiven Menschen messbar leichter Reaktionen aus als andere Farben. Ein rot pulsierender Warnhinweis ist deshalb kritischer als derselbe Effekt in Blau.

Die Flächenschwelle ist der Teil, den die meisten Erklärungen weglassen. Sehr kleine flackernde Flächen sind zulässig, weil sie nur einen winzigen Teil des Sichtfelds treffen. Die Norm rechnet dabei nicht in Pixeln, sondern in Sehwinkeln: Die kombinierte Fläche aller gleichzeitig flackernden Bereiche darf 0,006 Steradiant innerhalb eines zentralen Sehfelds von 10 Grad nicht überschreiten – das entspricht etwa einem Viertel dieses Felds. Praktisch heißt das für einen typischen Sitzabstand: Ein kleines Icon darf blinken, ein Vollbild-Stroboskop nicht.

Zwei Begriffe werden regelmäßig verwechselt, und der BIK-BITV-Test trennt sie sauber:

Blinken ist ein wiederholtes Ein- und Ausblenden, das die Aufmerksamkeit ziehen soll – ein pulsierender Hinweis, ein blinkender Cursor. Es ist störend und fällt unter 2.2.2 Pausieren, beenden, ausblenden, das eine Abschaltmöglichkeit nach fünf Sekunden verlangt.

Flackern ist der schnelle Helligkeitswechsel oberhalb von drei Impulsen pro Sekunde. Dafür gibt es keine Abschaltmöglichkeit als Ausweg – es darf schlicht nicht vorkommen.

Der Normtext steht im Understanding-Dokument des W3C zu 2.3.1, das deutsche Prüfvorgehen im Prüfschritt „2.3.1 Verzicht auf Flackern“.

Wen betrifft es besonders?

Die Zielgruppe sind Menschen mit photosensitiver Epilepsie, der häufigsten Form der Reflexepilepsien. Bei ihnen können visuelle Reize – flackerndes Licht, Stroboskope, schnelle Hell-Dunkel-Wechsel auf Bildschirmen – Anfälle auslösen. Das ist keine Unannehmlichkeit, sondern ein medizinisches Ereignis mit realer Verletzungsgefahr: Stürze, Zungenbisse, ein Anfall am Steuer oder auf der Treppe.

Anders als bei den meisten Kriterien entsteht der Schaden hier, bevor überhaupt reagiert werden kann. Bei fehlenden Untertiteln kann man die Seite verlassen. Bei einem flackernden Vollbildvideo ist der Reiz schon eingetreten, wenn die Wahrnehmung einsetzt. Deshalb gibt es hier keine Ausweichlösung über eine Abschaltmöglichkeit – das Kriterium ist absolut formuliert.

Betroffen sind daneben Menschen mit Migräne, für die Flackern ein klassischer Auslöser ist, und Menschen mit vestibulären Störungen, denen schnelle Bildwechsel Schwindel und Übelkeit bereiten. Bei ihnen führt Flackern nicht zu Anfällen, aber zu Symptomen, die den Tag ruinieren – und die noch Stunden nach dem Schließen des Tabs anhalten.

Und schließlich profitiert eine Gruppe, die man selten mitdenkt: Menschen mit Konzentrationsschwierigkeiten. Was flackert, zieht Aufmerksamkeit ab – dauerhaft und ohne Möglichkeit, es auszublenden.

Richtig & falsch im Code

Die meisten Verstöße auf Websites entstehen nicht in Videos, sondern in wenigen Zeilen CSS. Eine Animation mit kurzer Dauer und alternate erzeugt schnell mehr als drei Helligkeitswechsel pro Sekunde:

/* Falsch: 0,15 s Dauer, hin und zurück –
   das sind über sechs Wechsel pro Sekunde auf großer Fläche */
.alarm-banner {
  animation: blitz 0.15s infinite alternate;
}
@keyframes blitz {
  from { background: #ffffff; }
  to   { background: #b42318; }
}

/* Richtig: langsamer, mit geringem Helligkeitsunterschied,
   und respektiert die Systemeinstellung */
.alarm-banner {
  animation: pulsieren 2s ease-in-out infinite alternate;
}
@keyframes pulsieren {
  from { background: #fdeceb; }
  to   { background: #fbdcd9; }
}

@media (prefers-reduced-motion: reduce) {
  .alarm-banner { animation: none; }
}

Die Faustregel für die Prüfung im Kopf: Eine Animation mit alternate erzeugt zwei Helligkeitswechsel pro Zyklus. Bei einer Dauer von 0,15 Sekunden ergibt das über sechs Blitze in der Sekunde. Unterhalb von drei Blitzen bleibt man erst bei einer Zyklusdauer ab etwa 0,7 Sekunden – und selbst dann nur, wenn der Helligkeitsunterschied klein ist.

Auch bei Videos und Kanvas-Animationen lohnt eine simple Vorsichtsmaßnahme: die Systemeinstellung respektieren, bevor irgendetwas losläuft.

// Richtig: bewegte Effekte gar nicht erst starten,
// wenn reduzierte Bewegung eingestellt ist
const wenigerBewegung = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (!wenigerBewegung) {
  starteHintergrundAnimation();
}

Für eingebettetes Fremdmaterial gilt: Was du ausspielst, verantwortest du. Ein Werbeslot, der ein blitzendes Banner liefert, ist dein Verstoß – nicht der des Vermarkters.

<!-- Falsch: GIF mit Stroboskop-Effekt als Aufmerksamkeitsfänger -->
<img src="/banner/sale-blitz.gif" alt="Nur heute: 50 % Rabatt" />

<!-- Richtig: statisches Bild, Bewegung nur dort,
     wo sie Information vermittelt -->
<img src="/banner/sale.webp" alt="Nur heute: 50 % Rabatt" />

So testest du es

1. Alles Bewegte inventarisieren: Videos, GIFs, CSS-Animationen, Ladeindikatoren, Karussells, Hintergrundeffekte, WebGL-Szenen, Werbeplätze.
2. CSS gezielt durchsuchen. Jede animation mit einer Dauer unter etwa 0,7 Sekunden, die Helligkeit oder Farbe wechselt, gehört auf den Prüfstand – vor allem in Kombination mit alternate und infinite.
3. Videomaterial mit PEAT prüfen. Das Photosensitive Epilepsy Analysis Tool des Trace Centers ist kostenlos und prüft gegen beide Schwellenwerte, den allgemeinen und den roten. Es ist das Werkzeug, das auch Prüfstellen einsetzen.
4. Bei Fremdmaterial besonders genau hinsehen: Event-Mitschnitte mit Bühnenbeleuchtung, Trailer, Musikvideos, nutzergenerierte Inhalte. Dort sitzen die echten Verstöße.
5. Sichtprüfung mit Stoppuhr. Zählt man mehr als drei Hell-Dunkel-Wechsel in einer Sekunde, ist die Grenze gerissen – für eine erste Einschätzung reicht das bloße Auge.
6. Die Flächenfrage stellen. Betrifft das Flackern nur ein kleines Icon oder einen großen Teil des Bildschirms? Große Flächen führen im BIK-BITV-Test zur Abwertung des Gesamtergebnisses.
7. Eine Redaktionsregel verankern: Videofreigabe nur mit Flacker-Check. Einmal in den Prozess eingebaut, kostet er später nichts mehr.

Häufiger Fehler in der Praxis

Der häufigste Verstoß auf normalen Websites ist die hektische CSS-Animation. Jemand baut einen Hinweis, der Aufmerksamkeit ziehen soll – ein Countdown, ein „Nur noch heute“, eine Fehlermeldung –, setzt eine kurze Animationsdauer und ist zufrieden. Niemand denkt dabei an Epilepsie, weil das Wort „Blitz“ nicht fällt. Genau deshalb ist die Zahl im Code der bessere Prüfmaßstab als das Gefühl: unter 0,7 Sekunden Zyklusdauer mit alternate wird es kritisch.

Der zweite ist das Event-Video mit Bühnenlicht. Konferenzmitschnitte, Produktvorstellungen, Konzertaufnahmen – überall dort arbeiten Lichttechniker mit genau den Effekten, die das Kriterium verbietet. Das Material kommt fertig aus der Produktion, und niemand prüft es, weil es „professionell“ aussieht. Da beiß ich mir regelmäßig auf die Zunge: Ein Durchlauf durch PEAT dauert Minuten und hätte den Befund vorher gefunden.

Der dritte ist die Warnung statt der Lösung. Vor dem Video steht ein Hinweis auf Lichteffekte, und damit gilt die Sache als erledigt. Der Prüfschritt sieht das anders: Eine Warnung ist keine Konformität. Anders als im Fernsehen, wo eine gesprochene Ansage vor der Sendung läuft, lässt sich im Web nicht steuern, wer wann auf ein automatisch startendes Video trifft. Wenn das Material nicht zu ändern ist, bleibt der Weg, es nicht automatisch starten zu lassen und den kritischen Abschnitt zu schneiden.

Der vierte ist der Ladeindikator, der zu schnell dreht. Ein Spinner mit hohem Kontrast und sehr kurzer Umlaufzeit erzeugt an derselben Bildschirmstelle einen schnellen Hell-Dunkel-Wechsel. Bei kleinen Flächen bleibt das unter der Flächenschwelle – bei einem seitenfüllenden Ladebildschirm nicht mehr.

Häufige Fragen

Wie viele Blitze pro Sekunde sind erlaubt?

Höchstens drei, gezählt als Paare gegenläufiger Helligkeitswechsel. Rotes Flackern wird separat gezählt: Auch dort liegt die Grenze bei drei. Wer die Grenze überschreitet, bleibt nur konform, wenn die flackernde Fläche unter der Schwelle von 0,006 Steradiant im zentralen 10-Grad-Sehfeld bleibt.

Was ist der Unterschied zwischen Blinken und Flackern?

Blinken ist langsam und störend – ein pulsierender Hinweis, der Aufmerksamkeit zieht. Es fällt unter 2.2.2, das eine Abschaltmöglichkeit verlangt. Flackern ist schnell und kann Anfälle auslösen; dafür gibt es keine Ausnahme über eine Abschaltmöglichkeit, es darf einfach nicht vorkommen.

Reicht eine Warnung vor dem Video?

Nein. Eine Warnung ist guter Stil und hilft Menschen, die selbst entscheiden wollen – für die Konformität zählt sie nicht. Das Kriterium ist eine Anforderung an den Inhalt, nicht an die Ankündigung. Wenn kritisches Material unverzichtbar ist, darf es zumindest nicht automatisch starten.

Gilt das Kriterium auch für Werbebanner?

Ja. Maßgeblich ist, was auf deiner Seite ausgeliefert wird, nicht wer es produziert hat. Wer Werbeplätze einbindet, braucht dafür eine vertragliche Regel oder ein Format, das keine Animation zulässt. Das gilt genauso für eingebettete Drittinhalte und nutzergenerierte Uploads.

Wie prüfe ich Videos auf Flackern?

Mit dem kostenlosen PEAT-Tool des Trace Centers. Es analysiert Videodateien gegen beide Schwellenwerte und zeigt, an welcher Stelle es kritisch wird. Für eine grobe Vorprüfung reicht das Auge mit Stoppuhr – für die Freigabe kritischen Materials nicht.

Verwandte Themen

• 2.2.2 Pausieren, beenden, ausblenden – Bewegung, die stört statt schadet
• Barrierefreier Media-Player – Videos einbetten, ohne sie automatisch zu starten
• Slider & Karussells – die häufigste Quelle unnötiger Bewegung
• Kognition & Neurodiversität – warum Bewegung Aufmerksamkeit kostet
• 1.4.2 Audio-Steuerelement – das akustische Gegenstück
• Cheat Sheets & Checklisten – der Flacker-Check im Freigabeprozess