WCAG-Barrierefreiheit-Kontrastverhältnis zwischen Vorder- und Hintergrundfarben prüfen
Ein Kontrastprüfer misst das Kontrastverhältnis zwischen einer Vordergrund- und einer Hintergrundfarbe und sagt Ihnen, ob es die WCAG-Barrierefreiheitsstandards für lesbaren Text erfüllt. Das Kontrastverhältnis ist eine Zahl von 1:1 (identische Farben, unsichtbar) bis 21:1 (Schwarz auf Weiß), und je höher es ist, desto leichter ist Text zu lesen — besonders für Menschen mit Sehschwäche, Farbfehlsichtigkeit oder bei hellem Sonnenlicht am Bildschirm. Sie geben zwei Farben ein und erhalten das genaue Verhältnis plus ein klares Bestehen oder Durchfallen gegen die anerkannten Schwellen.
Das zählt, weil Hellgrau auf Weiß und andere kontrastarme Kombinationen im Design elegant aussehen, aber für einen großen Anteil der Nutzer wirklich schwer lesbar sind, und Kontrast ist eine der häufigsten und am leichtesten prüfbaren Barrierefreiheitsmängel. Die WCAG-Richtlinien setzen konkrete Minima — 4,5:1 für normalen Text und 3:1 für großen Text auf AA-Niveau — ein Prüfer macht also aus „ist das lesbar?" eine überprüfbare Antwort statt einer Vermutung. Dieses Tool berechnet das Verhältnis im Browser, während Sie die Farben anpassen.
Unter WCAG AA braucht normaler Text mindestens 4,5:1 und großer Text (etwa 18pt oder 14pt fett) 3:1. Das strengere AAA-Niveau verlangt 7:1 bzw. 4,5:1. Der Prüfer zeigt Ihr Verhältnis gegen diese Schwellen, sodass Sie genau wissen, welches es besteht.
Kontrastarmer Text ist für Menschen mit reduziertem Sehvermögen, Farbsehschwächen oder bei schlechtem Licht schwer oder unmöglich zu lesen. Ausreichender Kontrast ist eine der wirkungsvollsten und am leichtesten messbaren Barrierefreiheitsanforderungen, weshalb WCAG explizite Minima setzt.
Ja. Größerer und fetterer Text ist bei geringerem Kontrast lesbarer, der Standard lockert die Anforderung dafür — 3:1 bei AA statt 4,5:1. Der Prüfer berücksichtigt diese Unterscheidung, sodass große Überschriften an der korrekten Schwelle gemessen werden.
Das Maximum ist 21:1, reines Schwarz auf reinem Weiß. Das Minimum ist 1:1, zwei identische Farben ganz ohne Kontrast. Jedes echte Farbpaar liegt irgendwo dazwischen, und das Ziel ist, die Schwelle für Ihre Textgröße zu überschreiten.
Farbpaletten-Generator · CSS-Verlauf-Generator · Farbmischer · Farbnamen-Finder