Dark Mode für die Website: Pflicht oder Kür?

Dark Mode auf der Website: für wen er wichtig ist, was WCAG und BFSG wirklich verlangen und sechs Regeln, mit denen der dunkle Modus Besuchern hilft.

Dark Mode für die Website: Pflicht oder Kür?

Ein Dark Mode für die Website ist für viele Besucher keine Stilfrage, sondern die Voraussetzung dafür, deine Seite überhaupt lesen zu können. Wer unter Migräne oder Lichtempfindlichkeit leidet, verlässt grellweiße Seiten nach Sekunden. Gleichzeitig liest die Mehrheit auf hellem Grund besser. Die Lösung ist kein Entweder-oder, sondern eine Website, die beides sauber kann.

Warum das Thema gerade wieder auf dem Tisch liegt

Am 21. September 2026 hat die Webentwicklerin Preethi Sam im Blog von Frontend Masters beschrieben, warum der dunkle Modus für sie unverzichtbar ist. Helles Bildschirmlicht löst bei ihr Migräne aus. Blaulichtfilter-Brillen und Augentropfen helfen nicht, nur Dunkelheit hilft. Deshalb stellt sie jedes Gerät und jede Anwendung auf dunkel und scheitert regelmäßig an Websites, die das ignorieren.

Der Text ist kein Technikartikel, sondern ein Wunschzettel an alle, die Websites bauen. Er dreht die übliche Diskussion um. In Designrunden wird der Dunkelmodus meist als Trend verhandelt, der modern wirkt oder eben nicht. Für einen Teil deiner Besucher ist er schlicht ein Hilfsmittel, so wie eine Rampe neben der Treppe.

Dark Mode auf der Website: Für wen er wirklich wichtig ist

Die Forschung dazu ist differenzierter, als beide Lager gern behaupten. Die Nielsen Norman Group hat die Studienlage zusammengefasst: Menschen mit normaler Sehkraft lesen dunkle Schrift auf hellem Grund im Schnitt schneller und genauer. Eine Studie von Piepenbrock und Kollegen aus dem Jahr 2013 fand diesen Vorteil bei Sehschärfe und Korrekturlesen gleichermaßen.

Anders sieht es bei Menschen mit getrübter Linse aus, etwa bei grauem Star. Für diese Gruppe zeigte schon eine Untersuchung von Legge aus dem Jahr 1985 bessere Leseleistungen im dunklen Modus. Dazu kommen Besucher mit Migräne, Lichtempfindlichkeit oder schlicht müden Augen am Abend. Die Empfehlung der Usability-Forscher ist deshalb eindeutig: nicht die ganze Seite auf dunkel umstellen, aber den Wechsel ermöglichen.

Für dich heißt das: Ein heller Standard ist für die meisten Unternehmensseiten richtig. Ein gut gemachter dunkler Modus holt zusätzlich die Besucher ab, die du sonst verlierst, bevor sie dein Angebot gelesen haben.

Ist ein Dark Mode Pflicht? Was WCAG und BFSG verlangen

Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz, kurz BFSG. Es verpflichtet vor allem Anbieter von Online-Shops und digitalen Dienstleistungen für Verbraucher zu barrierefreien Angeboten, Kleinstunternehmen sind bei Dienstleistungen ausgenommen. Maßstab sind die Web Content Accessibility Guidelines, kurz WCAG.

Einen Dunkelmodus verlangt keines der WCAG-Kriterien. Verlangt wird, dass Texte ausreichend Kontrast haben, für normalen Fließtext ein Verhältnis von mindestens 4,5 zu 1. Das gilt für jeden Modus, den du anbietest. Ein dunkles Design mit grauer Schrift auf dunkelgrauem Grund ist also nicht barrierefreier als ein helles, sondern im Zweifel schlechter. Ob dein Angebot unter das BFSG fällt, klärt im Einzelfall eine Kanzlei, dieser Beitrag ersetzt keine Rechtsberatung.

Sechs Regeln für einen dunklen Modus, der wirklich hilft

Aus dem Erfahrungsbericht, den Richtlinien und unserer Arbeit an Kundenseiten ergeben sich sechs Regeln, die du deiner Agentur oder deinem Entwickler mitgeben kannst.

  1. Systemeinstellung respektieren: Betriebssysteme melden dem Browser, ob jemand hell oder dunkel bevorzugt. Die Website fragt das mit der CSS-Abfrage prefers-color-scheme ab und startet im passenden Modus, ohne dass der Besucher etwas tun muss.
  2. Umschalter anbieten: Ein gut sichtbarer Schalter erlaubt, von der Systemeinstellung abzuweichen. Die Wahl wird gespeichert und gilt beim nächsten Besuch wieder.
  3. Wirklich dunkel sein: Wer wegen Blendung umschaltet, braucht einen sehr dunklen Hintergrund, kein Mittelgrau und kein kräftiges Marineblau. Die Autorin wünscht sich reines Schwarz, weil es auch bei gedimmtem Bildschirm genug Kontrast lässt.
  4. Kontrast in beiden Modi messen: Jede Kombination aus Schrift und Hintergrund wird geprüft, auch Buttons, Formularfelder, Platzhaltertexte und Fehlermeldungen. Dafür gibt es kostenlose Kontrastrechner.
  5. Helle Flächen dosieren: Ein weißes Logo-Feld, ein helles Produktbild oder ein weißes Cookie-Banner wirken im dunklen Modus wie ein Scheinwerfer. Bilder bekommen einen dezenten Rahmen oder werden leicht abgedunkelt, eingebettete Formulare und Karten werden mitgestaltet.
  6. Bewegung zügeln: Endlos laufende, helle Karussells sind im dunklen Umfeld besonders anstrengend. Animationen brauchen eine Pause-Möglichkeit und sollten die Systemeinstellung für reduzierte Bewegung beachten.

Die häufigsten Fehler beim Dunkelmodus

Der klassische Fehler ist das schnelle Invertieren. Ein Plugin dreht alle Farben um, und plötzlich ist das Logo unsichtbar, die Markenfarbe kippt ins Giftige und Schatten leuchten. Ein dunkler Modus ist ein eigenes Farbschema, das gestaltet werden muss. Gesättigte Farben wirken auf dunklem Grund stärker und werden deshalb meist etwas heller und weniger gesättigt angelegt.

Der zweite Fehler ist das Gegenteil von zu wenig Kontrast: reinweiße, dünne Schrift auf tiefschwarzem Grund. Bei manchen Menschen, vor allem mit Hornhautverkrümmung, überstrahlen die Buchstaben dann. Hier hilft eine etwas kräftigere Schrift, großzügiger Zeilenabstand und ein leicht gebrochenes Weiß für lange Texte. Genau deshalb ist der Umschalter so wichtig: Niemand kennt seine Augen besser als der Besucher selbst.

Drittens wird oft vergessen, dass Farben nicht überall dasselbe bedeuten und nicht von allen gleich gesehen werden. Wer ohnehin an den Farben arbeitet, sollte die Seite auch auf Farbfehlsichtigkeit prüfen, wie in unserem Leitfaden zum Gestalten für farbenblinde Menschen beschrieben. Bei internationalen Zielgruppen lohnt außerdem der Blick auf kulturelle Unterschiede im Online-Marketing.

Was das mit Anfragen zu tun hat

Barrierefreiheit wird gern als Pflichtübung behandelt. Tatsächlich ist sie Reichweite, die du schon bezahlt hast. Jeder Besucher, der über Google, eine Anzeige oder eine Empfehlung auf deine Seite kommt und sie wegen Blendung wieder schließt, hat Geld gekostet und nichts gebracht. Das betrifft nicht nur Menschen mit Diagnose, sondern auch alle, die abends auf dem Sofa mit gedimmtem Handy nach einem Dienstleister suchen.

Dazu kommt die Wirkung auf die Marke. Farben lösen Gefühle aus, und ein dunkles Schema wirkt anders als ein helles: ruhiger, technischer, hochwertiger, manchmal auch distanzierter. Wie Farben auf Entscheidungen wirken, haben wir im Beitrag über das limbische Farbsystem im Webdesign beschrieben. Ein guter dunkler Modus übersetzt deine Marke, statt sie nur abzudunkeln.

Wichtig bleibt, dass der Weg zur Anfrage in beiden Modi gleich klar ist. Der Button muss auffallen, das Formular lesbar sein, die Telefonnummer sichtbar. Warum solche Details über Klick oder Absprung entscheiden, liest du in Die Psychologie hinter dem Klick.

So prüfst du deine eigene Website in zehn Minuten

Du brauchst dafür kein Werkzeug, nur dein Handy und deinen Rechner. Stelle beide Geräte in den Systemeinstellungen auf dunkel und rufe deine Website auf. Passiert nichts, kennt deine Seite keinen dunklen Modus. Das ist kein Drama, aber eine bewusste Entscheidung wert.

  • Bleibt die Seite hell: Dimme den Bildschirm auf ein Viertel und lies einen längeren Absatz. Ist das angenehm oder anstrengend?
  • Wird die Seite dunkel: Sind Logo, Buttons, Formulare und Cookie-Banner sauber mitgestaltet oder leuchten weiße Kästen?
  • Gibt es einen Umschalter, und merkt sich die Seite deine Wahl?
  • Prüfe drei Farbkombinationen mit einem Kontrastrechner, mindestens Fließtext, Button und Fußzeile.
  • Schau dir eine Seite mit Karussell oder Video an. Lässt sich die Bewegung anhalten?

Wer gerade ohnehin einen Relaunch plant, nimmt den dunklen Modus am besten von Anfang an ins Farbkonzept auf. Nachträglich ist er machbar, aber teurer. In unserem Überblick über die Webdesign-Trends 2026 steht er deshalb nicht unter Spielerei, sondern unter Standard.

Fazit: Hell als Standard, dunkel als Angebot

Ein Dark Mode auf der Website ist keine gesetzliche Pflicht und kein Muss für jedes Unternehmen. Er ist ein Angebot an Besucher, für die helles Licht ein echtes Hindernis ist, und er ist mit heutigen Mitteln gut umsetzbar: Systemeinstellung respektieren, Umschalter anbieten, Kontraste in beiden Modi messen, helle Flächen und Bewegung im Griff behalten.

Wenn du wissen willst, wie deine Seite in beiden Modi abschneidet oder einen Relaunch planst, bei dem Lesbarkeit und Barrierefreiheit von Anfang an mitgedacht werden, sprich mit uns. Als Webdesign Agentur aus Karlsruhe gestalten wir Farbkonzepte, die in hell und dunkel funktionieren und Besucher zur Anfrage führen.

Quellen:

[1] Frontend Masters Blog, Preethi Sam: Dark Mode Very Much Matters To Me (21.09.2026). blog.master.dev (abgerufen September 2026).

[2] Nielsen Norman Group, Raluca Budiu: Dark Mode vs. Light Mode, Which Is Better? (02.02.2020). nngroup.com (abgerufen September 2026).

[3] barrierefreies.design: Glossar Dark Mode. barrierefreies.design (abgerufen September 2026).

Funktioniert deine Website in hell und dunkel?

Wir prüfen mit dir, wie deine Seite im dunklen Modus aussieht, wo Kontraste nicht reichen und was sich mit wenig Aufwand verbessern lässt. In 15 Minuten weißt du, ob eine Anpassung genügt oder ein neues Farbkonzept sinnvoll ist.

Website-Check in 15 Minuten buchen Zur Webdesign-Leistung

Antworten zum Thema.

Kurz und praxisnah – die wichtigsten Fragen zu diesem Artikel.

Nein. Weder das Barrierefreiheitsstärkungsgesetz noch die WCAG verlangen einen dunklen Modus. Vorgeschrieben sind ausreichende Kontraste, für normalen Fließtext mindestens 4,5 zu 1, und das gilt für jeden Modus, den deine Website anbietet.
Das hängt von der Person ab. Menschen mit normaler Sehkraft lesen dunkle Schrift auf hellem Grund laut Studien meist schneller und genauer. Für Menschen mit Migräne, Lichtempfindlichkeit oder getrübter Linse ist ein dunkler Modus dagegen deutlich angenehmer.
Das Betriebssystem teilt dem Browser die Einstellung mit. Die Website fragt sie über die CSS-Abfrage prefers-color-scheme ab und lädt das passende Farbschema. Ein zusätzlicher Umschalter auf der Seite erlaubt, davon abzuweichen.
Das hängt davon ab, wie sauber die Farben der Website technisch angelegt sind. Arbeitet das Theme mit zentralen Farbvariablen, ist ein zweites Farbschema überschaubar. Sind Farben an vielen Stellen fest hinterlegt, lohnt sich die Umsetzung eher im Rahmen eines Relaunchs.
Ja. Wir entwickeln Farbkonzepte, die in hell und dunkel funktionieren, prüfen die Kontraste nach WCAG und bauen den Umschalter so ein, dass die Systemeinstellung respektiert wird. Ziel ist immer eine Seite, auf der Besucher schnell zur Anfrage finden.
Über den Autor

Ideengeber · Leadwerk

Florian Schück ist Ideengeber von Leadwerk und berät seit über 10 Jahren kleine und mittelständische Unternehmen im digitalen Marketing. Seine Schwerpunkte: Google Ads, SEO, datengetriebene Strategien und Webdesign, das konvertiert. Was er schreibt, kommt aus der Praxis – nicht aus dem Lehrbuch.