Farbkontrast-Prüfer (WCAG)

Der Farbkontrast-Prüfer berechnet das Kontrastverhältnis zwischen einer Text- und einer Hintergrundfarbe und zeigt, ob die Kombination die WCAG-Richtlinien für Barrierefreiheit erfüllt. Du wählst beide Farben aus, siehst sofort eine Live-Vorschau mit Beispieltext sowie das exakte Verhältnis – nützlich für Webdesign, Apps und alle Stellen, an denen Text gut lesbar sein muss.

So funktioniert der Kontrast-Check

Du wählst zwei Farben aus: die Textfarbe und die Hintergrundfarbe – per Farbwähler oder als Hex-Code wie #1a2233. Aus beiden Werten berechnet das Tool die relative Luminanz (Helligkeit) und daraus das Kontrastverhältnis nach der WCAG-Formel.

Eine Live-Vorschau zeigt Beispieltext in genau diesen Farben, sodass du zusätzlich zur reinen Zahl sofort siehst, wie gut sich der Text vom Hintergrund abhebt.

So wird das Kontrastverhältnis berechnet

Für jede Farbe wird zunächst die relative Luminanz L aus den RGB-Anteilen berechnet: Jeder Farbkanal wird gammakorrigiert und anschließend gewichtet – mit 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau, denn Grün wirkt für das menschliche Auge am hellsten.

Das Kontrastverhältnis ergibt sich als (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und L2 die dunklere Farbe ist. Der Wert liegt immer zwischen 1 : 1 (kein Unterschied) und 21 : 1 (Schwarz auf Weiß, maximal möglicher Kontrast).

Beispiel

Bei den voreingestellten Farben – Text #1a2233 (dunkles Blaugrau) auf Hintergrund #ffffff (Weiß) – ergibt sich ein Kontrastverhältnis von 15,9 : 1. Das reicht deutlich für AA-Normaltext (ab 4,5), AA-Großtext (ab 3,0) und sogar AAA-Normaltext (ab 7,0) – alle drei Prüfungen werden bestanden.

Zum Vergleich: Helles Grau wie #999999 auf Weiß kommt nur auf rund 2,85 : 1 und fällt bei allen drei Stufen durch – zu wenig Kontrast für gut lesbaren Text.

Wofür brauche ich das?

Ausreichender Farbkontrast ist Pflicht für barrierefreie Webseiten und Apps: Die WCAG 2.1 gilt über die EN 301549 und die BITV 2.0 auch für viele deutsche Webangebote, meist ab Stufe AA.

Fließtext und Überschriften auf Buttons oder Karten
Formularfelder, Fehlermeldungen und Placeholder-Texte
Beschriftungen in Diagrammen und Icons mit Text

Auch unabhängig von rechtlichen Vorgaben lohnt sich der Check: Er hilft allen mit eingeschränktem Sehvermögen und macht Inhalte auch bei hellem Umgebungslicht besser lesbar.

Häufige Fragen

Werden meine Eingaben gespeichert?

Nein. Die Berechnung läuft komplett lokal in deinem Browser, es werden keine Farbwerte an einen Server übertragen.

Was bedeuten AA und AAA bei WCAG?

AA ist die in Deutschland und der EU meist verlangte Mindeststufe, AAA die strengere, optionale Stufe für besonders hohe Barrierefreiheit. Für normalen Text braucht AA mindestens 4,5 : 1, AAA mindestens 7 : 1.

Was gilt laut WCAG als „Großtext“?

Als Großtext zählt Schrift ab 18 Punkt (rund 24 px) beziehungsweise ab 14 Punkt (rund 19 px), wenn sie fett ist. Dafür genügt bereits ein Kontrastverhältnis von 3 : 1.

Spielt es eine Rolle, welche Farbe ich als Text und welche als Hintergrund eintrage?

Nein. Das Kontrastverhältnis wird immer aus der helleren und der dunkleren Farbe berechnet – das Ergebnis ist identisch, egal welche Farbe du als Text oder als Hintergrund auswählst.

Welche Farbformate akzeptiert der Prüfer?

Der Farbwähler liefert automatisch gültige sechsstellige Hex-Codes wie #1a2233; auch die dreistellige Kurzschreibweise, etwa #fff, wird korrekt erkannt.