Kontraste

Hintergrund

Für Personen mit einer Sehbehinderung kann es schwierig sein, Darstellungen in Grafiken und auch Schriften zu erkennen. Das kann sich zeigen durch verringter Sehschärfe (z.B. das scharfe Erkennen von Buchstaben ist eingeschränkt) oder durch Kontrast-Schwäche und Farbenblindheit. Deshalb ist es wichtig, dass Schriften genug gross, Kontraste genug stark sind und keine Farbkombinationen gewählt werden, die Farbenblinde betreffen^[1]. Wie du die Kontraste deiner Farbkombinationen überprüfst, beschreibt die Anleitung.

Farben der HfH

Das HfH-Rot weist auf weissem Hintergrund einen unzureichenden Kontrast für normalen Text auf. Nehmt das dunkle Rot und die hier aufgelisteten Farben als Sekundärfarben:

• Rot: #be1925
• Dunkelgrün: #57751c
• Türkis: #14776c
• Blau: #427ca4
• Dunkelorange: #b46100

Zur gesamten Farbpalette der HfH

Auf der nächsten Seite Kontraste der HfH-Farben findet ihr eine Übersicht aller Kontrastwerte, gemessen vor weissem respektive schwarzem Hintergrund.

Anleitung

Der Colour Contrast Analyser (CCA) ist ein gutes Tool, um Kontraste zu überprüfen.

Zuerst wählst du das Pipetten-Symbol (1).

Danach fährst du mit der Lupe (2) auf die beiden Farben, bei denen du den Kontrast überprüfen möchtest.

Nach dem Auswählen der Farben, werden sie im CCA angezeigt. Wichtig ist nur, was unter «1.4.3 Contrast (Minimum) (AA)» (3) angezeigt wird. In diesem Beispiel sind die Kontraste genug stark für eine Grafik, aber nicht für Schriften. Für die Grafik kann die Farbkombination so verwendet werden.

Fortgeschrittene Tools für weitere Überprüfungen

High Contrast Mode

Es gibt eine Chrome Extension «High Contrast Mode», die ein Einstellen von höherem Kontrast oder Dark Mode (und mehr) ganz einfach macht.

Forced Colors

Im Chrome kann man ‚erzwungene Farben‘ emulieren. Ultrakurzanleitung: Untersuchen, Run command, Show Rendering, ‹Emulate CSS media feature forced colors›. Im folgenden Video sieht man an wie vielen Orten es noch mit der barrierenfreien Umsetzung happert.