Individuelle Farben und Kontraste auf Websites – Eine Entdeckungsreise

Zusammenfassung

Auf Betriebssystemen lassen sich helle und dunkle sowie kontrastreiche Darstellungen von Benutzungsoberflächen in den Voreinstellungen festlegen. Sie gelten dann für das Betriebssystem und für alle Programme, die das unterstützen. Websites sind zunächst einmal nicht davon betroffen.

Von der Website selbst definierte „Dark-Modes“ mittels CSS (Feature-Queries) können sehr sinnvoll sein, da die Website dann auf Farb- und Kontrasteinstellungen des Gerätes reagiert. Damit übernimmt aber auch die Website die Verantwortung für die Gestaltung dieser Styles.

Browser wie Firefox gehen hier weiter. Sie greifen – wenn gewünscht – massiv in das Erscheinungsbild von Websites ein. Es lassen sich so individuelle Erscheinungsbilder erstellen, die die ursprünglichen Farben der Website fast komplett ersetzen. Voraussetzung ist hier, dass das HTML der Seite gut aufgebaut ist. Sonst können die Regeln zum Einfärben der Bedienelemente, Texte und Links nicht angewendet werden.

Sogenannte Overlay-Programme, die auf Websites installiert werden und ebenfalls eigene Farb- und Kontrasteinstellungen haben, sind für manche Menschen eine einfache und schnelle Lösung. Allerdings kosten sie in vielen Fällen dem Website-Betreibenden Geld und reagieren nicht oder unvorhersehbar mit individuellen Farbeinstellungen in Browsern und Betriebssystemen von Nutzenden.

Um möglichst vorhersagbare Ergebnisse bei individuellen Farb- und Kontrasteinstellungen auf Websites zu erreichen, ist es wirklich wichtig, für alle Texte und Bedienelemente eine Vorder- und eine Hintergrundfarbe zu definieren.
Auf das verwenden der CSS-Eigenschaft „border:none“ sollte verzichtet werden, da es sonst Probleme mit dem Kontrast-Mode von Windows geben kann.

Farben gliedern Inhalte und machen Bedienungsoberflächen verständlich. Farben schaffen vor allem auch Markenbilder und wecken Emotionen. Sie sind eins der mächtigsten Werkzeuge im Design. Allerdings nur, wenn sie gleich wahrgenommen werden. Designende müssen sich darüber klar sein, dass nicht alle Menschen Farben und Helligkeitsunterschiede gleich sehen. Manche Menschen sehen gar keine Farben und Kontraste. Andere brauchen extrem unterschiedliche Farben, um Unterschiede wahrnehmen zu können, während wieder andere eher weniger Kontrast brauchen, um ohne Kopfschmerzen das Internet nutzen zu können.

Betriebssysteme, Browser und viele Hilfsprogramme liefern teils umfangreiche individuelle Einstellungsmöglichkeiten, die das farbliche Erscheinungsbild einer Website teils drastisch verändern, dafür aber den Zugang für viele Menschen erst möglich machen. Es lohnt sich also, die eigene Website mit den verschiedenen Farb- und Kontrasteinstellungen von Betriebssystem, Browsern oder Plugins, anzuschauen. Wie sieht die Seite bei schwachen Kontrasten aus, wie bei besonders hohen? Wie sieht sie mit anderen- und wie ganz ohne Farben aus?

Wo steht das geschrieben?

Erfolgskriterium 1.4.8 in den WCAG 2.1 und 2.2 der Richtlinie „Anpassbar“ unter dem Prinzip „Wahrnehmbar“ (Perceivable) ist ein AAA-Kriterium und fordert unter anderem die Möglichkeit, das Websites sich den individuellen Farb-Einstellungen von Nutzenden anpassen. Damit könnten wir es bei den meisten Tests und Audits erst mal hinten anstellen, denn gefordert wird meist AA-Konformität. Aber: Die dort verlangte Möglichkeit von nutzerdefinierten Farbeinstellungen wirkt sich auch auf 1.4.3 aus – dem Mindestkontrast-Kriterium mit AA Status. Damit sind definierte Vorder- und Hintergrundfarben nicht nur Best-Practice, sondern unbedingt mit zu überprüfen. Denn, auch wenn Nutzende eigene Farbschemata eingestellt haben, muss die Website sicherstellen, dass der Mindestkontrast von Texten und Schaltflächen in allen Zuständen erhalten bleibt. Daher gibt es in vielen Tests den Prüfschritt, Vorhandensein von Vorder- und Hintergrundfarben zu überprüfen. Wir kommen weiter unten noch dazu, warum das wichtig ist.

Darüberhinaus schreibt die EU-Norm 301 549 für Software die Anpassbarkeit an individuelle Farbeinstellungen des Nutzenden unter 11.7 „User preferences“ vor. Auch Websites können unter Software fallen, wenn sie als Anwendungen (Web-App) im Browser laufen.

TLDR – Auf der sicheren Seite

Die einfachste Methode ist, immer sowohl Vorder- als auch Hintergrundfarbe von Texten und interaktiven Flächen auf Websites in allen Zuständen festzulegen. Wenn dabei die Mindestkriterien für den Kontrast beachtet werden, ist schon viel erreicht. Nutzende können dann verläßlich entweder mit einem Browser wie Firefox alle Text- und Hintergrundfarben nach ihren Vorstellungen einfärben, oder entscheiden, dass bei Websites die Original-Farben beibehalten werden.

Wer sich aber gerne mit mir weiter in das Thema vergraben möchte und sich schon immer gefragt hat, was alles an Einstellungen möglich ist, darf hier gerne weiterlesen:

Kontrast- und Farbeinstellungen in Betriebssytem und Browsern

Es ist kann verwirrend sein, zu versuchen, das Zusammenspiel von Websites und Einstellungen, die im Betriebsystem und in manchen Browsern zu Farben und Kontrasten möglich sind, zu verstehen. Manchmal habe ich das Gefühl, dass da oft auch nicht alle Beteiligten genau durchblicken. Die folgenden Erkenntnisse sind Ergebnisse eigener Tests von mir mit einer selbst gebastelten HTML-Seite. Teilweise war es schwer, die Ergebnisse zu wiederholen, weil mir der Browser-Cache in die Quere kam. Aber ich versuche trotzdem mal, den Nebel zu lichten:

Voreinstellungen für Kontraste und Farben in Betriebssystemen gibt es an verschiedenen Stellen der Systemeinstellungen. „Berühmt berüchtigt“ ist der „High-Contrast-Mode“ bei Windows. In MacOS befindet sich unter „Erscheinungsbild“ eine nicht ganz so umfassende Einstellung für eine Hell- oder Dunkelansicht. Unter Bedienungshilfen gibt es hier zusätzlich auch noch einen Schalter für die Kontrasterhöhung.

Hinzu kommen noch die Einstellungen für die Bildschirmhelligkeit an sich. Sie verändern aber die Monitorwerte an sich und nicht das Erscheinungsbild der Inhalte. Daher habe ich sie hier nicht mit betrachtet.

Alle diese Einstellungen beziehen sich zunächst einmal auf das Betriebssystem. Sie dienen dazu, die Benutzungsoberfläche des Computers und unterstützter Software anzupassen. Im Browser angezeigte Webinhalte stehen dabei gar nicht so sehr im Fokus. Aber sie können mit angesprochen werden. Denn bestimmte CSS-Regeln auf Websites und Browsereinstellungen fragen gezielt nach bestimmten Einstellungen im Betriebssystems und passen sich dann an diese an.

Schauen wir uns zunächst MacOS an:

MacOS: Erscheinungsbild Dark- bzw. Light-Mode

Ohne weitere Einstellungen im Browser oder im Code der Website reagierte eine Website mit definierten Vorder- und Hintergrundfarben in meinen Tests erst mal nicht auf die Einstellung eines Light- oder Dark-Mode. Lediglich das Erscheinungsbild des Browsers selbst reagierte entsprechend und wird dunkler.

Ist auf einer Website mit Hilfe von CSS das sogenannte „Feature-Query“ prefers-color-scheme gesetzt und sind damit bestimmte CSS-Regeln verknüpft, reagiert die Website auf die entsprechende Systemeinstellung. Wenn dort zum Beispiel ein Dark-Mode eingestellt wurde und es auf der Website ein entsprechendes Feature-Query prefers-color-scheme:dark gibt, dann erscheint die Website in dem damit verknüpften Stil.

MacOS: Browser Einstellungen

Chrome bietet eigene Light- und Dark-Mode-Einstellungen unter MacOS an. Sie wirkten sich allerdings in meinen Versuchen nur auf die Browseroberfläche und nicht auf Websites aus, auch wenn diese dafür vorgesehene CSS-Eigenschaften besaßen. Das fand ich einigermaßen verwirrend. Am Besten, diese Einstellung steht immer auf „Gerät“, dann übernimmt sie die Voreinstellung des Betriebssystems.

Auch Firefox bietet eigene Einstellungen an, die aber weit über die der anderen Browser hinausgehen: Man kann hier ebenfalls zwischen Light-, und Dark-Mode wählen. Die Einstellungen dort überschreiben die Systemeinstellungen. Und sie wirken sich auch auf Websites aus, wenn diese entsprechend programmiert wurden.

Website der Stadt Düsseldorf in Originalfarben.
Wesbite in Originalfarben
Website der Stadt Düsseldorf in individuellen Farben – eingefärbt mit Firefox.
Website mit individuellen Farben in Firefox

Problematisch wird es in Firefox bei nicht angegebenen Farben. Wenn zum Beispiel keine Hintergrundfarbe angelegt wurde (weil der automatische Hintergrund des Browsers eh immer weiss erschien), setzt Firefox automatisch die selbstgewählte Farbe ein, die unter „Farben verwalten“ definiert wurde. Dort gibt es zwar die Möglichkeit, auszuwählen, dass diese Farben nie eingesetzt werden sollen, das gilt aber nicht für nicht vorhandene Farben. Die Absicht dahinter ist wohl, Websites ganz ohne eigene Farben oder reine HTML-Ansichten mit individuellen Farben belegen zu können, ohne Websites mit eigenem Design zu verändern. Wenn die genannte Website ohne eigene Hintergrundfarbe aber eine festgelegte Textfarbe hat, kann es passieren, dass die in den Firefox-Einstellungen definierte Hintergrundfarbe der von der Website definierten Textfarbe sehr ähnelt oder oder sogar mit ihr identisch ist. Das Ergebnis ist dann mindestens schlecht lesbar bis gar nicht mehr zu sehen.

Eine einfache Website mit schwarzer Überschrift, einem Button und einem Link vor weissem Hintergrund. Der Link ist hellblau und schlecht sichtbar.
Original-Website mit weissem – nicht definierten Hintergrund.
Eine Website mit schwarzer Überschrift, weissem Text und blauem Link vor dunkel-lila Hintergrund. Die Überschrift ist fast nicht sichtbar.
Hintergrundfarbe in Firefox angepasst. Wird angewendet trotz Einstellung „nie“

Firefox hat übrigens noch eine kleine Checkbox im Farben-Dialog, die – angeklickt – die Browsereinstellungen ignoriert und stattdessen Farben, die im Betriebssystem hinterlegt sind, verwendet. Wo diese aber bei MacOS definiert werden, habe ich nicht gefunden.

Weder bei Safari noch bei Chrome gibt es ähnliche Einstellungen für die individuelle farbliche Darstellung von Webinhalten wie bei Firefox. Safari bietet eine Möglichkeit, eigene Stylesheets hochzuladen. Das habe ich nicht getestet. Dazu müssten Nutzende aber in der Lage sein, CSS zu schreiben.

Für Chrome gibt es Erweiterungen, die Websites in verschiedenen Farbkontrasten darstellen können – zum Beispiel „High Contrast/Hoher Kontrast“. Sie überschreiben die Farben der Website komplett und setzen ihre eigenen Farben ein. Dabei ignorieren sie meiner Beobachtung nach übrigens auch die Feature-Queries der Websites.

Windows 11: Einstellung Kontrast-Designs

Auf Deutsch heisst der High-Contrast-Mode, der auch oft im Barrierefreiheitskontext erwähnt wird, „Kontrast-Designs“.

In Chrome unter Windows hat die Einstellung des Kontrast-Designs immer umfassende Auswirkungen auf die Darstellung von Websites – auch wenn dort keine Styles für Dark-Mode etc. hinterlegt sind. So verändert sich das Design erheblich und wird nach den Vorgaben des Windows Betriebssystems angepasst.

Edge hat zwar auch eigene Farbeinstellungen, aber auch hier überschreibt der High-Contrast-Mode alles und ignoriert sie komplett.

Wieder geht Firefox einen eigenen Weg: Ist unter „Farben verwalten“ in den Einstellungen des Firefox Browser die Option „Nie“ ausgewählt, hat die Kontrast-Design-Einstellung im Betriebssystem keine Auswirkungen auf die Hintergrund- und auf Textfarben der Website, wenn ihnen von der Website Farben zugewiesen wurden. Dagegen hat die Einstellung Auswirkungen auf Text- und die Link-Farben, wenn ihnen von der Website keine Farben zugewiesen wurden. Sie werden an die Farben des ausgewählten Kontrast-Designs im Betriebssystem angepasst, wenn die entsprechende Checkbox aktiviert ist. Wenn nicht, werden sie an die in Firefox hinterlegten Farben angepasst.

Ist hingegen die Option „Nur in Designs mit hohem Kontrast“ ausgewählt, hat die Kontrast-Designs- Darstellungsart im Betriebssystem Auswirkungen auf die Darstellung der gesamten Website inklusive Hintergrundfarben. Und zwar:

  • werden die unter „Farben verwalten“ in Firefox eingestellten Farben für Text, Hintergrund, Links und besuchte Links genutzt.
  • ist die Checkbox „Systemfarben benutzen“ aktiviert, werden die Browserfarben ignoriert und stattdessen Farben genommen, die im Betriebsystem unter „Kontrast Designs“ ausgewählt wurden.

Sowohl in Chrome als auch in Firefox und Edge werden im High-Contrast-Mode zusätzlich auf der Website angelegte Styles für das Media-Feature prefers-contrast:more; berücksichtigt, allerdings nicht, wenn diese Styles Farben definieren.

Das ist einigermaßen schwer zu durchschauen und es lohnt sich, das selbst zu testen.

Eine Besonderheit beim High-Contrast-Mode von Windows: der Modus entfernt einige Hintergrundfarben – z.B. die von Buttons – und ersetzt sie durch Umrandungen. Wenn im Design allerdings border:none; definiert ist, fügt er keine Border-Farbe hinzu, sondern behält diese Einstellung bei. Der Button sieht dann aus wie normaler Text. Anders verhält es sich, wenn ‘border’ normal definiert und stattdessen auf ‚transparent‘ gesetzt wird. Dann wird ‚transparent‘ durch die im High-Contrast-Mode definierte Farbe ersetzt.

Windows 11: Einstellungen Personalisierung

Windows hat nicht so etwas wie einen Light- oder Dark-Mode. Es bietet aber unter „Personalisierung“ verschiedene Designs zur Auswahl. Einige davon haben ein eher dunkles, andere ein eher helles Erscheinungsbild. Auch hier geht es erst mal nur darum, die Oberfläche des Betriebssystems selbst und der Anwendungen anzupassen. Websites sind davon zunächst nicht betroffen. Browser auch nur dann, wenn in ihren Einstellungen augewählt ist, dass die Einstellungen des Betriebssystems übernommen werden sollen. Alle drei Browser – Chrome, Edge und Firefox – bieten jeweils eigene Light- und Dark-Mode-Einstellungen an, die die Einstellungen des Betriebssystems überschreiben.

Websites reagieren auf diese Einstellung nur dann, wenn sie eigene Stylesheets für einen Dark-Mode haben. Ist dieser mittels Feature-Query prefers-color-scheme hinterlegt, reagieren sie auf die Betriebssystemeinstellung unter Windows entsprechend und passen ihr Aussehen an. Sie reagieren dann auch auf die Anpassung dieser Einstellung im Browser.

Auf diese Weise können Nutzende z.B. entscheiden, dass sie im Betriebssystem ein eher dunkles Erscheinungsbild haben möchten, für Websites und Browser aber lieber ein helles bzw. das Original-Erscheinungsbild der Website.

Firefox verhält sich aufgrund der vielen Anpassungsmöglichkeiten hier wieder anders:

  • Wird in den Einstellungen zu Sprache und Erscheinungsbild der Helligkeit-Mode auf Automatik gestellt, unter Farben verwalten die Checkbox Systemfarben verwenden angeklickt und in der Auswahlbox darunter Immer ausgewählt, dann werden die Systemfarben nicht nur für den Browser selbst, sondern auch für die Website angewendet. Un zwar unabhängig davon, ob die Website eigene Styles für Dark- und Light-Mode hat.
  • Diese Einstellung kann aber in Firefox selbst überschrieben werden: Wird statt Automatik Hell ausgewählt, werden die Systemeinstellungen nicht angewendet – der Browser wird hell und die Website in ihrem ursprünglichen Design dargestellt – selbst wenn unter Farben verwalten Nie ausgewählt wurde.
  • Ist die Checkbox Systemfarben verwenden unter Farben verwalten hingegen nicht angeklickt, reagiert Firefox anders: Die Auswahl des Helligkeit-Modes hat dann keine Auswirkungen – Browser und Website erscheinen ausschließlich in den Farben, die unter Farben verwalten definiert wurden, wenn dort die Auswahl Immer gewählt wurde.
  • Ist stattdessen Nie ausgewählt, reagiert wie bei allen anderen Browsern nur der Browser selbst, nicht die Website auf die Einstellungen des Betriebssystems bzw. des Browsers. Es sei denn, die Website hat eigene Styles für einen bestimmten Mode.

iOS und iPadOS

Beide mobile Betriebsyste von Apple haben die gleichen Einstellungen für Farben und Helligkeit zur Anpassung der Benutzungsoberflächen.

Der unter den allgemeinen Einstellungen zu findende Dark- und Light-Mode hat zunächst einmal keine Auswirkungen auf Websites im Browser, sondern nur auf Betriebssystem und Anwendungen. Ist aber ein Stylesheet mit dem entsprechenden Feature-Query hinterlegt, reagiert auch die Website auf diese Einstellung.

Auch hier habe ich wieder beobachtet, dass es Sinn macht, alle Farben zu definieren, denn verlässt man sich bei manchen Farben – zum Beispiel Hintergründe von Buttons, Linkfarben etc. – auf den Browser, kann es sein, dass sie zusammen mit den Dark-Mode-Farben zu unerwünschten Effekten führen.

Weitere Einstellungen zur Anpassung sind unter Bedienungshilfen zu finden. Einige davon – wie der Schalter zu „Kontrast erhöhen“ – haben den gleichen Effekt wie unter MacOS. Auch hier gibt es keine Auswirkungen auf die Website. Es sei denn, dass Feature-Query prefers-contrast: more; ist gesetzt und mit Styles versehen.

Neuerdings gibt es in allen Apple Betriebssystemen den Schalter für „Umkehren intelligent“ und „Umkehren klassisch“. Beide wirken sich auf Websites aus, unabhängig davon, ob diese dafür hinterlegte Styles besitzen oder nicht. „Umkehren intelligent“ heisst deswegen so, weil er Bilder und Grafiken möglichst nicht verändert, sondern nur Flächen und Texte. Dabei folgt er offenbar eigenen Regeln – ähnlich wie der High-Contrast-Mode unter Windows: Der Seitenhintergrund wird schwarz, Links werden gelb und Button-Beschriftungen orange/braun.

Offenbar gibt es aber keine Regeln für das Überschreiben von Button-Hintergrundfarben und auch kein eigenständiges Hinzufügen einer Umrandung wie bei Windows. Daher: Sind Buttons im CSS eher dunkel gefärbt, bleiben sie das auch im intelligenten Umkehr-Mode, wodurch sie vor schwarzem Hintergrund dann unsichtbar werden. Es bleibt nur der eingefärbte Button-Text stehen. Hier könnte Apple vom High-Contrast-Mode von Windows lernen, dort wird eine Umrandung bei Buttons eingefügt.

Schlussworte

In diese komplexe Welt der individuellen Farb- und Kontrasteinstellungen greifen seit kurzem auch Anbieter sogenannter Overlay-Tools mit ein. In meinen Versuchen reagierte ein in Deutschland verbreitetes Overlay-Tool auf die im Betriebssystem oder Browser hinterlegten Farbeinstellungen nicht. Hier muss der Nutzende also diese Modes zusätzlich anschalten. Websites mit eigenem Dark-Mode im CSS sind hier komfortabler. Der High-Contrast-Mode hingegen wird trotz Overlay vom System auf die Seite angewendet. Eigene Kontrast-Einstellungen des Overlay-Tools werden nur vereinzelt zusätzlich angewendet, was zu unerwünschten Effekten wie zu schwache Farbkontraste bei Farbfehlsichtigkeitseinstellungen in Kombination mit dem High-Contrast-Mode führen kann.

Ich habe dennoch mehrfach gehört, das gerade Menschen, die nicht so vertraut mit den Einstellungen ihres Computers sind, diese Einstellungsmöglichkeiten von Overlay-Tools direkt auf der Website sehr praktisch finden. Das liegt vor allem daran, dass die oben beschriebenen Einstellungen in Betriebssystemen und Browsern wenig bekannt, schwer zu finden sind und komplexe Wechselwirkungen haben.

Sinnvoller erscheint mir trotz aller Wechselwirkungen und Komplexität dennoch die einmalige Einstellung von individuellen Kontrasten und Farben im Betriebssystem und die Feinjustierung im Browser. Denn dadurch gelten sie für alle Anwendungen und für Webinhalte – wenn gewünscht. Website-Betreibende können sich darauf einstellen und ihre Seiten entsprechend optimieren. Und sie sparen sich die Kosten für einen Drittanbieter. Schön wäre, wenn sich Betriebssystem- und Browser-Hersteller in Zukunft etwas besser abstimmen würden.