Dark Mode und barrierefreie Farbpaletten richtig umsetzen
Dark Mode ist keine Option mehr, sondern Erwartung; aber ein falscher Kontrast schadet Marke und Barrierefreiheit zugleich. So wird es richtig eingerichtet.
rabbitclip-TeamVeröffentlicht: 4 Min. Lesezeit
Kurz gesagt
Dark Mode besteht nicht nur aus einem dunklen Hintergrund mit hellem Text; wird es falsch umgesetzt, sinkt das Kontrastverhältnis, Text wird schwer lesbar, und die Markenfarbe wirkt auf dunklem Grund wie ein anderer Farbton. Das Kontrastverhältnis sollte bei normal großem Text mindestens 4.5:1 betragen, bei großen Überschriften mindestens 3:1 (W3C WCAG 2.1, Contrast Minimum).
Das ist nicht nur eine Geschmacksfrage. In der EU gilt seit Juni 2025 der European Accessibility Act (Directive (EU) 2019/882), und bestimmte digitale Dienste müssen dessen Barrierefreiheitsanforderungen erfüllen (EUR-Lex, Directive 2019/882). Für ein Unternehmen mit Kunden im Vereinigten Königreich oder in der EU ist das zunehmend eine Compliance-Frage, nicht nur gute Designpraxis.
Im Folgenden die vier Bestandteile eines sauberen Dark-Mode-Setups: Kontrast, Markenfarbe, Konsistenz und der Testprozess.
Wie das Kontrastverhältnis berechnet wird
Das Kontrastverhältnis misst den relativen Helligkeitsunterschied zwischen Textfarbe und Hintergrundfarbe; 1:1 bedeutet gar keinen Unterschied, 21:1 ist so scharf wie Schwarz auf Weiß. Der WCAG-Standard betrachtet 4.5:1 als Minimum für normalen Text und 3:1 für großen Text (18 Punkt fett oder größer, oder 24 Punkt normal) (W3C WCAG 2.1).
Das lässt sich nicht von Hand berechnen; der Kontrastprüfer in den Entwicklertools des Browsers oder eines der kostenlosen Online-Tools liefert nach Eingabe der Farben sofort das Verhältnis. Ein dunkelgrauer Hintergrund mit mittelgrauem Text ist ein häufiger Fehler im Dark Mode eines Stromerzeuger-Herstellers; das Verhältnis landet meist unter 3:1, und die Lesbarkeit sinkt entsprechend.
Wie sich eine Markenfarbe auf dunklem Grund verhält
Eine Markenfarbe, die auf hellem Grund lebendig wirkt, kann auf dunklem Grund matt oder, ebenso häufig, grell leuchten; derselbe Farbwert wirkt auf beiden Untergründen nicht gleich. Deshalb braucht Dark Mode eine eigene Variante der Markenfarbe, keine reine Kopie desselben Codes.
Das rote Markenzeichen eines Sportvereins, das auf Weiß klar wirkt, kann auf Schwarz wie eine Neonreklame wirken und die Augen ermüden; eine Variante mit etwas reduzierter Sättigung hält die Marke erkennbar, ohne die Belastung.
Konsistenz: eine Entscheidung für Komponenten, nicht nur ein Farbwechsel
Dark Mode endet nicht bei Hintergrund- und Textfarbe; Schatten, Rahmen, Icons und die Hintergründe hinter Bildern brauchen einen zweiten Blick. Eine Karte, die auf hellem Grund durch einen feinen Schatten abgesetzt ist, kann auf dunklem Grund völlig verschwinden; ein dünner Rahmen übernimmt dann die Aufgabe des Schattens.
Bilder sind ein eigenes Thema: Ein Produktfoto auf weißem Hintergrund kann auf einer dunklen Seite wie ein unpassender weißer Kasten wirken; die Lösung ist entweder eine Version mit transparentem Hintergrund oder ein weicher Rahmen darum.
Test: wer prüft, mit welchem Werkzeug
Bevor etwas live geht, braucht jedes Text-Hintergrund-Paar eine eigene Kontrastprüfung, und funktionale Elemente wie Schaltflächen, Formularbeschriftungen und Fehlermeldungen sollten nicht übersprungen werden. Ist die Fehlermeldung eines Formulars ein kontrastarmes Rot, kann ein Besucher sie ganz übersehen und das Formular mehrfach absenden, ohne den Grund zu kennen.
- Jedes Text-Hintergrund-Paar durch einen Kontrastprüfer laufen lassen
- Eine eigene Dark-Mode-Variante für die Markenfarbe definieren
- Bilder und Icons in beiden Modi separat prüfen
- Automatisches Umschalten nach Systemeinstellung (prefers-color-scheme) testen
Braucht jede Website Dark Mode
Nicht jede Seite braucht ihn; aber bei einem Publikum, das ein technisches Produkt nutzt (Software, eine App, ein Dashboard), sind die Erwartungen hoch. Eine Broschürenseite kann Dark Mode als niedrigere Priorität einstufen; dann fließt der Aufwand besser in ein korrektes Kontrastverhältnis im hellen Modus, denn Barrierefreiheit ist kein Thema, das nur den Dark Mode betrifft.
Sich allein auf Farbe verlassen: das Risiko der Farbenblindheit
Ein ungültiges Feld allein mit Rot zu markieren, kann für einen Besucher mit Farbenblindheit gar nichts bedeuten; ein nennenswerter Teil der Bevölkerung hat eine Form von Rot-Grün-Schwäche. Farbe sollte immer durch ein Symbol oder Text unterstützt werden, nie allein die Botschaft tragen.
Zeigt eine Bestandsanzeige «auf Lager» in Grün und «ausverkauft» in Rot ohne begleitende Beschriftung, erreicht diese Information manche Besucher überhaupt nicht; ein kleines Icon oder ein kurzes Text-Tag verhindert, dass Farbe die einzige Signalquelle ist.
Wie eine manuelle Einstellung gemerkt wird
Wechselt ein Besucher von Hand von Dark Mode zu hellem Modus, sollte diese Wahl beim nächsten Besuch erhalten bleiben; bei jedem Seitenaufruf zur Systemeinstellung zurückzuspringen, ärgert den Besucher unnötig. Die Einstellung liegt im lokalen Speicher des Browsers und wird bei jedem Laden der Seite von dort gelesen.
Fehlt diese Erinnerung auf der Seite eines Gamestudios, muss ein Besucher bei jedem Besuch dieselbe Einstellung erneut vornehmen; ein kleines technisches Detail, aber ein wiederkehrender Reibungspunkt.
Statt sich allein auf den lokalen Speicher zu verlassen, kann die Einstellung auch als Kontoeinstellung serverseitig gespeichert werden; bei einem angemeldeten Besucher trägt das die Wahl auch über verschiedene Geräte hinweg.
Richtig umgesetzt mit dem passenden Kontrastverhältnis schützt Dark Mode die Marke und hält die Seite für ein breiteres Publikum lesbar. rabbitclip liefert beide Modi eines Designsystems kontrastgetestet aus; wir können das Kontrastverhältnis Ihrer aktuellen Seite gemeinsam prüfen.
Häufige Fragen
Was ist das minimale Kontrastverhältnis?
4.5:1 für normalen Text, 3:1 für große Überschriften; beide Werte stammen aus dem W3C-Standard WCAG 2.1.
Sollte Dark Mode automatisch aktiviert werden?
Automatisches Umschalten nach Geräte- oder Browsereinstellung (prefers-color-scheme) wird empfohlen, zusätzlich zu einem manuellen Schalter.
Betrifft uns der Europäische Rechtsakt zur Barrierefreiheit?
Für digitale Produkte mit Kunden in der EU oder im Vereinigten Königreich zunehmend eine relevante Frage; der Umfang hängt von der Art des Geschäfts ab.
Sollte sich die Markenfarbe im Dark Mode ändern?
Meist ja; eine Variante mit angepasster Sättigung funktioniert besser als exakt denselben Farbton wiederzuverwenden.
Wie verbreitet ist Farbenblindheit?
Sie betrifft einen nennenswerten Teil der Bevölkerung, weshalb Information nie allein über Farbe transportiert werden sollte.
