Farbpaletten für Dark Mode richtig gestalten

So wählen Sie Farben aus, die in dunklen Umgebungen nicht ermüdend wirken und eine gute Lesbarkeit gewährleisten.

6 min Lesezeit Anfänger März 2026

Designer arbeitet an Farbpaletten für Dark Mode auf dem Tablet mit verschiedenen Farbschemen

Warum Dark Mode Farben anders sein müssen

Dark Mode ist längst nicht mehr optional — es’s zur Erwartung geworden. Aber hier’s das Problem: Die Farben, die in Light Mode wunderbar aussehen, werden in Dark Mode oft zu hell, zu grell oder sogar unlesbar. Das hat mit Physiologie zu tun, nicht nur mit Ästhetik.

Wenn Sie weiße oder helle Farben auf dunklem Hintergrund verwenden, sendet Ihre Anwendung Ihrem Auge viel mehr Licht. Das führt zu Blendung, Augenmüdigkeit und Kopfschmerzen — besonders bei längerer Nutzung. Plus: Kontraste spielen sich völlig anders ab. Ein Grau, das in Light Mode perfekt funktioniert, kann in Dark Mode unsichtbar werden.

Monitor mit Split-Ansicht: Links Light Mode mit hellem Hintergrund, rechts Dark Mode mit dunklem Hintergrund und deutlichem Kontrast-Unterschied

Die vier Grundprinzipien für Dark Mode Farbgestaltung

Gute Dark Mode Paletten folgen nicht den gleichen Regeln wie Light Mode. Sie brauchen einen anderen Ansatz.

Nicht zu hell, nicht zu dunkel

Der Hintergrund sollte nicht pechschwarz sein. Richtung #121212 bis #1e1e1e funktioniert besser — das gibt Ihnen noch Spielraum für Kontrast, ohne Ihre Augen zu überlasten. Ein echter schwarzer Hintergrund (#000000) schafft zu viel Kontrast und wirkt aggressiv.

Farbsättigung reduzieren

Farben wirken in Dark Mode intensiver. Nehmen Sie Ihre Akzentfarben und entsättigen Sie sie um 15–20 Prozent. Ein kräftiges Rot (#ff0000) wird zu einem weniger aggressiven Rot (#e74c3c). Das reduziert Augenbelastung und wirkt professioneller.

Text braucht weniger Kontrast

Das überrascht viele, aber: Reiner Weiß-auf-Schwarz ist nicht ideal für Dark Mode. Probieren Sie stattdessen leichte Grautöne (#e0e0e0 oder #d1d5db). Das reduziert Blendung und ist trotzdem mehr als lesbar — und fühlt sich angenehmer an.

Elevation durch Helligkeit zeigen

In Dark Mode funktioniert Tiefe anders. Statt Schatten zu nutzen (die unsichtbar werden), verwenden Sie hellere Grautöne für Karten und Container. Eine Karte könnte #2d2d2d sein, während der Hintergrund #1a1a1a ist. Das erzeugt klare visuelle Hierarchie.

Grafik zeigt vier verschiedene Dark Mode Farbpaletten nebeneinander: zu helles Grau, perfekter mittlerer Grauton, zu intensives Rot, und optimiertes gedämpftes Rot mit Vergleichsbeschriftungen

Drei bewährte Dark Mode Farbpaletten zum Starten

Diese Paletten funktionieren in der Praxis und sind ein guter Ausgangspunkt für Ihr eigenes Design.

Minimal Cool

Klassisch und modern, funktioniert überall

#0f0f0f

#1a1a1a

#2d2d2d

#e5e7eb

#3b82f6

Neutrale Grautöne mit kühlem Blauakzent. Funktioniert in produktiven Apps und Tools.

Warm Professional

Einladend, aber nicht zu verspielt

#1a1410

#2a2420

#3a3430

#e8e6e1

#d97706

Warme, erdige Grautöne mit bernsteinfarbenem Akzent. Gut für kreative oder Community-Anwendungen.

Vibrant Accessible

Energisch und WCAG AA konform

#111111

#1f1f1f

#2a2a2a

#f3f4f6

#10b981

Junges Design mit entsättigtem Grün. Sehr gute Lesbarkeit, perfekt für Anwendungen, bei denen Barrierefreiheit zählt.

So implementieren Sie Dark Mode Farben richtig

Das Wissen ist das eine — die Umsetzung das andere. Hier’s, wie Sie vorgehen, um sicherzustellen, dass Ihre Farben tatsächlich funktionieren.

Testen Sie bei verschiedenen Lichtverhältnissen

Ihr Design auf Ihrem Monitor bei Tageslicht aussieht anders als auf dem Handy nachts. Testen Sie in einem dunklen Raum, bei künstlichem Licht und mit reduzierter Displayhelligkeit. Das ist der reale Kontext Ihrer Nutzer.

CSS-Variablen verwenden, nicht hartcodiert

Definieren Sie Dark Mode Farben als CSS-Variablen. So können Sie bei Bedarf schnell anpassen, ohne jede einzelne Stelle im Code zu ändern. Ein Beispiel:

                  :root[data-theme="dark"] {
                  
                  --bg-primary: #1a1a1a;
                  
                  --bg-elevated: #2d2d2d;
                  
                  --text-primary: #e5e7eb;
                  
                  --text-secondary: #9ca3af;
                  
                  --accent: #3b82f6;
                  
                  }

WCAG AA-Kontrast prüfen (Minimum 4,5:1)

Sie können Tools wie WebAIM oder Contrast Ratio verwenden, um sicherzustellen, dass Ihr Text ausreichend Kontrast hat. Bei Dark Mode ist das sogar wichtiger, weil die Blendung schon eine zusätzliche Belastung ist.

Developer arbeitet am Code-Editor mit zwei nebeneinander geöffneten Browserfenstern: Links Light Mode, rechts Dark Mode Ansicht mit CSS-Code visible

Häufige Fehler bei Dark Mode Farben

Fehler 1: Pechschwarz als Hintergrund

#000000 ist zu hart. Verwenden Sie stattdessen #0f0f0f bis #1a1a1a. Das gibt Ihrem Design noch Raum zum Atmen und ist weniger ermüdend.

Fehler 2: Reiner Weiß-Text

Absolutes Weiß (#ffffff) auf dunklem Hintergrund blendet. Verwenden Sie #e5e7eb oder #d1d5db. Sie’s immer noch sehr lesbar, aber angenehmer für die Augen.

Fehler 3: Die Light Mode Palette einfach invertieren

Das funktioniert nicht. Ihre Light Mode Farben sind für einen hellen Hintergrund optimiert. In Dark Mode brauchen Sie völlig neue Farben mit angepasster Sättigung und Helligkeit.

Fehler 4: Akzentfarben nicht entsättigen

Knallige Farben wirken in Dark Mode wie eine Blitzleuchte. Reduzieren Sie die Sättigung um 15–20 Prozent, damit Ihre Akzente immer noch Aufmerksamkeit erregen, aber nicht überfordern.

Vergleich-Grafik mit zwei Dark Mode Designs nebeneinander: Links fehlerhaft mit reinem Weiß und pechschwarzem Hintergrund, rechts korrekt mit entsättigten Farben und optimiertem Grauton

Dark Mode Farben: Es geht um Wohlbefinden

Am Ende ist Dark Mode nicht nur ein visueller Trend — es’s eine Frage von Nutzerfreundlichkeit und Wohlbefinden. Wenn Sie Ihre Farbpalette richtig wählen, reduzieren Sie Augenbelastung, schaffen ein angenehmes Nutzungserlebnis und zeigen Ihren Nutzern, dass Sie ihre Gesundheit ernst nehmen.

Die beste Farbpalette ist nicht die schönste — es’s die, die am besten funktioniert. Testen Sie, iterieren Sie, und holen Sie sich Feedback. Starten Sie mit einer der bewährten Paletten, die ich oben gezeigt habe, und passen Sie sie an Ihr eigenes Design an. Nach ein paar Tests werden Sie schnell merken, was für Ihre Anwendung funktioniert.

“Dark Mode ist nicht optional — es’s eine Erwartung. Wenn Ihr Dark Mode schlecht aussieht oder weh tut, nutzen Ihre User einfach Light Mode. Und das ist nicht der Punkt.”
— Design-Weisheit aus der Praxis

Bereit, Ihre Farbpalette zu optimieren?

Die Grundlagen sind einfach — die Umsetzung ist die Kunst. Schauen Sie sich die verwandten Artikel an, um tiefer in Kontrast, Icon-Anpassung und die technische Umsetzung einzutauchen.

Lesen: Kontrast und WCAG Standards

Hinweis zum Inhalt

Dieser Artikel enthält allgemeine Richtlinien und Best Practices für Dark Mode Farbgestaltung. Die genauen Anforderungen und Standards können je nach Branche, Barrierefreiheit-Richtlinien und spezifischen Anwendungsfällen unterscheiden. Testen Sie Ihre Implementierung immer mit echten Nutzern und verwenden Sie Kontrast-Prüf-Tools wie WebAIM, um WCAG AA-Konformität zu gewährleisten. Bei kritischen Anwendungen (insbesondere im Gesundheits- oder Finanzwesen) sollten Sie mit Fachleuten für Barrierefreiheit zusammenarbeiten.