(alt) Contrast Checker: Tool zur Überprüfung von Farbkontrasten – digibasics
Zum Hauptinhalt springen
Version 1.0
Prototyp zur Erprobung

(alt) Contrast Checker: Tool zur Überprüfung von Farbkontrasten

Mit dem kostenlosen Browser-Tool der WebAIM Community kann man ermitteln, ob Farbkontraste ausreichend sind. Die zu prüfenden Farben können per Pinzette ausgewählt, oder als HEX-Farbcode eingegeben werden. Mit dem Tool lässt sich sehr leicht simulieren, wie sich der Farbkontrast verbessert oder verschlechtert, wenn man die Helligkeit einer Farbe ändert.

Screenshot der Webseite https://webaim.org/resources/contrastchecker/. Detaillierte Informationen zur Abbildung siehe unten in der ausführlichen Bildbeschreibung.
Farbkontrastmessung mit dem Contrast Checker

Für die Nutzung ist kein Download, keine Installation notwendig. Der Contrast Checker kann direkt im Browser benutzt werden. Zudem finden sich auf der oben genannten Webseite noch weitere nützliche Tools.

Beschreibung der Abbildung «Farbkontrastmessung mit dem Contrast Checker»

Abgebildet ist die Contrast Checker Webseite:

  • Oben links wird die Vordergrund Farbe und oben rechts die Hintergrund Farbe im HEX-Code angezeigt.
  • Jeweils darunter kann die Farbe per Schieberegler heller oder dunkler gemacht werden.
  • Per Klick in die Farbfläche öffnet sich ein Pop-up Fenster mit einer Farbauswahl. Hier kann eine Farbe gewählt werden, oder mit der Pipette eine Farbe auf dem Bildschirm ausgewählt werden.
  • Direkt darunter wird im Feld «Contrast Ratio» der Kontrast zwischen diesen beiden Farben angezeigt. In unserem Fall ist dies 14.05:1
  • Darunter wird unter der Beschriftung «Normal Text» angezeigt, ob der Kontrast ausreichend ist. In unserem Fall erscheint neben dem Text WCAG AA und WCGA AAA (Web Content Accessibility Guidelines) der grüne Button «Pass» also bestanden. Falls ein Kontrast unzureichend wäre, würde der rote Button «Fail» also nicht bestanden erscheinen.
  • Neben dieser Angabe werden die beiden Farben in einem Beispieltext dargestellt. Es ist der Satz: «The five boxing wizards jump quickly.» in den entsprechenden Farben sichtbar.