Dark Mode richtig gestalten: Farben, Kontraste und typische Fehler

Stell dir die App eines Stadtmagazins vor: lange Reportagen, ein Veranstaltungskalender, viele Fotos, dazu Logos von Partnern und Tickets mit QR-Code. Das Team hat einen Dark Mode gebaut, und zwar schnell. Der Hintergrund ist reines Schwarz, die Schrift reines Weiß. Links und Kategorien leuchten im kräftigen Rot der Marke. Die Karten im Kalender haben Schatten, die niemand mehr sieht. Partnerlogos stehen in weißen Kästen, Fotos strahlen wie Scheinwerfer. Und weil Dark Mode gerade beliebt ist, startet die App für alle dunkel.

Die ersten Rückmeldungen sind gemischt. Manche finden den neuen Look schick. Andere klagen, dass die Schrift nach ein paar Absätzen flimmert, dass rote Links kaum lesbar sind und dass der Ticketscanner am Einlass den QR-Code nicht erkennt. Ein paar Menschen fragen schlicht, wie sie die helle Ansicht zurückbekommen.

Ein guter Dark Mode ist mehr als invertierte Farben. Er braucht eigene Entscheidungen zu Flächen, Tiefe, Akzentfarben, Kontrasten und Bildern, und er muss sich nach dem richten, was Menschen eingestellt haben. Dieser Artikel zeigt, was die Forschung zur Lesbarkeit sagt, wie du einen Dark Mode gestaltest und welche Fehler typisch sind. Die Stadtmagazin-App dient dabei als durchgehendes Beispiel. Sie ist erfunden, aber typisch.

Warum Menschen Dark Mode nutzen

Wie verbreitet Dark Mode ist, zeigt eine kleine Befragung der Nielsen Norman Group (NN/g) aus dem Jahr 2023. Von 115 Menschen, die nach der Einstellung ihres Smartphones gefragt wurden, nutzte etwa ein Drittel den Dark Mode, ein Drittel den hellen Modus und ein Drittel eine Mischung aus beidem. Die Stichprobe ist klein, das Bild aber deutlich: Dark Mode ist kein Nischenthema.

Als Gründe nannten die Befragten vor allem diese:

• Weniger Belastung für die Augen: Das war bei Menschen ohne Seheinschränkung der häufigste Grund.
• Akku sparen: Das funktioniert nur auf OLED-Bildschirmen, und die Bildschirmhelligkeit spielt laut NN/g eine mindestens ebenso große Rolle wie der Modus.
• Ästhetik: Viele finden dunkle Oberflächen schlicht schöner.
• Barrierefreiheit: Manche Menschen mit Seheinschränkungen, etwa bei Grauem Star, kommen mit dunklen Oberflächen besser zurecht.

Beim Akku lohnt ein genauerer Blick. Ein Team um Charlie Hu an der Purdue University hat das 2021 auf vier OLED-Smartphones gemessen und auf der Konferenz MobiSys vorgestellt. Bei voller Helligkeit sparte der Wechsel vom hellen in den dunklen Modus laut der Universität im Schnitt 39 bis 47 Prozent Energie. Bei 30 bis 50 Prozent Helligkeit, wie sie im Alltag üblich ist, waren es nur noch 3 bis 9 Prozent. Das sei so wenig, dass die meisten Menschen die etwas längere Akkulaufzeit gar nicht bemerken würden.

Aus derselben NN/g-Studie stammt eine Beobachtung, die für die Gestaltung besonders wichtig ist: Menschen erwarten, dass Dark Mode eine systemweite Einstellung ist, der alle Apps und Websites folgen. Wer ihn einmal im Betriebssystem einschaltet, will ihn nicht in jeder App einzeln suchen.

Was die Forschung zur Lesbarkeit sagt

In der Forschung heißt dunkle Schrift auf hellem Grund positive Polarität, helle Schrift auf dunklem Grund negative Polarität. Die Frage, welche besser lesbar ist, wurde vielfach untersucht. Für Menschen mit normalem oder korrigiertem Sehvermögen fällt die Antwort recht eindeutig aus.

Ein Team um die Psychologin Cosima Piepenbrock an der Universität Düsseldorf ließ 2013 jüngere und ältere Erwachsene einen Sehschärfetest und eine Korrekturleseaufgabe in beiden Polaritäten bearbeiten. Laut der Zusammenfassung der NN/g waren die Jüngeren 18 bis 33 Jahre alt, die Älteren 60 bis 85. Beide Gruppen schnitten mit dunkler Schrift auf hellem Grund besser ab. Die Forschenden empfehlen positive Polarität deshalb für alle Altersgruppen.

2014 erschien eine zweite Studie desselben Teams mit vier Schriftgrößen von 8 bis 14 Punkt. Der Vorteil der positiven Polarität wurde umso größer, je kleiner die Schrift war. Als Erklärung gilt die Optik des Auges: Ein heller Bildschirm lässt die Pupille enger werden. Dadurch entsteht ein schärferes Bild mit weniger Abbildungsfehlern, ähnlich wie bei einer Kamera mit kleinerer Blende.

Auch in dunkler Umgebung ist helle Schrift nicht automatisch im Vorteil. Dobres, Chahine und Reimer testeten 2017, wie gut Menschen Wörter bei kurzen Blicken lesen, wie etwa beim Blick auf ein Display im Auto. In nahezu dunkler Umgebung schnitt helle Schrift auf dunklem Grund am schlechtesten ab. Bei Tageslicht verbesserten sich alle Bedingungen deutlich.

Das ist allerdings nicht das ganze Bild:

• Seheinschränkungen: Die NN/g verweist auf eine Studie von Legge und anderen aus dem Jahr 1985 mit sehbeeinträchtigten Menschen. Alle sieben Teilnehmenden mit getrübten optischen Medien im Auge, etwa durch Grauen Star, lasen mit heller Schrift auf dunklem Grund schneller. Einschränkend: Die Studie nutzte Röhrenmonitore, die im hellen Modus stärker flimmern.
• Langfristige Effekte: Ein Team um Frank Schaeffel am Universitätsklinikum Tübingen fand 2018 bei sieben Versuchspersonen, dass eine Stunde Lesen von schwarzer Schrift auf weißem Grund die Aderhaut im Auge um etwa 16 Mikrometer dünner werden ließ. Bei weißer Schrift auf schwarzem Grund wurde sie um etwa 10 Mikrometer dicker. Eine dünnere Aderhaut wird mit der Entstehung von Kurzsichtigkeit in Verbindung gebracht. Das ist ein interessanter Hinweis, aber kein Beleg dafür, dass Dark Mode Kurzsichtigkeit verhindert. Die Forschenden selbst betonen, dass der Ansatz noch überprüft werden muss.
• Vorlieben: Wahrgenommene und gemessene Lesbarkeit fallen nicht immer zusammen. In der Studie zu Schriftgrößen empfanden die Teilnehmenden laut NN/g keinen Unterschied, obwohl ihre Leistung sich unterschied.

Die NN/g zieht daraus eine klare Empfehlung: Dark Mode nicht als Standard für alle festlegen, Menschen aber die Wahl lassen. Besonders Anwendungen, in denen viel gelesen wird, etwa Nachrichten, Magazine oder E-Books, sollten einen Dark Mode anbieten. Für die Stadtmagazin-App heißt das zweierlei: Der Dark Mode bleibt, aber er ist nicht mehr für alle voreingestellt. Und weil Schriftgröße eine so große Rolle spielt, bekommt der Fließtext der Reportagen in beiden Modi eine großzügige Größe.

Kein reines Schwarz, kein reines Weiß

Der naheliegendste Dark Mode ist Weiß auf Schwarz. Das ergibt mit 21:1 das größtmögliche Kontrastverhältnis und klingt deshalb nach der besten Lösung. Material Design, das Design-System von Google, empfiehlt trotzdem etwas anderes.

Material nutzt für die unterste Ebene einer dunklen Oberfläche typischerweise ein dunkles Grau mit dem Farbwert #121212. Die Dokumentation der Material-Komponenten begründet das Grau unter anderem damit, dass Schatten darauf besser sichtbar bleiben und helle Schrift die Augen weniger anstrengt. Für die Schrift gilt Ähnliches in die andere Richtung: Ein Codelab von Google beschreibt, dass reines Weiß auf dunklem Grund zu überstrahlen oder zu verschwimmen scheinen kann. Material setzt Text deshalb in Weiß mit reduzierter Deckkraft: 87 Prozent für wichtigen Text, 60 Prozent für weniger wichtigen und 38 Prozent für deaktivierte Elemente.

Wichtig: Das ist keine Entscheidung gegen Kontrast. Hellgrauer Text in der Größenordnung von #E0E0E0 auf #121212 erreicht immer noch etwa 14:1, mehr als das Dreifache des Mindestwerts der WCAG für normalen Text. Auch ein mittleres Grau wie #A0A0A0 liegt mit gut 7:1 noch sicher im grünen Bereich.

• Vorher: Hintergrund #000000, Fließtext #FFFFFF, Bildunterschriften in einem Grau, das niemand geprüft hat.
• Nachher: Hintergrund #121212, Fließtext #E0E0E0, Bildunterschriften und Metadaten #A0A0A0. Die Schrift des Fließtexts bekommt ein normales Gewicht statt der dünnen Variante, die im hellen Modus noch gut aussah.

Der letzte Punkt taucht auch in der NN/g-Untersuchung auf: Zu dünne Schriften gehören zu den typischen Problemen im Dark Mode. Feine Striche, die auf Weiß elegant wirken, verlieren auf dunklem Grund schnell an Lesbarkeit.

Tiefe durch hellere Flächen statt Schatten

In hellen Oberflächen zeigen Schatten, was über etwas anderem liegt: eine Karte über dem Hintergrund, ein Dialog über der Seite. Auf dunklem Grund funktioniert das kaum noch. Die Dokumentation der Material-Komponenten hält fest, dass Schatten in dunklen Oberflächen weniger wirken, weil sie weniger Kontrast haben. Auch die NN/g nennt verschwindende Schatten und Overlays als typisches Problem.

Die Lösung ist, Tiefe über Helligkeit auszudrücken. Je höher eine Fläche liegt, desto heller wird sie. Material Design hat das in seiner zweiten Version über halbtransparente weiße Überlagerungen umgesetzt, die mit der Höhe stärker werden. Im Google-Codelab bekommt etwa eine Karte eine weiße Überlagerung von 2 Prozent Deckkraft, die untere App-Leiste eine von 12 Prozent. In Material 3 wurde dieses System durch feste, tonbasierte Flächenfarben ersetzt, von surfaceContainerLowest bis surfaceContainerHighest. Das Prinzip bleibt gleich, nur sind die Farben nun eigene Rollen.

Apple verfolgt in seinen Human Interface Guidelines denselben Ansatz. Im Dark Mode gibt es zwei Gruppen von Hintergrundfarben, „base“ und „elevated“. Die Basisfarben sind dunkler und lassen Hintergründe zurücktreten, die erhöhten Farben sind heller und holen Elemente im Vordergrund nach vorn.

• Vorher: Kalenderkarten in Schwarz auf Schwarz, nur durch einen Schatten getrennt, den man nicht sieht. Ein Filterdialog erscheint ohne erkennbaren Rand über der Liste.
• Nachher: Seitenhintergrund #121212, Karten eine Stufe heller, der Filterdialog noch eine Stufe heller. Wo Karten sich klar abgrenzen müssen, hilft zusätzlich eine dezente Trennlinie.

Ist der Rand eines Dialogs oder Menüs nötig, um es als solches zu erkennen, gilt das WCAG-Kriterium 1.4.11 mit mindestens 3:1 zur Umgebung. Zwei nah beieinanderliegende Grautöne erreichen das selten.

Akzentfarben entsättigen

Markenfarben werden meist für helle Oberflächen ausgewählt. Auf dunklem Grund verhalten sie sich anders. Das Google-Codelab beschreibt, dass stark gesättigte Farben auf dunklem Hintergrund optisch „vibrieren“ und dadurch schwerer lesbar sind. Die NN/g führt gesättigte Farben auf dunklem Grund ebenfalls als typischen Fehler auf.

Dazu kommt ein handfestes Kontrastproblem. Das Rot der Stadtmagazin-App, #D0021B, erreicht auf Weiß ein Kontrastverhältnis von etwa 5,7:1 und ist damit als Linkfarbe im hellen Modus in Ordnung. Auf #121212 sind es nur noch etwa 3,3:1. Für normalen Fließtext reicht das nach WCAG nicht.

Die Lösung ist eine hellere, weniger gesättigte Variante derselben Farbe für den Dark Mode:

• Vorher: Links, Kategorie-Etiketten und Buttons im Markenrot #D0021B, auf Schwarz grell und für kleine Schrift zu kontrastarm.
• Nachher: Im Dark Mode ein helles Korallenrot wie #F28B82. Es erreicht auf dem Hintergrund etwa 7,8:1 und auf den helleren Karten noch knapp 5,9:1. Die Marke bleibt erkennbar, ohne zu flimmern.

Damit das nicht an jeder Stelle einzeln entschieden werden muss, gehören solche Farben in semantische Tokens, also benannte Farbrollen wie „Linkfarbe“ oder „Fläche erhöht“, die je nach Modus auf einen anderen Wert zeigen. Apple empfiehlt ausdrücklich, semantische, sich anpassende Farben zu nutzen und fest kodierte Farbwerte zu vermeiden. Wie ein solches System in kleinen Teams aussehen kann, zeigt der Artikel Design Systems für kleine Teams.

Besondere Aufmerksamkeit brauchen Farben, die etwas bedeuten: Ein Fehlerrot muss in beiden Modi erkennbar bleiben und sollte nie das einzige Merkmal sein. Mehr dazu im Artikel Farbenblindheit im UX-Design.

Kontraste in beiden Modi prüfen

Die WCAG gelten für den Dark Mode genauso wie für den hellen. Das Erfolgskriterium 1.4.3 auf Stufe AA verlangt für Text ein Kontrastverhältnis von mindestens 4,5:1. Für große Schrift, also ab 18 Punkt oder ab 14 Punkt fett, reichen 3:1. Ausgenommen sind Schriftzüge, die Teil eines Logos sind. Kriterium 1.4.11 verlangt zusätzlich 3:1 für Bedienelemente, ihre Zustände und wichtige Grafiken. Apple geht in seinen Richtlinien weiter und empfiehlt für eigene Farbkombinationen 7:1, besonders bei kleiner Schrift.

Drei Dinge sind beim Prüfen im Dark Mode besonders wichtig:

• Jede Kombination doppelt prüfen. Eine Farbe, die im hellen Modus besteht, kann im dunklen durchfallen, wie das Markenrot zeigt. Das gilt auch für Platzhaltertext, deaktivierte Buttons, Fokusrahmen und Fehlermeldungen.
• Alle Ebenen prüfen. Text, der auf dem Seitenhintergrund besteht, muss auch auf erhöhten Flächen bestehen, und umgekehrt.
• Bestanden heißt nicht gleich gut lesbar. Die Formel der WCAG unterscheidet nicht, ob die hellere Farbe die Schrift oder der Hintergrund ist. Die Forschung zur Polarität zeigt aber, dass das für die Lesbarkeit einen Unterschied macht. Ein bestandener Kontrastwert ist im Dark Mode deshalb eine Untergrenze, kein Qualitätsnachweis.

Apple empfiehlt außerdem, den Dark Mode zusammen mit den Einstellungen „Kontrast erhöhen“ und „Transparenz reduzieren“ zu testen, einzeln und kombiniert. Dabei können Stellen auftauchen, an denen dunkle Schrift auf dunklem Grund schlechter lesbar wird.

Bilder, Logos und Grafiken

Viele Probleme im Dark Mode entstehen nicht bei Farben, die das Team selbst festgelegt hat, sondern bei Inhalten, die von außen kommen. Die NN/g nennt einige typische Fälle: Grafiken mit undurchsichtigem Hintergrund, die als weiße Kästen erscheinen, Logos mit zu wenig Kontrast und invertierte QR-Codes, die manche Scanner nicht lesen können.

Für die Stadtmagazin-App bedeutet das:

• Fotos: Apple empfiehlt, Bilder mit weißem Hintergrund im Dark Mode leicht abzudunkeln, damit der Hintergrund nicht leuchtet. Im Web lässt sich das mit einem CSS-Filter umsetzen, der nur im Dark Mode greift, etwa einer leicht reduzierten Helligkeit oder Sättigung.
• Logos: Statt PNG-Dateien mit weißem Kasten kommen Logos ohne Hintergrund zum Einsatz, bei Bedarf in einer eigenen hellen Variante. Im Web wählt das Element <picture> mit <source media="(prefers-color-scheme: dark)"> automatisch die passende Datei. Apple rät ebenfalls, Symbole und Bilder bei Bedarf in getrennten Varianten für hell und dunkel anzulegen.
• QR-Codes: Ticket-QR-Codes bleiben in beiden Modi dunkel auf hellem Grund, mit einem hellen Rand drumherum. Gerade dort, wo ein Gerät statt eines Menschen liest, ist Invertieren keine gute Idee.
• Diagramme: Grafiken, etwa ein Auslastungsdiagramm für Veranstaltungen, brauchen eigene Farben für den Dark Mode und müssen ebenfalls 3:1 zu ihrer Umgebung erreichen, wenn ihre Elemente für das Verständnis nötig sind.

Technik: dem System folgen und die Wahl lassen

Im Web gibt es drei Bausteine, die einen sauberen Dark Mode deutlich einfacher machen.

Die Media-Query prefers-color-scheme fragt ab, ob jemand im Betriebssystem oder im Browser ein helles oder dunkles Farbschema eingestellt hat. Mit @media (prefers-color-scheme: dark) lassen sich darauf eigene Farben setzen. Am saubersten geschieht das über CSS-Variablen, die die semantischen Tokens abbilden.

Die CSS-Eigenschaft color-scheme teilt dem Browser mit, welche Farbschemata eine Seite unterstützt. Mit color-scheme: light dark passt der Browser unter anderem Formularelemente, Scrollbalken und die Hintergrundfläche der Seite an. MDN empfiehlt, zusätzlich <meta name="color-scheme" content="light dark"> im Kopf der Seite zu setzen, um ein Aufblitzen beim Laden zu vermeiden.

Die CSS-Funktion light-dark() nimmt zwei Farben oder Bilder entgegen und liefert je nach aktivem Farbschema die eine oder die andere, ohne eigene Media-Query. Sie setzt color-scheme: light dark voraus und funktioniert laut MDN seit Mai 2024 in den aktuellen Versionen aller großen Browser. Für ältere Browser braucht es weiterhin einen Fallback.

Bleibt die Frage, wer entscheidet. Die NN/g empfiehlt, standardmäßig der Einstellung des Betriebssystems zu folgen. Ein eigener Schalter in der App sei in Ordnung, aber Menschen suchten in den meisten Apps nicht danach. Apple rät für Apps auf seinen Plattformen sogar ausdrücklich von einer eigenen Darstellungseinstellung ab: Menschen müssten dann mehrere Einstellungen anpassen und könnten die App für defekt halten, wenn sie nicht auf die Systemeinstellung reagiert. Thomas Steiner von Google beschreibt auf web.dev für Websites einen Mittelweg: zuerst dem Signal des Browsers folgen und dann optional eine Möglichkeit bieten, es zu überschreiben.

Daraus ergibt sich eine einfache Regel. Der Standard ist immer die Systemeinstellung. Ein eigener Schalter ist ein Zusatz, der vor allem dort sinnvoll ist, wo viel gelesen wird oder wo Menschen eine bestimmte Ansicht nur für dieses Angebot wollen. Wenn es ihn gibt, sollte er drei Optionen haben, „System“, „Hell“ und „Dunkel“, und die Wahl dauerhaft speichern.

• Vorher: Die App startet für alle dunkel. Zurück zur hellen Ansicht geht es nur über einen versteckten Schalter in den Einstellungen. Links zum Ticketshop öffnen eine grell weiße Website.
• Nachher: Die App folgt der Systemeinstellung. In den Leseeinstellungen der Reportagen gibt es eine Auswahl mit „System“, „Hell“ und „Dunkel“. Der eingebettete Ticketshop übernimmt das Farbschema.

Das letzte Problem nennt auch die NN/g ausdrücklich: Links aus einer dunklen App, die eine helle Website öffnen. Konsistenz über alle Bildschirme hinweg gehört zu den Grundregeln.

Dark Mode testen

Ein Dark Mode ist erst fertig, wenn er in echten Situationen getestet ist.

Im Browser: In den Chrome DevTools lässt sich über das Rendering-Panel prefers-color-scheme emulieren, ohne die Systemeinstellung zu ändern.

Auf echten Geräten: Prüfe den Dark Mode bei verschiedenen Helligkeitsstufen, im dunklen Raum und bei Tageslicht, auch zusammen mit erhöhtem Kontrast und größerer Schrift. Zu dunkle Grautöne oder blendende Bilder zeigen sich oft erst dort.

Mit Menschen: Die NN/g rät, jedes Design auch im Dark Mode zu testen und sich nicht allein auf Plugins in Designwerkzeugen zu verlassen. Lass Testpersonen im Usability-Test in ihrem gewohnten Modus arbeiten.

E-Mails: Viele E-Mail-Programme stellen Mails im Dark Mode anders dar als gestaltet. Die NN/g empfiehlt, auch Newsletter und Systemmails zu prüfen.

Typische Fehler

Einfach invertieren. Automatisch umgekehrte Farben ergeben reines Schwarz und Weiß, grelle Akzente, unsichtbare Schatten und invertierte Fotos. Ein Dark Mode braucht eine eigene, geprüfte Palette.

Dunkel als Standard für alle. Das ignoriert sowohl die Befunde zur Lesbarkeit als auch die Einstellung, die Menschen im System bereits getroffen haben.

Dark Mode als einmaliges Projekt. Wer neue Komponenten nur im hellen Modus gestaltet, hat nach einem halben Jahr Lücken. Semantische Tokens und die Regel, jede Komponente in beiden Modi abzunehmen, verhindern das.

Zustände vergessen. Fokusrahmen, Fehlermeldungen, deaktivierte Elemente und Ladezustände werden im Dark Mode besonders oft übersehen. Gerade sie entscheiden aber darüber, ob ein Interface bedienbar bleibt. Ein Fokusrahmen, der im Dark Mode unsichtbar wird, trifft vor allem Menschen, die mit der Tastatur navigieren.

Dark Mode für barrierefrei halten. Dark Mode ist für manche Menschen eine echte Hilfe, für andere eine Erschwernis. Barrierefreiheit entsteht durch Wahlfreiheit und geprüfte Kontraste in beiden Modi, nicht durch einen bestimmten Modus. Mehr dazu im Artikel Warum Barrierefreiheit mehr als Kontrast und Größe ist.

Fazit

Viele Menschen nutzen Dark Mode, aus Komfort, aus Vorliebe oder weil sie damit besser sehen. Die Forschung zeigt, dass dunkle Schrift auf hellem Grund für die meisten Menschen mit normalem Sehvermögen besser lesbar ist, besonders bei kleiner Schrift. Das spricht nicht gegen einen Dark Mode, sondern dafür, ihn gut zu machen und Menschen die Wahl zu lassen.

Gut gemacht heißt: dunkles Grau statt Schwarz, gedämpftes Weiß statt reinem Weiß, Tiefe über hellere Flächen, entsättigte Akzentfarben, geprüfte Kontraste auf allen Ebenen und Bilder, die nicht blenden. Technisch folgt die Darstellung der Systemeinstellung, ein eigener Schalter ist eine Ergänzung.

Die Stadtmagazin-App hat nach der Überarbeitung keinen spektakulären neuen Look. Sie hat einen Dark Mode, der sich wie selbstverständlich anfühlt: Er ist da, wenn jemand ihn eingestellt hat, er flimmert nicht, die Marke ist erkennbar und der QR-Code am Einlass funktioniert.

Checkliste

• Die Darstellung folgt standardmäßig der Systemeinstellung über prefers-color-scheme.
• Ein eigener Schalter, falls vorhanden, bietet „System“, „Hell“ und „Dunkel“ und speichert die Wahl.
• color-scheme ist gesetzt, damit Formularelemente und Scrollbalken passen.
• Der Hintergrund ist ein dunkles Grau, nicht reines Schwarz, der Text ein gedämpftes Weiß.
• Höhere Ebenen sind heller als tiefere, statt nur über Schatten getrennt zu sein.
• Akzent- und Markenfarben haben eigene, entsättigte Varianten für den Dark Mode.
• Alle Farben liegen als semantische Tokens vor, nicht als fest kodierte Werte.
• Text erreicht in beiden Modi und auf allen Ebenen mindestens 4,5:1, große Schrift 3:1.
• Bedienelemente, Fokusrahmen und wichtige Grafiken erreichen in beiden Modi mindestens 3:1.
• Fotos blenden nicht, Logos haben passende Varianten, QR-Codes bleiben dunkel auf hell.
• Verlinkte Seiten, eingebettete Inhalte und E-Mails sind im Dark Mode geprüft.
• Der Dark Mode ist auf echten Geräten, bei verschiedener Helligkeit und mit Bedienungshilfen getestet.

Quellen

• Raluca Budiu, Nielsen Norman Group (2020): Dark Mode vs. Light Mode: Which Is Better?
• Tanner Kohler und Amy Zhang, Nielsen Norman Group (2023): Dark Mode: How Users Think About It and Issues to Avoid
• C. Piepenbrock, S. Mayr, I. Mund und A. Buchner (2013): Positive display polarity is advantageous for both younger and older adults. Ergonomics, 56(7), 1116 bis 1124
• C. Piepenbrock, S. Mayr und A. Buchner (2014): Positive display polarity is particularly advantageous for small character sizes: Implications for display design. Human Factors, 56(5), 942 bis 951
• J. Dobres, N. Chahine und B. Reimer (2017): Effects of ambient illumination, contrast polarity, and letter size on text legibility under glance-like reading. Applied Ergonomics, 60, 68 bis 73
• A. C. Aleman, M. Wang und F. Schaeffel (2018): Reading and Myopia: Contrast Polarity Matters. Scientific Reports, 8, 10840
• Universitätsklinikum Tübingen, idw (2018): Pressemitteilung zur Studie „Reading and Myopia: Contrast Polarity Matters“
• Purdue University (2021): Dark mode may not save your phone’s battery life as much as you think, but there are a few silver linings
• Google Codelabs: Design a dark theme with Material and Figma
• Material Components for Android: Dark theme
• Flutter: Introduce new ColorScheme roles for Material 3
• Apple Human Interface Guidelines: Dark Mode
• Thomas Steiner, web.dev: prefers-color-scheme: Hello darkness, my old friend
• MDN Web Docs: prefers-color-scheme
• MDN Web Docs: color-scheme
• MDN Web Docs: light-dark()
• W3C: Understanding Success Criterion 1.4.3: Contrast (Minimum)
• W3C: Understanding Success Criterion 1.4.11: Non-text Contrast