Best Practices für Farbpaletten im Dark Mode

Mein erstes ausgeliefertes Dark Theme war im Nachhinein eine Katastrophe. Ich nahm unsere helle UI, jagte jede Farbe durch einen "Invertieren"-Filter, schob ein paar Werte von Hand zurecht und machte Feierabend. In Figma sah es gut aus. Dann kamen die Support-Tickets: Text, der "summte", Markenbuttons, die wie radioaktive Bonbons leuchteten, Karten, die alle zu einer flachen Dunkelfläche verschmolzen. Die Lektion saß. Eine gute Dark-Mode-Farbpalette ist keine umgekrempelte helle Palette. Sie ist ihr eigenes Designproblem mit eigenen Regeln, und die meisten dieser Regeln laufen deinem Instinkt zuwider.

Hier ist, was ich mir vor diesem ersten Versuch gewünscht hätte zu wissen.

Dark Mode ist keine Invertierung

Wenn du ein helles Theme invertierst, werden alle Beziehungen, die es funktionieren ließen, durcheinandergewirbelt. Weißer Text auf einem marineblauen Button mag im Light Mode bei 8:1 Kontrast perfekt sein; drehst du das um, landest du womöglich bei einem blassen Button mit grauem Text, der die Barrierefreiheit komplett verfehlt. Schatten, die in hellen UIs viel der Tiefe tragen, verschwinden auf dunklem Hintergrund praktisch — ein 10%-Schwarzschatten über einer fast schwarzen Fläche ist unsichtbar. Gesättigte Farben, die auf Weiß selbstbewusst und freundlich wirken, werden auf Schwarz aggressiv und vibrierend.

Das mentale Modell, das ich nutze, lautet daher: Ein Dark Theme ist ein eigenständiger Satz von Designentscheidungen, der zufällig dasselbe Layout und dieselbe Marke teilt. Du löst Kontrast, Hierarchie, Tiefe und Akzentfarbe von Grund auf neu, gegen eine dunkle Leinwand. Wenn dein Werkzeug es erlaubt, zwei Farbsätze zu pflegen (semantische Tokens sind der saubere Weg dafür — mehr dazu in unserem Beitrag über Farb-Tokens im Designsystem), dann zahlt sich genau das in diesem Moment aus.

Nimm Dunkelgrau, nicht reines Schwarz

Das ist der mit Abstand häufigste Fehler, und es lohnt sich zu verstehen, warum reines Schwarz scheitert, statt nur zu hören, dass man es vermeiden soll.

Reines Schwarz (#000000) mit reinweißem (#FFFFFF) Text erreicht technisch 21:1 — das maximal mögliche Kontrastverhältnis. Man könnte meinen, maximaler Kontrast sei das Ziel. Ist er nicht. Dieser extreme Helligkeitsabstand verursacht Halation: Auf dunklem Hintergrund weitet sich die Pupille, um mehr Licht hereinzulassen, und heller Text verläuft und verschmiert an den Rändern. Für Menschen mit Astigmatismus — ein großer Teil der Bevölkerung — verwandelt der Effekt Absätze in einen glühenden, ermüdenden Brei. Lange Lesesitzungen werden regelrecht unangenehm.

Es gibt ein zweites, praktischeres Problem. Wenn deine Grundebene #000000 ist, kannst du nach unten nirgendwo hin. Du kannst keine Fläche dunkler als Schwarz machen, also ist jedes Gefühl zurückgesetzter Tiefe dahin, und Schatten haben nichts, worauf sie fallen könnten.

Die Lösung ist, mit einem sehr dunklen Grau zu starten. Googles Material Design empfiehlt #121212 als Basis-Dunkelfläche, und nach Jahren des Bauens solcher Themes halte ich das für nahezu perfekt. Es ist dunkel genug, um als "Dark Mode" gelesen zu werden, lässt aber in beide Richtungen Luft. Für Text ersetze reines Weiß durch ein gebrochenes Weiß im Bereich #E0E0E0 bis #F2F2F2. Weiß auf #121212 in dieser Abstufung erreicht WCAG noch bequem und tötet zugleich das Halations-Glühen.

Eine neutrale Ausgangspalette, zu der ich oft greife:

• Basis-Hintergrund: #121212
• Primärtext: #E6E6E6 (hohe Betonung)
• Sekundärtext: #A8A8A8 (mittlere Betonung, immer noch deutlich über 4,5:1)
• Deaktivierter / Hinweistext: etwa #6E6E6E

Ein subtiler Trick: Tönt eure Dunkelgrautöne ganz leicht in Richtung eures Markenfarbtons, statt reine Neutralgrautöne zu verwenden. Eine Basis von #131316 mit einem Hauch Blau oder #14110F mit einem Tick Wärme wirkt beabsichtigt und markentypisch statt wie ein Standard-Theme. Halte es subtil — höchstens ein paar Punkte Sättigung.

Vermittle Höhe über hellere Flächen, nicht über Schatten

Im Light Mode schwebt eine Karte dank ihres Schattens über der Seite. Im Dark Mode sind Schatten kaum wahrnehmbar, also kehren wir die Logik um: Je höher eine Fläche liegt, desto heller wird sie. Ein Modal ist heller als die Karte, die es überdeckt, die wiederum heller ist als die Seite dahinter.

Material formalisiert das als Elevation-Overlay — eine halbtransparente weiße Schicht, die über der Basisfläche liegt und mit zunehmender Höhe undurchsichtiger wird (grob 0 % an der Basis bis etwa 16 % auf der höchsten Ebene). Du musst die buchstäbliche Overlay-Mathematik nicht implementieren; du kannst die Ergebnisse einfach in diskrete Tokens gießen. Eine Skala, die ich ausgeliefert habe und der ich vertraue:

• Ebene 0 (Seite): #121212
• Ebene 1 (Karten): #1E1E1E
• Ebene 2 (Menüs, angehobene Panels): #242424
• Ebene 3 (Dialoge, Modals): #2C2C2C
• Ebene 4 (Popovers, Top-Sheets): #333333

Jeder Schritt ist nur eine Handvoll Punkte heller, und diese Zurückhaltung ist wichtig — die Sprünge sollen gespürt, nicht angekündigt werden. Konsequent eingesetzt, verleiht das deiner Oberfläche echte Tiefe ohne einen einzigen Schatten und löst das "alles verschmilzt"-Problem, das meinen ersten Versuch plagte. Du kannst obendrauf noch einen zarten Schatten legen, um die Trennung zu verstärken, aber die Helligkeitsverschiebung leistet die eigentliche Arbeit.

Entsättige deine Akzentfarben

Nimm die Hero-Farbe deiner Marke — sagen wir ein knalliges SaaS-Blau wie #2563EB — und setze sie auf einen #121212-Hintergrund. Sie vibriert. Stark gesättigte Farben auf dunklem Feld erzeugen ein optisches Summen, und sie verfehlen oft den Kontrast für Text oder Icons, obwohl sie laut wirken.

Die Lösung ist kontraintuitiv: Zieh die Sättigung runter und die Helligkeit rauf. Materials Empfehlung lautet, hellere Tönungen zu verwenden (denk an den 200–50-Bereich einer Farbskala) und sie zu entsättigen, bis sie 4,5:1 gegen die dunkle Fläche erreichen. In der Praxis entsättige ich Markenfarben für den Dark Mode um etwa 20–40 % und helle sie auf, dann prüfe ich den Wert.

Konkret könnte aus #2563EB im Dark Mode etwas wie #7AA2F7 werden — weicher, heller und auf der dunklen Fläche weitaus lesbarer. Dein Light-Mode-Akzent und dein Dark-Mode-Akzent sind Geschwister, nicht derselbe Wert. Genau für diese gepaarte Hell-/Dunkel-Erkundung ist der Farbpaletten-Generator gebaut: Wähle deinen Farbton, dann schiebe Sättigung und Helligkeit, während du den Kontrastwert live mitlaufen siehst.

Ein paar ehrliche Einschränkungen:

• Halte semantische Farben erkennbar. Fehlerrot, Erfolgsgrün und Warn-Amber müssen nach dem Entsättigen immer noch als Rot, Grün und Amber gelesen werden. Aufhellen und abschwächen, aber den Farbton nicht so weit verschieben, dass ein Fehler aufhört, nach Gefahr auszusehen.
• Große Farbflächen sind etwas anderes als Text. Ein großes, gesättigtes Hero-Banner verträgt mehr Sättigung als ein kleines Label, denn du verlangst von niemandem, feinen Text daraus abzulesen.
• Wende Elevation-Overlays nicht auf farbige Flächen an. Ein primärfarbener Button behält seine Farbe über alle Höhenstufen; nur deine neutralen Flächen hellen auf, wenn sie aufsteigen.

Halte den WCAG-Kontrast — in beide Richtungen

Die Barrierefreiheits-Zielwerte ändern sich im Dunkeln nicht. WCAG 2.1 verlangt 4,5:1 für normalen Fließtext und 3:1 für großen Text (sowie für bedeutungstragende UI-Komponenten und Icons). Was sich ändert, ist, dass die Fehler hinterhältiger sind.

Die Falle, die mir am häufigsten begegnet, ist mitteltoniger grauer Text — etwa #888888 auf #121212 —, der elegant aussieht und bei Sekundärtext leise durchfällt. Lass immer die echten Zahlen laufen. Die offizielle Referenz ist die WCAG-Kontrastrichtlinie des W3C, und jeder Kontrast-Checker (auch der in unserem Farbpaletten-Generator eingebaute) liefert dir das Verhältnis in Sekunden.

Zwei Dinge, die du beim Testen wissen solltest. Erstens: "Mehr Kontrast ist immer besser" ist im Dark Mode falsch — reines Weiß maximiert die Zahl, löst aber die beschriebene Halation aus, also optimierst du auf angenehme Lesbarkeit, nicht auf das höchstmögliche Verhältnis. Zweitens ersetzt die nächste Generation des Standards, WCAG 3.0, das simple Verhältnis durch APCA (den Advanced Perceptual Contrast Algorithm), der modelliert, wie das Auge hellen und dunklen Text tatsächlich wahrnimmt, und mit Polarität weit besser umgeht. Es ist noch im Entwurfsstadium, liefere also heute gegen WCAG 2.1 aus, aber wenn du zukunftssicher sein willst, jage deine dunkle Palette als Plausibilitätstest durch einen APCA-Checker — er ist bei dunklen Hintergründen spürbar ehrlicher.

Teste es dort, wo Menschen es tatsächlich nutzen

Eine dunkle Palette kann in Figma jeden Check bestehen und draußen trotzdem scheitern. Die Variable, die ich früh am meisten unterschätzt habe, war der Bildschirm selbst: OLED-Panels stellen #000000 als wirklich abgeschaltete Pixel mit brutalem Kontrast zu beleuchtetem Text dar, während günstigere LCDs die Schwarztöne anheben und deine sorgsam abgestimmten Höhenstufen verwaschen. Die Palette, die auf deinem Monitor geschichtet wirkt, kann auf dem Billig-Laptop von jemandem flach aussehen.

Meine Test-Checkliste, auf die harte Tour gelernt:

• Auf einem echten OLED-Smartphone bei niedriger Helligkeit, nachts, anschauen. Hier zeigen sich Halation und Übersättigung. Wenn es hier angenehm ist, ist es überall angenehm.
• Die Höhenstufen auf einem billigen LCD prüfen. Wenn deine Karten im Hintergrund verschwinden, sind deine Stufen zu subtil.
• Live zwischen Hell und Dunkel umschalten. Grelle Helligkeitsblitze bedeuten meist, dass deine dunkle Basis zu hell oder deine helle Basis zu grau ist.
• Mit Bildern und Nutzerinhalten ansehen. Echte Fotos, Avatare und eingebettete Medien liegen auf deinen Flächen und können auf Arten kollidieren, die ein sauberes Mockup nie zeigt.
• Bestätigen, dass Fokuszustände und Rahmen überleben. Subtile 1px-Rahmen, die im Light Mode Eingabefelder definierten, verschwinden im Dunkeln oft und brauchen einen helleren Wert.

Die Kurzfassung

Wenn ich alles auf eine Handvoll Schritte verdichten müsste: Starte bei #121212, nie bei #000000. Verwende gebrochenes Weiß für Text, nicht reines Weiß. Zeige Tiefe, indem du angehobene Flächen aufhellst, da Schatten hier kaum existieren. Entsättige und helle deine Akzente auf, bis sie aufhören zu summen und anfangen, den Kontrast zu bestehen. Halte die Linie bei 4,5:1 für Fließtext, aber widerstehe dem Drang, das Maximum zu jagen. Und teste auf einem echten OLED-Bildschirm in einem dunklen Raum, denn das ist die eine Umgebung, die deine Mockups niemals simulieren können.

Richtig gemacht, ist ein Dark Theme nicht bloß eine höfliche Option für Nachteulen — es ist eine ruhigere, fokussiertere Version deines Produkts. Es braucht nur, es als das eigenständige Designproblem zu behandeln, das es tatsächlich ist.