Dark Mode barrierefrei: Kontraste, Bilder und Systemeinstellungen richtig

Ein Dark Mode gilt bei vielen als automatischer Gewinn für die Augen – tatsächlich braucht ein dunkles Farbschema aber eine eigene Kontrastprüfung, weil sich Textfarbe, Hintergrund, Icons und Statusfarben im dunklen Modus anders verhalten als im hellen.

Wer Dark Mode zusätzlich zum hellen Standarddesign anbietet, verdoppelt im Grunde die Zahl der Farbkombinationen, die auf ausreichenden Kontrast geprüft werden müssen.

Dieser Beitrag zeigt, an welchen Stellen ein Dark Mode am häufigsten unbemerkt Barrieren einführt und wie sich Logos, Icons, Fokus-Indikatoren und Statusfarben für beide Modi zuverlässig prüfen lassen.

Dark Mode ist kein automatischer Barrierefreiheits-Bonus

Viele Unternehmen führen einen Dark Mode aus gestalterischen oder Trendgründen ein, ohne die neuen Farbkombinationen erneut auf Kontrast zu prüfen. Ein im hellen Modus ausreichender Kontrast überträgt sich nicht automatisch auf die dunkle Variante.

Für Menschen mit bestimmten Sehbeeinträchtigungen kann ein schlecht abgestimmter Dark Mode sogar schlechter lesbar sein als das helle Original, etwa wenn Text und Hintergrund im Dunkeln zu wenig Unterschied in der Helligkeit aufweisen.

Oft entsteht der Dark Mode technisch als reine Farbumkehr eines bestehenden Stylesheets, ohne dass jede einzelne Komponente noch einmal separat betrachtet wird. Genau an diesen automatisch umgekehrten, aber nie kontrollierten Stellen entstehen die meisten Kontrastprobleme.

Kontrastberechnung gilt in beiden Modi getrennt

Die Kontrastprüfung, die für das helle Design gilt, muss für jede Textfarbe-Hintergrund-Kombination im Dark Mode separat wiederholt werden. Eine gemeinsame Prüfung reicht nicht, weil sich Vordergrund- und Hintergrundfarbe im dunklen Modus meist komplett ändern.

Besonders anfällig sind sekundäre Texte wie Datumsangaben oder Meta-Informationen, die im hellen Modus mit hellgrau auf weiß schon knapp bemessen sind und im Dark Mode oft mit einem ähnlich knappen dunkelgrau auf schwarz weitergeführt werden.

Eine Farbpalette, die von Anfang an für beide Modi als Paar geplant wird, statt den Dark Mode nachträglich aus dem hellen Design abzuleiten, reduziert den Prüfaufwand deutlich und verhindert systematisch zu geringe Kontraste an vielen Stellen gleichzeitig.

Reines Schwarz auf Weiß vermeiden

Ein vollständig schwarzer Hintergrund mit reinem Weiß als Textfarbe erzeugt bei einigen Sehbeeinträchtigungen einen unangenehmen Halo-Effekt um die Buchstaben, der das Lesen eher erschwert als erleichtert.

Ein dunkles Grau statt reinem Schwarz als Hintergrund, kombiniert mit einem leicht abgedunkelten Weiß statt reinem Weiß als Textfarbe, reduziert diesen Effekt, ohne den nötigen Kontrastwert zu unterschreiten.

Dieser Effekt betrifft nicht nur Menschen mit diagnostizierter Sehbeeinträchtigung: Auch bei längerem Lesen am Bildschirm im Dunkeln berichten viele Nutzer über ein unangenehmes Nachleuchten reiner Schwarz-Weiß-Kombinationen, das ein abgestuftes Farbschema deutlich reduziert.

Bilder, Logos und Icons im Dark Mode

Ein Firmenlogo mit transparentem Hintergrund und dunkler Schrift verschwindet auf einem dunklen Hintergrund fast vollständig. Für den Dark Mode braucht es entweder eine helle Logo-Variante oder eine dezente Hintergrundfläche hinter dem Logo.

Auch Icons, die im hellen Modus mit dunkler Linienfarbe gezeichnet sind, müssen im Dark Mode automatisch auf eine helle Variante wechseln, statt als kaum sichtbare dunkle Form auf dunklem Grund zu verbleiben.

Produktfotos und Screenshots mit weißem Rahmen wirken im Dark Mode oft wie ein grelles, unpassend helles Fenster inmitten der dunklen Seite. Ein dezenter, abgerundeter Rahmen in einem dem Dark-Mode-Farbschema angepassten Ton wirkt hier deutlich stimmiger.

prefers-color-scheme und ein zusätzlicher manueller Umschalter

Die technische Einstellung prefers-color-scheme erkennt automatisch die Systemeinstellung des Betriebssystems und passt das Farbschema entsprechend an. Diese automatische Erkennung ist ein guter Ausgangspunkt, ersetzt aber nicht die Möglichkeit einer manuellen Wahl.

Ein zusätzlicher, gut auffindbarer Umschalter zwischen hellem und dunklem Modus gibt Nutzern die Kontrolle, unabhängig von der jeweiligen Systemeinstellung des Geräts, an dem sie gerade arbeiten.

Die gewählte Einstellung sollte über einen erneuten Besuch hinweg gespeichert bleiben, damit Nutzer den Umschalter nicht bei jedem Seitenaufruf erneut betätigen müssen, um wieder in ihrem bevorzugten Modus zu landen.

Fokus-Indikatoren und Statusfarben im Dark Mode testen

Ein Fokusrahmen, der im hellen Modus gut sichtbar ist, kann im Dark Mode durch eine zu ähnliche Farbe fast verschwinden. Mehr zu Fokus-Styles liest du im Beitrag Tastatur-Bedienbarkeit testen, dessen Grundsätze auch im dunklen Modus erneut geprüft werden sollten.

Dasselbe gilt für Statusfarben wie Rot für Fehler oder Grün für Erfolgsmeldungen: Diese Farben verändern ihre Wirkung auf dunklem Hintergrund und müssen dort ebenfalls ausreichenden Kontrast zum Hintergrund aufweisen.

Fehlermeldungen und Erfolgsmeldungen sollten zusätzlich zur Farbe immer ein Symbol oder einen Text tragen, damit die Bedeutung auch dann verständlich bleibt, wenn eine Farbe im Dark Mode blasser wirkt als geplant.

Systemweiter Kontrastmodus vs. selbstgebauter Dark Mode

Zu unterscheiden ist der eigene, gestalterisch entworfene Dark Mode von systemweiten Kontrastmodi des Betriebssystems, die Farben automatisch und teils sehr stark verändern, um maximale Lesbarkeit zu erzwingen.

Webseiten sollten in beiden Fällen funktionsfähig bleiben: der eigene Dark Mode als gestalterische Option, der systemweite Kontrastmodus als zusätzliche, vom Nutzer aktivierte Zwangsanpassung, die nicht durch eigene, überschreibende Stile blockiert werden sollte.

Wichtig ist deshalb, wichtige Informationen niemals ausschließlich über eine Hintergrundfarbe zu vermitteln, etwa eine farbig hinterlegte Fläche ohne Textbeschriftung, da ein systemweiter Kontrastmodus solche Flächen unter Umständen komplett neutralisiert.

Testablauf für beide Farbschemata

Ein vollständiger Test prüft jede zentrale Seite einmal im hellen und einmal im dunklen Modus, mit besonderem Augenmerk auf Fokus-Indikatoren, Statusfarben, Logos und sekundäre Texte.

Ein automatisierter Scan in beiden Modi liefert einen ersten Überblick über Kontrastverstöße, bevor eine manuelle Detailprüfung der auffälligen Stellen folgt.

Dieser doppelte Testdurchlauf gehört fest in den Freigabeprozess für jede größere Layoutänderung, damit ein neues Element nicht versehentlich nur für einen der beiden Modi geprüft und freigegeben wird.

Hinweis: Dieser Beitrag bietet allgemeine technische Hinweise zur Gestaltung von Dark-Mode-Farbschemata und ersetzt keine individuelle Rechtsberatung.

Häufig gestellte Fragen