Skip to content

Barrierefreiheit: Farben

Hintergrundfarben

Ein Aspekt der WCAG-2.1-AA-Richtlinie sind Vorgaben in Bezug auf das Kontrastverhältnis von Schriften zum jeweiligen Hintergrund. In OpenOlat werden Linkelemente mit zu hellen Farben daher automatisch abgedunkelt, sodass sie den Mindestkontrast gemäss WCAG 2.1 erfüllen. Auf grauem Hintergrund kann dies zu sichtbaren Unterschieden der Schriftfarbe gegenüber dem weissen Hintergrund führen.

In der Regel ist dies nur der Fall, wenn die gewählte Standardfarbe bereits einen sehr tiefen Kontrastwert hat. Dies kann z.B. mit folgendem Tool überprüft werden:
https://webaim.org/resources/contrastchecker/

Empfehlungen

A) Wenn die "Corporate Color" über einen tiefen Kontrastwert verfügt, so sollte diese nur in Layoutelementen wie dem Logo oder als Hintergrundfarbe in der Topnavigation präsent sein und nicht als Linkfarbe verwendet werden. Als Linkfarbe könnte verwendet werden:

  • eine kontrastreiche Variante der Hauptfarbe
  • eine Komplementärfarbe, welche mit der Hauptfarbe harmoniert
  • eine sekundäre "Corporate Color"

B) Ist keine alternative Farbe für die Links möglich, so kann die automatische Kontrastanpassung deaktiviert und wieder die kontrastschwache Hauptfarbe verwendet werden. Wir weisen darauf hin, dass damit keine WCAG-AA-Konformität erreicht werden kann.

Beispiele

Wir achten darauf, dass der Kontrast (insbesondere der Primärfarben) eine besonders gute Lesbarkeit ermöglicht. Zum Beispiel enthält das Farbwahl-Werkzeug ausschliesslich Farben, die auf Kontrast getestet sind.

Zwölf auf Kontrast geprüfte Farben, jede mit weisser Schrift auf dem Farbfeld als Lesbarkeitsprobe, im Dropdown Farbe des Tabs Annotationen im Video-Editor

Weiterführende Informationen

WCAG 2.1 (W3C) >
WebAIM Contrast Checker >
Barrierefreiheit: Grundsätze >
Lernressource: Video >
Customizing: Übersicht >

Zum Seitenanfang ^