Kontrast prüfen (WCAG)

So prüfen Sie den Farbkontrast

1. Geben Sie die Textfarbe und die Hintergrundfarbe ein. Nutzen Sie die Farbfelder oder tippen Sie einen beliebigen CSS-Wert ein: einen HEX-Code wie #595959, rgb(89 89 89), hsl(0 0% 35%) oder einen Farbnamen wie navy.
2. Das Kontrastverhältnis aktualisiert sich bei jeder Eingabe, von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß).
3. Die Tabelle Ergebnisse nach WCAG 2.2 zeigt Bestanden oder Nicht bestanden für Normaler Text, Großer Text und UI-Komponenten und Grafiken, jeweils für die Stufen AA und AAA.
4. Kontrollieren Sie die Vorschau: Sie zeigt normalen Text, großen Text, großen fetten Text, den Rahmen einer Schaltfläche und ein Symbol in Ihren beiden Farben.
5. Fällt eine Stufe durch, wählen Sie unter Vorschläge ein Ziel. Das Tool schlägt die Nächstgelegene Textfarbe, die besteht und die Nächstgelegene Hintergrundfarbe, die besteht vor. Mit Übernehmen setzen Sie einen Vorschlag ein. Farben tauschen vertauscht Text und Hintergrund.

Alles wird in Ihrem Browser berechnet, es werden keine Daten übertragen.

So wird das Kontrastverhältnis berechnet

WCAG 2.x definiert das Verhältnis als (L1 + 0,05) / (L2 + 0,05). Dabei ist L1 die relative Leuchtdichte der helleren und L2 die der dunkleren Farbe. Die relative Leuchtdichte ergibt sich aus linearisierten sRGB-Kanälen: Jeder Kanal wird mit der sRGB-Übertragungskurve dekodiert, dann gilt L = 0,2126 R + 0,7152 G + 0,0722 B. Grün hat das größte Gewicht, weil unser Auge dafür am empfindlichsten ist. Deshalb wirkt reines Grün viel heller als reines Blau gleicher „Stärke“.

Das Verhältnis wird nie aufgerundet. #777777 auf Weiß ergibt etwa 4,48:1 und besteht AA für normalen Text nicht, auch wenn es nach „4,5“ aussieht. Dieses Tool schneidet den angezeigten Wert nach zwei Nachkommastellen ab, damit Sie genau das sehen, was WCAG prüft.

Ist die Textfarbe halbtransparent (z. B. rgb(0 0 0 / 60%)), wird sie zuerst so mit dem Hintergrund verrechnet, wie der Browser sie darstellen würde. Transparenz in der Hintergrundfarbe wird ignoriert, weil unbekannt ist, was hinter der Seite liegt.

Die WCAG-Stufen im Überblick

„Großer Text“ bedeutet mindestens 18 pt (24 CSS-Pixel) oder 14 pt fett (etwa 18,66 px). Logos und rein dekorativer Text unterliegen keiner Anforderung. Die 3:1-Regel für Bedienelemente (Erfolgskriterium 1.4.11) gilt für Rahmen von Eingabefeldern und Schaltflächen, Fokusanzeigen, Symbole und Diagrammlinien, die Nutzer erkennen müssen.

So funktionieren die Vorschläge

Die vorgeschlagenen Farben behalten Farbton und Chroma Ihrer Farbe im OKLCH-Farbraum bei und ändern nur die Helligkeit, dunkler oder heller, bis das Zielverhältnis erreicht ist. Anschließend wählt das Tool die Richtung, die Ihrer Ausgangsfarbe optisch am nächsten liegt, gemessen in OKLab. Das Ergebnis wird nach dem Runden auf einen HEX-Code erneut geprüft, damit es wirklich besteht. Lässt sich das Ziel mit keiner Helligkeit erreichen (etwa 7:1 gegen ein mittleres Grau), weist das Tool darauf hin.

Und APCA?

APCA (Accessible Perceptual Contrast Algorithm) ist ein neueres Kontrastmodell, das für ein künftiges WCAG 3 diskutiert wird. Es berücksichtigt Schriftstärke, Schriftgröße und Polarität (dunkel auf hell oder hell auf dunkel). APCA ist noch ein Entwurf und weder rechtlich noch normativ verbindlich. Dieses Tool liefert deshalb die Ergebnisse nach WCAG 2.x, die weiterhin die Referenz für die europäische Norm EN 301 549, Section 508 und die meisten Gesetze sind – in Deutschland etwa für BITV 2.0 und das Barrierefreiheitsstärkungsgesetz.