Kontrastprüfer

Ein Kontrastprüfer vergleicht zwei Farben, eine Vordergrund- und eine Hintergrundfarbe, und zeigt, ob Text in dieser Kombination lesbar ist. Er berechnet das WCAG-Kontrastverhältnis und prüft es gegen die vier Standardstufen: AA für normalen Text, AA für großen Text, AAA für normalen Text und AAA für großen Text. Wähle Farben über die Farbauswahl oder gib HEX-Codes direkt ein, die Live-Vorschau aktualisiert sich sofort.

Wie wird das Verhältnis berechnet?

Das Tool folgt exakt der WCAG-2-Formel. Die sRGB-Kanäle jeder Farbe werden linearisiert (die Gammakurve, die Monitore anwenden, wird also rückgängig gemacht) und mit den Standardgewichten 21,26 % Rot, 71,52 % Grün und 7,22 % Blau zu einer relativen Leuchtdichte zusammengerechnet. Diese Gewichte spiegeln, wie unterschiedlich empfindlich das menschliche Auge auf die drei Kanäle reagiert. Die hellere der beiden Leuchtdichten wird dann mit der dunkleren verglichen, wobei beiden eine kleine Konstante für Umgebungslicht hinzugerechnet wird. So entsteht ein Verhältnis zwischen 1:1 (identische Farben) und 21:1 (reines Schwarz auf Weiß). Dieses Verhältnis wird gegen vier Schwellenwerte geprüft: 4,5:1 für AA bei normalem Text, 3:1 für AA bei großem Text, 7:1 für AAA bei normalem Text und 4,5:1 für AAA bei großem Text. Akzeptiert werden nur 3- und 6-stellige HEX-Farben, da die Berechnung immer zwei vollständig deckende Farben vergleicht und weder Alphakanal noch andere Notationen braucht.

Werden meine Daten irgendwohin hochgeladen?

Nein. Die gesamte Berechnung läuft mit ein paar Zeilen Mathematik in deinem Browser, es wird nichts an einen Server gesendet. Die geprüften Farben verlassen nie dein Gerät, daher kannst du Markenfarben aus einem internen Designsystem oder der Palette eines Kunden prüfen, ohne sie irgendwohin zu schicken.

Was gilt bei WCAG als großer Text?

Die WCAG definiert großen Text als 18pt (24px) in normaler Stärke oder 14pt (18,66px) und mehr in Fettschrift. Deshalb gilt für ihn eine lockerere Schwelle als für Fließtext: Größere, kräftigere Striche bleiben auch bei geringerem Kontrast noch lesbar. Nützlich, um vor der Veröffentlichung zu prüfen, ob Fließtext die Stufe AA erfüllt, ob die Beschriftung eines Buttons vor ihrem Hintergrund gut lesbar ist, oder um die Farbpalette einer bestehenden Website auf Barrierefreiheit zu prüfen. Die genaue Formel und die Begründung der Schwellenwerte findest du in der Understanding Contrast Minimum-Anleitung des W3C, eine verständliche Erklärung im WebAIM-Artikel zu Kontrast.