WCAG-Kontrast-Prüfer

Geben Sie zwei Farben ein oder wählen Sie sie, und sehen Sie sofort das WCAG-Kontrastverhältnis, mit AA/AAA-Bestehen-Abzeichen für normalen und großen Text.

So funktioniert Kontrast-Prüfer

Dieses Tool berechnet das WCAG-Kontrastverhältnis zwischen zwei Farben und zeigt, ob das Paar die Stufe AA oder AAA für normalen Text, großen Text und nicht-textliche UI-Komponenten erreicht. Alles wird lokal in Ihrem Browser berechnet; die eingegebenen Farben werden nie hochgeladen.

Verfasst von Bastien Sulyan

So wird Kontrast-Prüfer verwendet, Schritt für Schritt

Geben Sie die Vordergrundfarbe (Text) ein oder wählen Sie sie aus.
Geben Sie die Hintergrundfarbe ein oder wählen Sie sie aus.
Lesen Sie das Kontrastverhältnis und die AA-/AAA-Kennzeichnungen für normalen Text, großen Text und nicht-textliche UI-Komponenten ab.
Nutzen Sie Farben tauschen, um das Paar in umgekehrter Richtung zu prüfen.

Häufige Anwendungsfälle

Die Primärfarbe einer Marke gegen Weiß oder Schwarz prüfen, bevor eine Button-Komponente veröffentlicht wird.
Prüfen, ob gedämpfter grauer Fließtext auf einem hellen Kartenhintergrund noch AA erreicht.
Bestätigen, dass eine Linkfarbe in einem Absatz den Schwellenwert von 4,5:1 für normalen Text erreicht.
Prüfen, ob eine große, dünner gesetzte Überschrift noch den gelockerten Schwellenwert von 3:1 für großen Text erreicht.

Häufig gestellte Fragen

Sendet dieses Tool meine Farben an einen Server?

Nein, die Berechnung läuft vollständig in Ihrem Browser mit JavaScript; nichts, was Sie eingeben, wird hochgeladen.

Welches Kontrastverhältnis brauche ich für AA oder AAA?

WCAG 2.x verlangt 4,5:1 für AA bei normalem Text, 7:1 für AAA bei normalem Text, 3:1 für AA bei großem Text und 4,5:1 für AAA bei großem Text.

Was gilt als großer Text?

Mindestens 24px (18pt) in normaler Stärke oder etwa 18,7px (14pt) fett; alles Kleinere verwendet die Schwellenwerte für normalen Text.

Warum ändert das Vertauschen von Vorder- und Hintergrund das Verhältnis nicht?

Die Formel für das Verhältnis ist symmetrisch: Sie vergleicht nur die hellere und die dunklere Leuchtdichte, nicht welche Farbe für den Text verwendet wird. Das Tauschen ist trotzdem nützlich, weil es zeigt, ob das Paar auch mit vertauschten Rollen funktioniert, etwa dunkler Text auf einem hellen Chip gegenüber hellem Text auf einem dunklen Chip.

Garantiert das Bestehen von AA, dass mein Design barrierefrei ist?

Nein. Kontrast ist eines von vielen WCAG-Erfolgskriterien. Die Farbwahl für Menschen mit Farbsehschwäche, die Sichtbarkeit des Fokus, die Textgrößenänderung und die Tastaturnavigation sind eigene Prüfpunkte; der Simulator für Farbenblindheit auf dieser Website deckt einen davon ab.

Ist das ein offizielles Tool des W3C oder von WebAIM?

Nein. Es setzt die öffentliche WCAG-2.x-Kontrastformel unabhängig um und steht in keiner Verbindung zum W3C oder einer anderen Organisation für Barrierefreiheit.