ClarusPlus

Barrierefreiheit und Dark Mode – wie anpassbare Farbschemata wirklich helfen

Mehr als ein Trend

Dark Mode ist auf fast jedem Betriebssystem, Browser und Gerät verfügbar. Millionen Nutzer:innen haben ihn dauerhaft aktiviert.

Doch während viele Unternehmen Dark Mode als ästhetisches Feature behandeln, übersehen sie seine eigentliche Bedeutung:

Für einen erheblichen Teil der Nutzer:innen ist Dark Mode keine Präferenz. Er ist eine Notwendigkeit.

Wer auf anpassbare Farbschemata angewiesen ist

Menschen mit Lichtsensitivität Helle Bildschirme können Kopfschmerzen, Augenschmerzen und Migräne auslösen. Dark Mode reduziert die Lichtintensität – und damit den Schmerz.

Menschen mit bestimmten Sehbeeinträchtigungen Manche Erkrankungen (z.B. Irlen-Syndrom, Nystagmus) machen helle Hintergründe besonders belastend.

Menschen mit neurologischen Erkrankungen MS, Epilepsie und andere Erkrankungen können durch intensive Helligkeit getriggert werden.

Nutzer:innen in dunklen Umgebungen Nachts, im Bett, in abgedunkelten Räumen – ein heller Screen ist schlicht unangenehm.

Was viele Dark-Mode-Implementierungen falsch machen

Ein Dark Mode ist schnell implementiert. Ein zugänglicher Dark Mode ist das nicht.

Fehler 1: Kontrast wird schlechter statt besser

Helles Grau auf Dunkelgrau sieht „sanft” aus – erfüllt aber oft nicht die WCAG-Mindestkontrastanforderungen.

Fehler 2: Bilder und Icons werden nicht angepasst

Logos und Icons, die für hellen Hintergrund optimiert sind, werden auf dunklem Hintergrund unsichtbar.

Fehler 3: Systemeinstellung wird ignoriert

Nutzer:innen haben Dark Mode im Betriebssystem aktiviert. Die Website ignoriert prefers-color-scheme: dark – und zeigt trotzdem weißen Hintergrund.

Fehler 4: Kein manueller Override

Nutzer:innen können weder in Dark noch Light Mode wechseln. Keine Kontrolle, keine Anpassung.

Was gutes Design hier leisten muss

Systemeinstellungen respektieren Das CSS-Media-Feature prefers-color-scheme liest die Betriebssystem-Einstellung aus. Websites sollten darauf reagieren – automatisch.

Manuelle Umschaltung ermöglichen Nicht jeder Nutzer will das Systemstandard verwenden. Ein Toggle auf der Website gibt Kontrolle zurück.

Kontraste in beiden Modi prüfen WCAG 2.1 AA gilt für hellen und dunklen Modus gleichermaßen. 4,5:1 für normalen Text – in beiden Varianten.

Farbpaletten separat definieren Dark Mode ist keine einfache Invertierung. Sättigte Farben wirken auf dunklem Hintergrund anders – Paletten müssen eigenständig entwickelt werden.

Dark Mode ist nur ein Teil des Bildes

Anpassbare Farbschemata gehen über Hell und Dunkel hinaus.

Nutzer:innen profitieren außerdem von:

Hoher Kontrast – für Menschen mit sehr schlechtem Sehvermögen
Gelbton / Sepia – reduziert Blaulichtanteil, schont die Augen
Individuell einstellbare Hintergrundfarben – für Menschen mit spezifischen visuellen Anforderungen

Echte Zugänglichkeit bedeutet nicht einen Dark Mode. Sie bedeutet Kontrolle für jeden Nutzer.

Was WCAG dazu fordert

WCAG 2.1, Erfolgskriterium 1.4.3 (Kontrast, AA): Text muss in jedem Darstellungsmodus ausreichenden Kontrast haben.

Erfolgskriterium 1.4.4 (Textgröße): Text muss auf 200 % vergrößerbar sein – unabhängig vom Farbmodus.

Erfolgskriterium 1.4.11 (Nicht-Text-Kontrast, AA): UI-Komponenten und Grafiken müssen auch im Dark Mode die Kontrastanforderungen erfüllen.

Wie ClarusPlus unterstützt

Das ClarusPlus Accessibility-Widget gibt Nutzer:innen direkte Kontrolle:

Dark Mode auf Knopfdruck aktivieren
Hohen Kontrast einstellen
Hintergrundfarbe individuell anpassen
Helligkeit und Sättigung regulieren

Keine Systemeinstellungen nötig. Direkt auf Ihrer Website.

Der automatische Audit prüft zusätzlich, ob Kontraste in der Standard-Darstellung WCAG-konform sind.

Ihre nächsten Schritte

Prüfen Sie, ob Ihre Website auf prefers-color-scheme: dark reagiert
Testen Sie Kontraste in beiden Farbmodi
Aktivieren Sie das ClarusPlus Widget für individuelle Farbanpassung Ihrer Nutzer:innen

Kontakt: [email protected]

Mehr erfahren: clarusplus.com