Dark Mode gestalten: Farben und Kontraste richtig wählen

Ein guter Dark Mode ist keine umgekehrte helle Website, sondern eine eigene, abgestimmte Palette. Die Grundregeln: sehr dunkles Grau statt Schwarz als Hintergrund, gebrochenes Weiß statt reinem Weiß für Text, aufgehellte und etwas entsättigte Akzentfarben und Tiefe durch hellere Flächen statt durch Schatten. Alle Farbpaare müssen dieselben Kontrastwerte erreichen wie im hellen Modus.

Die Grundlagen zu Farbkreis, Farbwirkung und Paletten stehen im Ratgeber Farbgestaltung. Dieser Artikel zeigt, was sich beim Wechsel ins Dunkle ändert.

Warum Invertieren nicht funktioniert

Die naheliegende Idee, alle Farben einfach umzukehren, scheitert an mehreren Stellen:

• Aus einem dezenten hellgrauen Kartenhintergrund wird ein fast schwarzer Kasten auf schwarzem Grund, die Struktur verschwindet.
• Akzentfarben ändern beim Invertieren ihren Farbton. Aus Violett wird ein Gelbgrün, die Marke ist nicht mehr erkennbar.
• Fotos und Logos sehen invertiert aus wie Negative.
• Schatten, die im hellen Modus Tiefe erzeugen, sind auf dunklem Grund kaum sichtbar.

Ein Dunkelmodus braucht deshalb eine eigene Zuordnung: Jede Farbrolle aus der hellen Palette bekommt einen eigenen Wert für Dunkel.

Die Grundfläche: dunkles Grau statt Schwarz

Als Hintergrund hat sich ein sehr dunkles Grau bewährt, oft mit einem leichten Stich in die Markenfarbe. Werte im Bereich um #121212 bis #1e1e1e sind verbreitet. Gegenüber reinem Schwarz hat das mehrere Vorteile:

• Der Sprung zu hellem Text ist weniger hart, lange Texte lesen sich ruhiger.
• Darüberliegende Flächen wie Karten oder Menüs lassen sich durch etwas hellere Töne absetzen.
• Ein leichter Farbstich verbindet den Dunkelmodus mit der Marke.

Viele Menschen empfinden hellen Text auf reinem Schwarz als leicht flimmernd oder überstrahlend. Ein gedämpfter Hintergrund und ein gebrochenes Weiß für Text mildern diesen Effekt.

Tiefe durch Helligkeit statt Schatten

Im hellen Modus heben Schatten Elemente vom Hintergrund ab. Auf dunklem Grund funktioniert das kaum. Stattdessen werden Flächen umso heller, je höher sie liegen:

Die Abstände zwischen den Stufen können klein sein. Wichtig ist, dass die Reihenfolge immer gleich bleibt, damit die Tiefe konsistent wirkt.

Text in Abstufungen

Auch Text braucht mehrere Helligkeitsstufen, um Hierarchie zu zeigen. Statt verschiedener Grautöne arbeiten viele Designsysteme mit einem hellen Grundton in unterschiedlicher Deckkraft:

• Haupttext und Überschriften: gebrochenes Weiß, zum Beispiel #e8e6f0. Auf #121212 erreicht dieser Ton etwa 15 zu 1.
• Sekundärtext wie Bildunterschriften: etwas gedämpfter, aber mit mindestens 4,5 zu 1.
• Deaktivierte Elemente: deutlich zurückgenommen.

Prüfen Sie jede Stufe einzeln. Ein Grau, das im Entwurf noch gut aussieht, liegt auf dunklem Grund schnell unter dem Mindestwert.

Akzentfarben anpassen

Gesättigte Farben, die auf Weiß kräftig und gut lesbar sind, wirken auf Dunkel oft grell oder zu dunkel. Zwei Anpassungen helfen:

1. Aufhellen: Dunkle Akzentfarben erreichen auf dunklem Grund keinen ausreichenden Kontrast. Ein Violett wie #5b21b6 kommt auf Weiß auf etwa 9 zu 1, auf #121212 nur auf etwa 2 zu 1. Eine hellere Stufe derselben Farbe, etwa #a78bfa, erreicht dort knapp 7 zu 1.
2. Entsättigen: Sehr kräftige Farben scheinen auf dunklem Grund zu leuchten und ermüden das Auge. Etwas weniger Sättigung wirkt ruhiger und bleibt trotzdem erkennbar.

Wenn Ihre Palette bereits Tonstufen von sehr hell bis sehr dunkel enthält, wie im Artikel Farbschema für die Website finden beschrieben, wählen Sie für den Dunkelmodus einfach eine hellere Stufe aus derselben Reihe. Die Marke bleibt erkennbar, der Kontrast stimmt.

Kontraste: dieselben Regeln

Für den Dunkelmodus gelten exakt dieselben Grenzwerte wie für den hellen: 4,5 zu 1 für normalen Text, 3 zu 1 für große Schrift, Bedienelemente und bedeutungstragende Icons. Prüfen Sie deshalb jede Farbkombination neu, auch wenn sie im hellen Modus schon bestanden hat. Wie das Kontrastverhältnis berechnet wird und welche Werte für welche Elemente gelten, erklärt der Artikel Kontrast und Lesbarkeit.

Besonders gern übersehen werden im Dunkelmodus:

• Rahmen von Eingabefeldern, die auf dunklem Grund verschwinden,
• der Fokusrahmen bei Tastaturbedienung,
• Statusfarben für Fehler und Erfolg, die auf Dunkel oft zu dunkel sind,
• Linien und Beschriftungen in Diagrammen.

Bilder, Logos und Grafiken

Fotos werden im Dunkelmodus nicht verändert, wirken aber neben dunklen Flächen oft sehr hell. Eine leichte Abdunklung per CSS-Filter kann helfen, sollte aber sparsam eingesetzt werden, damit Farben nicht verfälscht werden.

Logos und Grafiken mit dunklen Linien brauchen eine helle Variante. Bei SVG-Grafiken lässt sich das elegant lösen, indem die Linienfarbe die aktuelle Textfarbe übernimmt. Bei Rastergrafiken mit transparentem Hintergrund müssen Sie prüfen, ob dunkle Bildteile auf dem dunklen Grund noch sichtbar sind.

Formulare und Statusfarben

Formulare sind im Dunkelmodus die häufigste Schwachstelle. Eingabefelder brauchen einen eigenen, etwas helleren Hintergrund oder einen gut sichtbaren Rahmen, sonst sind sie kaum von der Fläche zu unterscheiden. Platzhaltertext darf nicht so weit gedimmt werden, dass er verschwindet, und Fehlermeldungen müssen auch auf dunklem Grund sofort auffallen.

Statusfarben für Erfolg, Warnung und Fehler werden wie die Akzentfarbe behandelt: hellere Stufe, etwas weniger Sättigung, Kontrast prüfen. Ein dunkles Rot, das auf Weiß gut funktioniert, ist auf dunklem Grund oft kaum lesbar. Ergänzen Sie Statusmeldungen außerdem immer um Text oder ein Symbol, damit die Information nicht nur an der Farbe hängt.

Typische Fehler

• Reines Schwarz und reines Weiß: maximaler Kontrast, aber unruhig bei langen Texten.
• Akzentfarben unverändert übernommen: Dunkle Markenfarben gehen auf dunklem Grund unter.
• Schatten als einzige Abgrenzung: Karten verschmelzen mit dem Hintergrund.
• Logos ohne helle Variante: Das dunkle Logo verschwindet im Kopfbereich.
• Nur die Startseite geprüft: Formulare, Tabellen, Hinweisboxen und eingebettete Inhalte werden vergessen.
• Eingebettete Inhalte: Karten, Videos oder Widgets von Drittanbietern bleiben oft hell und sollten zumindest optisch eingerahmt werden.

Technische Umsetzung

Die Systemeinstellung des Geräts lässt sich per CSS abfragen. Ein bewährter Aufbau arbeitet mit Custom Properties für jede Farbrolle:

:root {
  --farbe-hintergrund: #fcfaf6;
  --farbe-text: #1c1430;
  --farbe-akzent: #5b21b6;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --farbe-hintergrund: #121212;
    --farbe-text: #e8e6f0;
    --farbe-akzent: #a78bfa;
  }
}

Die Eigenschaft color-scheme sorgt dafür, dass auch browsereigene Elemente wie Bildlaufleisten und Formularfelder im passenden Modus erscheinen. Neuere Browser kennen zusätzlich die CSS-Funktion light-dark(), mit der sich beide Werte direkt nebeneinander angeben lassen.

Wenn Sie einen Umschalter anbieten, speichern Sie die Wahl im Browser und setzen Sie sie per Attribut am Wurzelelement, sodass sie Vorrang vor der Systemeinstellung hat. Wichtig ist, die Einstellung früh zu setzen, damit die Seite beim Laden nicht kurz hell aufblitzt.

Checkliste: Dark Mode

• Grundfläche ist ein sehr dunkles Grau, nicht reines Schwarz.
• Text ist gebrochenes Weiß, mit Abstufungen für Sekundärtext.
• Flächen werden mit jeder Ebene etwas heller.
• Akzentfarben sind aufgehellt und leicht entsättigt.
• Alle Text-Hintergrund-Paare erreichen die WCAG-Werte.
• Eingabefelder, Fokusrahmen und Statusfarben sind sichtbar.
• Logos und Grafiken haben helle Varianten.
• Systemeinstellung wird übernommen, eine manuelle Wahl wird gespeichert.

Ein sorgfältig gestalteter Dunkelmodus wirkt nicht wie ein Nebenprodukt, sondern wie eine zweite, gleichwertige Fassung derselben Marke.