Dark Mode: Pflicht oder Kür?

Dark Mode ist überall. Betriebssysteme, Apps, Browser: alles hat inzwischen einen Dark Mode. Und bei jedem Website-Projekt kommt irgendwann die Frage: „Brauchen wir das auch?“

Die ehrliche Antwort: vielleicht. Dark Mode ist kein Selbstzweck. Er lohnt sich, wenn er zur Zielgruppe, zum Inhalt und zum Budget passt. Und er kostet mehr Aufwand, als die meisten denken.

Was Dark Mode wirklich leistet

Dark Mode ist keine Modeerscheinung. Er hat echte Vorteile und ist im UX/UI Design eine Entscheidung wie jede andere:

Dark Mode blendet weniger. Bei wenig Umgebungslicht ist ein heller Hintergrund unangenehm, ein dunkler ist entspannter für die Augen.

Auf OLED-Displays spart er Strom. Schwarze Pixel bleiben dunkel und verbrauchen nichts, was sich bei modernen Smartphones in der Akkulaufzeit bemerkbar macht.

Viele Nutzer haben sich daran gewöhnt. Wer sein System dauerhaft auf Dark Mode gestellt hat, erwartet, dass Websites mitziehen.

Und er wirkt auf die Marke. In Technik, Gaming, Design und im gehobenen Segment steht Dark Mode für Wertigkeit.

Wann Dark Mode Sinn ergibt

Wenn eure Zielgruppe es erwartet

Tech-Affine Zielgruppen, Entwickler, Designer: diese Gruppen nutzen Dark Mode oft selbstverständlich. Eine Website ohne Dark Mode wirkt dort nicht professionell.

Wenn die Website viel genutzt wird

Tools, Dashboards, Portale: alles, was Nutzer lange und wiederkehrend nutzen, profitiert von Dark Mode. Für kurze Website-Besuche spielt es weniger eine Rolle.

Wenn die Marke es trägt

Marken, die Tech, Modernität, Premium ausstrahlen, passen oft zu Dark Mode. Traditionelle B2B-Marken (Mittelstand, Industrie, Handwerk) wirken im Dark Mode manchmal fremd.

Wenn ihr Inhalte habt, die davon profitieren

Code-Beispiele, Foto-Galerien, Videos: alles das wirkt im Dark Mode oft besser. Content-lastige Seiten (Blog, Insights) profitieren weniger.

Wann Dark Mode kein Muss ist

Wenn eure Zielgruppe ihn nicht erwartet

Mittelständische B2B-Entscheider nutzen oft System-Dark-Mode gar nicht. Sie sehen eure Website in hell und merken nicht, ob es Dark Mode gibt.

Wenn das Budget knapp ist

Dark Mode bedeutet Mehraufwand im Design, im Testing und vor allem in der Webentwicklung, weil jede Komponente zwei Zustände bekommt. Wenn das Budget gerade für eine solide helle Version reicht, ist das die bessere Wahl.

Wenn die Marke Helligkeit braucht

Manche Marken leben von Leichtigkeit, Freundlichkeit, Weißraum. Dark Mode kann dieser Markenwirkung widersprechen.

Was Dark Mode wirklich kostet

Dark Mode ist nicht „weiß wird schwarz, schwarz wird weiß“. Gute Dark-Mode-Umsetzung braucht:

Das Farbsystem muss überarbeitet werden. Graustufen brauchen eine eigene Abstimmung, denn Schwarz ist nicht einfach Schwarz, sondern eine Reihe von Abstufungen.

Alle Bilder und Grafiken müssen mit. Logos, Icons und Illustrationen funktionieren auf dunklem Grund oft nur in einer zweiten Variante.

Die Kontraste gehören geprüft. Lesbarkeit muss im Dark Mode genauso gegeben sein wie im hellen Modus, und das zeigt sich erst im Test.

Die Qualitätssicherung verdoppelt sich. Jede Seite und jedes Element muss in beiden Modi durchgesehen werden.

Und die Pflege bleibt doppelt. Jede spätere Änderung müsst ihr in beiden Modi nachziehen.

Realistisch: Dark Mode bedeutet 20 bis 40 Prozent Mehraufwand im Design und in der Entwicklung.

Wenn ihr Dark Mode sauber umsetzen wollt: Wir planen es im UX/UI Design von Anfang an mit, inklusive Farbsystem, Grafik-Varianten und Tests.

Wie Dark Mode richtig umgesetzt wird

Nicht „Black“, sondern „Dark“

Reines Schwarz (#000000) wirkt hart und erzeugt starke Kontraste, die ermüden. Besser: sehr dunkles Grau (#121212 oder #1a1a1a) als Basis.

Sättigung der Farben anpassen

Farben, die im Light Mode leuchten, wirken im Dark Mode oft zu grell. Sättigung leicht reduzieren, Helligkeit anpassen.

Text nicht reines Weiß

Reines Weiß auf dunklem Hintergrund blendet. Besser: leichtes Grau (etwa #e0e0e0) für Fließtext.

System-Präferenz respektieren

`prefers-color-scheme` Media Query auswerten: Wenn der Nutzer System-Dark-Mode aktiviert hat, zeigt die Website automatisch Dark Mode.

Manuelle Umschaltung anbieten

Trotzdem ein manueller Schalter. Manche Nutzer wollen wählen, unabhängig von System-Einstellung.

Barrierefreiheit im Dark Mode

Dark Mode kann für manche Nutzergruppen besser, für andere schlechter sein. Menschen mit Astigmatismus etwa lesen oft schlechter im Dark Mode. Deshalb: Dark Mode ist eine Option, nicht ein Muss.

Wichtig: Kontraste müssen im Dark Mode genauso WCAG-konform sein wie im Light Mode. 4,5:1 bleibt 4,5:1.

Die pragmatische Empfehlung

Für klassische B2B-Mittelstand-Websites: Light Mode reicht. Wer Dark Mode will, kann in einem späteren Ausbauschritt ergänzen.

Für Tech-, Design-, Tool-Websites: Dark Mode von Anfang an einplanen. Die Zielgruppe erwartet es.

Für hybride Fälle (Tech-affine Zielgruppe, aber knappes Budget): Erst Light Mode sauber bauen, Dark Mode als nächsten Schritt vormerken.

Fazit: Dark Mode ist eine Entscheidung

Dark Mode ist weder Pflicht noch Mode-Erscheinung. Er ist eine strategische Entscheidung, die sich an Zielgruppe, Budget und Markenführung orientieren sollte.

Wer ihn umsetzt, sollte es richtig machen: halbfertiger Dark Mode ist schlechter als keiner. Wer ihn nicht umsetzt, verliert in den meisten B2B-Fällen nichts.