Kostenloses Werkzeug
Dark Mode Check: Bleibt Ihre Website im Dunkelmodus lesbar?
Viele Handys und Tablets laufen dauerhaft im Dunkelmodus. Hat Ihre Seite keinen eigenen, färben manche Browser sie selbst um, und dann steht weiße Schrift auf hellgrauem Grund. Dieser Test öffnet Ihre Seite in einem echten Browser dreimal, fotografiert sie und misst den Kontrast jeder Textstelle (dauert etwa 15 Sekunden).
Wir rufen nur ab, was öffentlich erreichbar ist, und speichern weder Adresse noch Ergebnis. Automatische Momentaufnahme, keine Rechtsberatung. Bitte nur eigene Seiten prüfen oder solche, für die Sie die Zustimmung haben. Mehr dazu
Zwei verschiedene Dinge heißen „Dunkelmodus“
Erstens der Wunsch des Besuchers. Ist das Handy auf dunkel gestellt, teilt der Browser das jeder Seite mit (prefers-color-scheme: dark). Die Seite reagiert darauf nur, wenn sie eigene Farben für dunkel mitbringt. Viele WordPress-Themes und Plugins tun das zur Hälfte: Der Hintergrund wechselt, die Schriftfarbe aus dem Page-Builder bleibt, und der Text verschwindet.
Zweitens das Umfärben durch den Browser. Samsung Internet im Dunkelmodus, Chrome auf Android mit „Dunkles Design für Websites“ und Erweiterungen wie Dark Reader warten nicht auf die Seite. Sie rechnen die Farben selbst um, und das ist ein grobes Verfahren: Weiße Flächen werden schwarz, dunkle Schrift wird hell, aber mittelgraue Flächen, Bilder und Logos bleiben, wie sie sind. Genau dort steht dann helle Schrift auf hellem Grund, oder das schwarze Logo verschwindet in der schwarz gewordenen Kopfzeile.
So misst der Test
Ein Chromium-Browser auf unserem Server lädt Ihre Startseite dreimal: hell, mit dunkel eingestelltem System und mit eingeschaltetem Umfärben, so wie es die Entwicklerwerkzeuge von Chrome nachstellen. Er scrollt einmal durch, damit Bilder und Einblend-Effekte geladen sind, und fotografiert die ersten drei Bildschirmhöhen. Jeder Bildschirm wird dabei dreimal aufgenommen: normal, mit unsichtbarer und mit eingefärbter Schrift. So weiß der Test für jede Textstelle genau, welche Pixel Schrift sind und welcher Hintergrund darunter liegt, auch auf Fotos und Verläufen.
Gemessen wird der Kontrast nach WCAG 2.1: mindestens 4,5 : 1 für normalen Text und 3 : 1 für große Schrift. Gemeldet werden nur Stellen, die in der hellen Ansicht lesbar sind und erst im Dunkeln unter die Schwelle fallen. Was schon hell zu blass ist, zeigt der Barrierefreiheits-Schnelltest.
Die Lösung ist oft eine Zeile
Hat Ihre Seite keinen eigenen Dunkelmodus, sagen Sie dem Browser, dass sie nur hell gedacht ist. Diese Angabe gehört in den <head> jeder Seite:
<meta name="color-scheme" content="only light">Chrome und alle Browser auf Chromium-Basis färben die Seite danach nicht mehr um. In WordPress setzen Sie die Zeile über die Header-Einstellung Ihres Themes, über ein Snippet-Plugin oder im Child-Theme. Wiederholen Sie den Test danach: Die umgefärbte Ansicht sollte dann aussehen wie die helle.
Hat Ihre Seite einen eigenen Dunkelmodus, der unvollständig ist, hilft die Zeile nicht. Dann müssen die Farben vervollständigt werden, meist an wenigen Stellen im Theme oder im Page-Builder, oder der halbe Dunkelmodus wird bewusst abgeschaltet.
Ehrliche Grenze: Jeder Browser färbt mit einem eigenen Verfahren um. Der Test stellt das Verfahren von Chrome nach, Samsung Internet und Dark Reader können im Einzelfall anders aussehen. Geprüft wird die Startseite am Desktop-Bildschirm. Einzelne Unterseiten mit anderem Aufbau lohnen einen eigenen Durchlauf. Für die Behebung gibt es die WordPress-Soforthilfe (99 €, eine Stunde Arbeit mit Nachher-Test).