Bookmarklets zur Simulation von Kontrastmodi

Achung: Keine Gewähr für Richtigkeit und Vollständigkeit der Bookmarklets.
Die Kontrastmodi der Betriebssysteme sind ständigen Änderungen unterworfen, diese Bookmarklets geben möglicherweise einen veralteten Stand wieder.

Versionierung: Die Bookmarklets wurden auf Grundlage von Test zu dem Zeitpunkt Juni-September 2022 erstellt.

Betriebssystem Browser
Windows 11 Chrome, Edge, Firefox
macOS Big Sur Safari
Android 12 Betriebssystem Chrome
iOS-Betriebssystem Version 14.2 Safari

Anwendung der Bookmarklets:

Die Links (Linksklick mit der Maus auf den Link und erst in der Bookmarkletsleiste loslassen) in das Menü des Browsers ziehen und schon können sie auf jeder Website verwendet werden. Dazu einfach auf das Bookmarklet klicken.

Check contrasts / Kontraste prüfen5

Das Bookmarklet überprüft Websites auf ausreichend Kontraste, auch für die unten aufgelisteten Kontrastmodi der Betriebssysteme. Seitenelemente, für die es in einem der Kontrastmodi oder generell ein Problem gibt, werden umrandet (je nach Hintergrundfarbe Rot, Schwarz oder Blau) und Informationen zu den Kontrastproblemen wird über das title-Attribut ausgegeben.
Vererbte Hintergrundfarben aus Elternelementen konnten in Ausnahmefällen nicht ausgelesen werden, die errechneten Kontraste sind in diesen Fällen nicht korrekt.

Alle Kontrastangaben für den Browser Firefox wurden aus dem Check Contrasts Bookmarklet ausgeschlossen. Um die Kontraste für Firefox zu testen muss auf die unten aufgelisteten Bookmarklets zurückgegriffen werden.

Die Farben für Elemente in dem Browser Firefox hängen von den durch den Programmierer definierten Farben auf der Website ab. D.h. wenn auf einer Website der Body eine Hintergrundfarbe und Schriftfarbe definiert bekommen hat, werden diese beim aktivieren eines folgender auf dem Windows Betriebssystem hinterlegten Kontrastmodis (Wasser, Wüste, Abenddämmerung, Nachthimmel) nicht weiter verändert. Fehlt die Farbdefinition, werden die Farben beeinflusst.
Das macht ein generelles prüfen deutlich schwieriger als für die anderen Browser. In den Browsern Chrome und Edge werden einfach alle Farben mit denen aus dem gewählten Kontrastmodus überschrieben.
Kann genauer in der Bachelorarbeit nachgelesen werden oder durch die unten verlinkten Bookmarklets getestet werden.

Bookmarklet: Check Contrasts

Kontraste auf Betriebssystemen und Browsern

Kontraste auf Betriebssysteme und Browser Überprüfen

Erklärung zu den Kontrastmodi:


Der Tageslichtmodus ist der Default Modus (hell Modus), der in den meisten Betriebssystemen standdardmäßig als Grundeinstellung dient. Hier werden Farben auf den Standardwert des Browsers gesetzt (Firefox hat z.B. andere Linkfarben als Chrome), wenn sie den Default Wert haben. D.h. der Modus beachtet nur Elemente, für die kein Farbwert definiert wurde. Er sollte daher nicht nach einem Bookmarklet verwendet werden, das für alle Elemente Farben setzt. Am besten die Seite vor dem Anwenden des Bookmarklets einmal neu laden, um unerwünschte Verfälschungen zu vermeiden.

Die Kontrastmodi Wasser, Wüste, Nachthimmel und Abenddämmerung können auf Windows in den Einstellungen gefunden werden. Sie verändern die Farben für Hintergrund- und Schriftfarben nach ihrem Design. Dabei ist die Umsetzung browserabhängig. Während es für Chrome (Windows) immer die Farben aus dem jeweiligen Kontrast umsetzt, werden bei Firefox (Windows) Farbeinstellungen des Browsers und der Website berücksichtigt.

Bei Mac OS können verschiedene Kontraststufen per Regler eingestellt werden. Hier wurde entschieden, nur die höchste Stufe, Maximaler Kontrast (Stufe 7), zu simulieren. Leider konnte der Kontrast nicht ganz korrekt simuliert werden. Abweichungen betreffen vor allem die Hintergrundfarben (Transparenzen).

Der Invertiert Modus ist auf jedem der getesteten Betriebssysteme vorhanden. Bei Android weicht die Usetzung von denen der anderen ab. Er wurde im Rahmen dieses Projektes nicht umgesetzt.

Betriebssystem
& Browser		 Tageslicht / Default Kontrast Wasser Nachthimmel Abenddämmerung Wüste Invertiert Maximaler Kontrast (Stufe 7)
Windows Chrome Tageslichtmodus
Windows/Chrome		 Wasser
Windows/Chrome		 Nachthimmel
Windows/Chrome		 Abenddämmerung
Chrome/Windows		 Wüste
Chrome/Windows		 Invertiert
Chrome/Windows		 Nicht anwendbar1
Windows Firefox4 Tageslichtmodus
Firefox/Windows		 Wasser
Firefox/Windows		 Nachthimmel
Firefox/Windows		 Abenddämmerung
Firefox/Windows		 Wüste
Firefox/Windows		 Invertiert
Firefox/Windows		 Nicht anwendbar1
Windows Edge Tageslichtmodus
Edge/Windows		 Wasser
Edge/Windows		 Nachthimmel
Edge/Windows		 Abenddämmerung
Edge/Windows		 Wüste
Edge/Windows		 Invertiert
Edge/Windows		 Nicht anwendbar1
Mac OS Safari Tageslichtmodus
Mac OS/Safari		 Nicht anwendbar1 Nicht anwendbar1 Nicht anwendbar1 Nicht anwendbar1 Invertiert
Mac OS/Safari		 Maximaler Kontrast
Mac OS3
Android Chrome Tageslichtmodus
Android/Chrome		 Nicht anwendbar1 Nicht anwendbar1 Nicht implementiert2 Nicht anwendbar1 Nicht anwendbar1 Nicht anwendbar1
iOS Safari Tageslichtmodus
iOS/Safari		 Nicht anwendbar1 Nicht anwendbar1 Nicht anwendbar1 Nicht anwendbar1 Invertiert
iOS/Safari		 Nicht anwendbar1

1Diesen Kontrast gibt es in dem Betriebssystem nicht und wurde daher nicht als Bookmarklet abgebildet

2Diesen Kontrast gibt es in dem Betriebssystem, wurde aber nicht als Bookmarklet umgesetzt

3Achtung: Dieses Bookmarklet gibt den Kontrast nur annähernd wieder, Abweichungen betrifft vor allem die Hintergrundfarben (Transparenzen)

4Bei Firefox werden Farbeinstellungen berücksichtigt, die im Browser vorgenommen wurden. Für die Bookmarklets wird von den Defaultwerten ausgegangen.

5Das Check Contrasts Bookmarklet geht für jedes Modul jeden der oben aufgelistetet verfügbaren Kontrastmodi durch und überprüft entsprechend den Prüfschritten „9.1.4.1 Ohne Farben nutzbar“ und „9.1.4.3 Kontraste von Texten ausreichend“ aus dem BIK BITV-Test den Kontrast der Elemente zum Hintergrund, bzw. bei Links auch zur umliegenden Schrift:


Testwebsite

Hier ist eine Testwebsite. Anhand dieser können die Bookmarklets getestet werden. Die Seite bringt verschiedene Kombinationen zu Vorder- und Hintergundfarben auf ihren Seiten mit, wobei der Seitenaufbau immer derselbe ist, für einen besseren Vergleich. Eine frühere Version der Seite wurde auch in der Bachelorarbeit zum Testen genutzt.

Erklärung zur Testwebsite

Copyright 2023 Kompetenzzentrum für digitale Barrierefreiheit
Created by Lina Dreher
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at Apache 2.0 Lizenz Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Das Projekt ist auf GitHub zu finden.