Der Browser weiß eine ganze Menge über die Person davor. Ob sie dunkle Oberflächen bevorzugt, ob ihr Bewegung auf dem Bildschirm Unwohlsein bereitet, ob sie starke Kontraste braucht, ob sie gerade Datenvolumen sparen will. Diese Informationen liegen bereit, kostenlos, ohne Tracking und ohne einen einzigen zusätzlichen Request. Die meisten Websites fragen einfach nicht danach.
Das eine Erfolgskriterium von Guideline 3.9
Media- und Präferenzabfragen: Berücksichtige gängige Nutzerpräferenzen über CSS Media Queries wie prefers-color-scheme. Berücksichtige weitere Präferenzabfragen, darunter monochrome, prefers-contrast, prefers-reduced-data, prefers-reduced-transparency und prefers-reduced-motion, wo sie Deinen Nutzenden zugutekommen. Setze Print- und Scripting-Media-Queries dort ein, wo sie Effizienz oder Nachhaltigkeit verbessern können.
Meine Einordnung
Das Bemerkenswerte an diesem Kriterium ist der Preis: null. Eine Media Query ist eine Handvoll Zeichen in einer CSS-Datei, die Du ohnehin überträgst. Es gibt keinen zusätzlichen Request, keine Bibliothek, keine Abfrage beim Nutzer, keine Einwilligung. Die Präferenz liegt im Betriebssystem und wird vom Browser mitgeliefert. Du musst sie nur auswerten.
Auf datensm.art nutze ich das an mehreren Stellen. Das Farbschema folgt standardmäßig der Systemeinstellung, statt eine Variante zu erzwingen. Der Bildmodus lässt sich abschalten, sodass Bilder gar nicht erst geladen werden. Und bei den Schriften gibt es die Wahl zwischen einer Webschrift und der Systemschrift, die null Kilobyte kostet.
Was diese Guideline vom Rest der Web-Development-Kategorie unterscheidet: Sie ist zuerst eine Barrierefreiheits-Regel und erst danach eine Nachhaltigkeits-Regel. Wer prefers-reduced-motion ignoriert, kann Menschen mit vestibulären Störungen buchstäblich Übelkeit verursachen. Wer prefers-contrast ignoriert, macht seine Seite für Menschen mit Sehbeeinträchtigung unlesbar. Der Energiegewinn kommt bei einigen dieser Abfragen obendrauf, aber er ist nicht der Hauptgrund, sie umzusetzen.
Wo ich weiter gehe
Und damit zum Dark Mode, dem Liebling aller Nachhaltigkeitspräsentationen. Die Rechnung dahinter klingt einleuchtend: Schwarze Pixel leuchten nicht, also sparen sie Strom. Sie stimmt aber nur für OLED-Displays, wo jedes Pixel sein eigenes Licht erzeugt. Bei den weit verbreiteten LCD-Bildschirmen läuft die Hintergrundbeleuchtung durchgehend, egal was Du anzeigst. Dort spart ein dunkles Design exakt null.
Selbst auf OLED ist die Ersparnis bescheidener als erhofft. Bei üblicher Bildschirmhelligkeit landen Messungen im einstelligen Prozentbereich des Displayverbrauchs, und das Display ist wiederum nur ein Teil des Geräteverbrauchs. Nennenswert wird es erst bei sehr hoher Helligkeit. Rechne das gegen ein einziges unoptimiertes Titelbild von einem Megabyte, das bei einer Million Aufrufen rund 400 Kilogramm CO₂ verursacht, und die Größenordnungen sortieren sich neu.
Ich sage das nicht, um vom Dark Mode abzuraten. Ich biete ihn selbst an, weil viele Menschen ihn schlicht angenehmer finden, und das ist Grund genug. Ich sage es, weil er in der Debatte den Platz einnimmt, der den wirksameren Abfragen zusteht. Die eigentlich unterschätzte Angabe in der Liste oben ist prefers-reduced-data: ein Signal, dass jemand sparsam laden möchte. Wer sie auswertet, kann Bilder in kleinerer Auflösung ausliefern, auf Webschriften verzichten oder Videos durch Standbilder ersetzen. Das sind Megabyte, nicht Prozentbruchteile. Die Browserunterstützung ist allerdings noch dünn, und genau deshalb habe ich mir mit einem eigenen Schalter für den Bildmodus beholfen.
Dein erster Schritt heute
Du brauchst dafür kein neues Werkzeug, nur ein paar Minuten und Deine eigene Systemeinstellung.
Und wenn Du schon dabei bist: Ein schlankes Druck-Stylesheet gehört in dieselbe Kategorie. Es kostet Dich einmal eine halbe Stunde und spart jedem, der Deine Seite ausdruckt, ein paar Blatt Papier und Toner.
Die sparsamste Anpassung ist die, nach der Du nicht fragen musst, weil der Browser die Antwort schon kennt.
Quelle: W3C-Fassung von Guideline 3.9