Kontrastprüfung
Prüfe das WCAG-Kontrastverhältnis von Farbpaaren, mit AA- und AAA-Urteil und Korrekturvorschlag.
Verwandte Tools
Kontrastprüfung
Füge Paare aus Text- und Hintergrundfarbe ein, eines pro Zeile — #7a1f2b on #ffffff, #333, #eee oder rgb(0, 0, 0) #fff — und für jedes Paar steht sofort das Kontrastverhältnis nach WCAG 2 da, samt bestanden oder nicht bestanden für jede Konformitätsstufe. Das Verhältnis reicht von 1 : 1 (kein Kontrast) bis 21 : 1 (Schwarz auf Weiß) und wird aus der relativen Leuchtdichte genau so berechnet, wie es die Richtlinien definieren — die Zahlen decken sich also mit Audit-Tools und dem Browser-Inspektor.
WCAG kennt zwei Stufen. AA, auf die sich die meisten Vorschriften und Verträge beziehen, verlangt 4,5 : 1 für normalen Text und 3 : 1 für großen Text. Das strengere AAA fordert 7 : 1 und 4,5 : 1. Als groß gilt Text ab 18 pt (etwa 24 px) in normaler Stärke oder ab 14 pt (etwa 18,7 px) fett — deshalb kann eine Überschrift mit einem Verhältnis bestehen, an dem ein Absatz scheitert. Der Bericht führt alle vier Prüfungen je Paar auf; die kompakte Ausgabe liefert eine Zeile pro Paar und liest sich schneller, wenn du eine ganze Palette durchgehst.
Verfehlt ein Paar AA für normalen Text, schalte „Korrektur vorschlagen“ ein: Das Tool dunkelt die Textfarbe in kleinen Helligkeitsschritten ab oder hellt sie auf — der Farbton bleibt —, bis 4,5 : 1 erreicht ist, und schreibt den nächstgelegenen bestehenden Hex-Wert dazu.
Alles läuft in deinem Browser; unveröffentlichte Markenpaletten verlassen dein Gerät nie. Farben schreibst du als Hex mit 3 oder 6 Stellen, mit oder ohne Raute, als rgb() oder rgba(), oder mit einem gängigen CSS-Namen — die 16 Grundfarben plus die verbreiteten erweiterten. Die volle Liste von 148 Namen trägt das Tool bewusst nicht; exotische Namen schreibst du als Hex. Eine Zeile, die kein Farbpaar ist, wird ruhig vermerkt, der Rest läuft weiter durch.