Barrierefreiheit - Farben & Kontrast - Testen und Umsetzen
Frontend Entwickler müssen sich mit der kommenden Frist für Barrierefreiheit immer tiefer mit dem Thema auseinandersetzen. Da sind auch Diskussionen mit den UX Designer auch gerne mal fehlgeleitet, wenn es um das Thema Kontrast der Texte oder ähnliches geht. Das UX Design muss die CI des Kunden umsetzen, da kommen fehlgeleitete Einwände zu kontrastreicheren Farben nicht gut an. Ausnahme sind dann alternative Kontrastfarben, die zusätzlich bestimmt werden.
Testen/Simulieren
Wir können in unserem Betriebssystem den Kontrastmodus unter den Bedienungshilfen aktivieren, oder aber im Browser diese Einstellung in den Entwicklertools aktivieren. In Chrome müssen wir den Rendering Tab aktivieren mit Control Shift P, bzw. Mac ⌘Command Shift P und aktivieren Show Rendering.
Im neuen Tab Rendering können wir nun unter Emulate CSS media Feature preferes-contrast auf den Kontrastmodus stellen, den wir testen möchten. Zur Auswahl stehen:
- preferes-contrast: more
- preferes-contrast: less
- preferes-contrast: custom
CSS
Nun können wir im CSS auf die Kontrasteinstellungen mit Media Queries reagieren:
.contrast-test {
@media (prefers-contrast:no-preference) {
color: darkgreen;
}
@media (prefers-contrast:more) {
color: white;
}
@media (prefers-contrast:less) {
color: lightgreen;
}
}
In Chrome können wir auch die gewählten Einstellungen mit einem Lighthouse Test prüfen, was wirklich praktisch ist.