Stimmt etwas mit diesem Tool nicht?

Über „WCAG-Kontrast Prüfen Online“

Dieses Tool misst das Kontrastverhältnis zweier Farben (typischerweise Text und Hintergrund) und zeigt, ob das Paar die WCAG-Richtlinien für Lesbarkeit erfüllt. Pass/Fail wird je AA- und AAA-Stufe sowie für normale und große Schrift ausgewiesen.

WCAG-Konformität wird zunehmend zur Pflicht: Behörden, Bildung, öffentlicher Sektor und viele kommerzielle Sites in Europa und Nordamerika müssen mindestens WCAG 2.1 AA erfüllen. Schwacher Kontrast ist das häufigste Accessibility-Problem.

Beim Auswählen von Textfarben, beim Audit bestehender Designs oder bei der Suche nach AAA-tauglichen Farbvarianten ohne große Designänderungen einsetzen.

So nutzt du dieses Tool

WCAG-Farbkontrast prüfen

  1. Vordergrundfarbe

    «Foreground» ist die Text-/Icon-Farbe als Hex (#RGB oder #RRGGBB). Führendes `#` ist optional, Groß-/Kleinschreibung egal.

  2. Hintergrundfarbe

    «Background» ist die Fläche hinter dem Vordergrund — Seiten-Hintergrund, Button-Füllung etc. Gleiche Hex-Formate. Die Felder erscheinen nebeneinander als Paar.

  3. Ausführen

    Ergebnis: contrastRatio (z. B. 4,56) sowie wcagNormalText und wcagLargeText mit Pass/Fail. Normaler Text braucht ≥ 4,5 (AA) / 7 (AAA); großer Text ≥ 3 (AA) / 4,5 (AAA).

  4. Stufen interpretieren

    AA ist die häufigste gesetzliche / normative Anforderung; AAA strenger und oft für Fließtext unrealistisch. «Large text» bedeutet 18pt+ regular oder 14pt+ bold; darunter als normalen Text bewerten.