Farbkontrast-Checker

Lesbarkeit hängt vom Helligkeitsunterschied zwischen Text- und Hintergrundfarbe ab. Je größer dieser Unterschied, desto leichter ist der Text zu lesen. Zu geringer Kontrast erschwert das Lesen - besonders für Menschen mit Sehbeeinträchtigungen, ältere Personen oder bei schwierigen Lichtverhältnissen.

Laut der Weltgesundheitsorganisation (WHO) haben weltweit etwa 2,2 Milliarden Menschen eine Form von Sehbeeinträchtigung.

Das Kontrastverhältnis wird nach der WCAG 2.1-Formel berechnet. Es beschreibt den Helligkeitsunterschied zwischen zwei Farben auf einer Skala von 1:1 (kein Unterschied) bis 21:1 (maximaler Unterschied).

Das Tool zeigt das Kontrastverhältnis auf einer Skala von 1:1 (kein Kontrast) bis 21:1 (maximaler Kontrast – Schwarz auf Weiß). Das Ergebnis wird mit den im WCAG-Standard definierten Schwellenwerten verglichen:

• Normaler Text – erfordert mindestens 4,5:1 für Level AA (Mindeststandard) oder 7:1 für Level AAA (erweiterter Standard). Gilt für Text unter 18pt (24px) oder unter 14pt (18,5px) fett.
• Großer / fetter Text – erfordert mindestens 3:1 für Level AA oder 4,5:1 für Level AAA. Gilt für Text ab 18pt (24px) oder ab 14pt (18,5px) fett – Überschriften, Buttons, Hervorhebungen.
• Symbole und UI-Elemente – erfordern mindestens 3:1 für Level AA. Gilt für Icons, Buttons, Formularfelder und andere Oberflächenelemente, die Informationen vermitteln.

Level AA ist das Minimum, das von den Barrierefreiheitsvorschriften in vielen Ländern verlangt wird, einschließlich der EU-Richtlinie über die Barrierefreiheit von Websites. Level AAA bietet bessere Lesbarkeit, ist aber nicht immer für alle Elemente praktisch umsetzbar.

Wenn die gewählte Farbkombination den Kontrastschwellenwert nicht erfüllt, schlägt die Match-Funktion automatisch die nächstliegende Textfarbe vor, die die Anforderung erfüllt. Die vorgeschlagene Farbe bleibt so nah wie möglich am Original.

Sie können den Schwellenwert zwischen AA (4,5:1) und AAA (7:1) umschalten, und die Match-Funktion passt die Vorschläge entsprechend an. Dies erleichtert die Suche nach barrierefreien Farbkombinationen, ohne den gewünschten Farbton komplett aufgeben zu müssen.

Fehlermeldung zum Farbformat

Überprüfen Sie das Farbformat. Ein HEX-Code muss mit # beginnen und 3 oder 6 Zeichen enthalten (z. B. #fff oder #ffffff). Beim RGB-Format müssen die Werte durch Kommas getrennt sein und im Bereich 0–255 liegen.

Die Match-Funktion findet keine passende Farbe

Wenn Hintergrund und Text eine ähnliche Helligkeit im gleichen Farbton haben, kann der Algorithmus möglicherweise keine Variante finden, die die Anforderungen erfüllt, ohne den Farbton zu ändern. In diesem Fall sollten Sie die Hintergrundfarbe ändern oder eine ganz andere Textfarbe wählen.

Farbe im Farbwähler stimmt nicht mit dem eingegebenen Code überein

Der Farbwähler des Browsers unterstützt nur das HEX-Format ohne Transparenz. Wenn Sie eine Farbe im RGBA- oder HSLA-Format mit Transparenz eingeben, zeigt der Farbwähler nur den Farbanteil (ohne Alpha). Die Kontrastberechnung berücksichtigt die Transparenz weiterhin.

Etwa 8 % der Männer und 0,5 % der Frauen haben eine Farbsehschwäche. Die häufigste Form ist die Rot-Grün-Schwäche (Deuteranomalie), bei der rote und grüne Töne schwer zu unterscheiden sind.

Der WCAG-Kontrasttest prüft nur den Helligkeitsunterschied, nicht die Farbunterscheidung. Beachten Sie daher zusätzlich: Verwenden Sie nie nur Farbe allein, um Informationen zu vermitteln (z. B. "rote Felder sind Pflichtfelder"). Ergänzen Sie Farbe stets durch Beschriftungen, Muster oder Symbole.