Das Windows-Betriebssystem verfügt über einen nativen Hochkontrastmodus, der Farben durch Standardwerte oder benutzerdefinierte Werte ersetzt. Es ist beliebt bei Benutzern mit Sehbehinderung oder Lichtempfindlichkeit.
Die Themen verwenden schwarze oder weiße Hintergründe und codieren verschiedene Elementtypen farblich. Es sollte gleich darauf hingewiesen werden, dass CSS-Stile, die die **background** -Eigenschaft verwenden, in diesem Modus nicht angezeigt werden. Wir werden in Kürze lernen, wie man damit umgeht.
So aktivieren Sie den Modus „Hoher Kontrast“.
Der Modus „Hoher Kontrast“ ist als native Einstellung für die Barrierefreiheit in Windows integriert. Es kann in Windows 10 auf verschiedene Arten aktiviert und angepasst werden:
-
Left Alt+Left Shift+Print Screen - Auf dem Anmeldebildschirm: Erleichterter Zugriff > Hoher Kontrast
Verwenden Sie den Modus „Hoher Kontrast“ mit Edge oder Internet Explorer (oder anderen veröffentlichten Microsoft-Browsern). Es funktioniert mit Firefox, aber die Effekte sind nicht immer konsistent oder verwendbar. Hoher Kontrast funktioniert nicht mit Chrome.
Lesen Sie dieses Windows-Supportdokument mit weiteren Anweisungen und Anleitungen für andere Windows-Versionen .
Wonach schauen
Das Testen mit hohem Kontrast ist eine weitere Möglichkeit, Probleme mit Farben zu finden, da Sie damit leicht nach Folgendem suchen können:
- Inhalte, Symbole oder andere Indikatoren, die allein auf Farbe angewiesen sind, um Informationen zu vermitteln
- Elemente, die allein auf Hintergrundfarben angewiesen sind, um von anderen Elementen wie Schaltflächen oder Modalen unterschieden zu werden
- Tastaturfokusstile oder Fehlerzustände, die allein auf Farbe beruhen; üblich, wenn diese Zustände allein auf eine Farbänderung oder auf das Ein- und Ausblenden einer Grenze angewiesen sind
- Transparente Bilder oder SVGs, die vor schwarzem oder weißem Hintergrund nicht sichtbar sind
Auflösung für hohen Kontrast
Normalerweise gibt es ein paar einfache Verbesserungen, die vorgenommen werden können, um Benutzer des Modus „Hoher Kontrast“ besser zu unterstützen.
- Geben Sie Elementen, die auf eine Hintergrundfarbe angewiesen sind, einen transparenten Rahmen. Dies kann mit einer regulären CSS-Eigenschaft (
border: 1px solid transparent;) erfolgen und ist nur im High Contrast-Modus sichtbar. - Verwenden Sie die standardmäßige Browser-
outline, um den Tastaturfokusstatus anzuzeigen, anstatt sich auf einen Rahmen zuborder. - Wenn ein CSS-Rahmen das Problem nicht behebt oder die Anzeige einer bestimmten Farbe oder eines bestimmten Fokusstils im Modus „Hoher Kontrast“ erforderlich ist, kann das Anbieterpräfix „
-ms-high-contrast“ verwendet werden, um Stile nur dann anzuwenden, wenn eine Person „Hoher Kontrast“ verwendet. Denken Sie daran, dass Menschen High Contrast verwenden, um die Anzahl der Farben zu reduzieren und die Benutzeroberfläche anzupassen. Verwenden Sie daher High Contrast-spezifische Stile sparsam. Erfahren Sie mehr über die Einschränkungen von-ms-high-contrast. - Geben Sie bei transparenten Grafiken hellen Grafikdateien einen dunklen Rand und dunklen Grafiken einen hellen Rand, damit sie leichter von schwarzen oder weißen Hintergründen unterschieden werden können.
WCAG-Erfolgskriterien
Dies kommt auf 1.4.1 Verwendung von Farbe zurück, wo es heißt:
"Farbe wird nicht als einziges visuelles Mittel verwendet, um Informationen zu übermitteln, eine Aktion anzuzeigen, eine Reaktion hervorzurufen oder ein visuelles Element zu unterscheiden."