Was ist WCAG-Kontrastprüfer?

Ein WCAG-Farbkontrast-Checker, der das Kontrastverhältnis zwischen Vordergrund- und Hintergrundfarben berechnet und prüft, ob die Kombination den WCAG-2.1-Level-AA- und AAA-Anforderungen für normalen und grossen Text entspricht.

Der Checker berechnet das relative Luminanzverhältnis nach WCAG 2.1 für zwei Farben – eingegeben als hex, rgb(), hsl() oder CSS-Name – und bewertet es gegen AA (4,5:1 für Fließtext, 3:1 für großen Text) und AAA (7:1 und 4,5:1). Zusätzlich prüft er die 3:1-Untergrenze für UI-Komponenten wie Formularrahmen oder Icons. Schlägt eine Kombination durch, schiebt die Vorschlagsliste den Vordergrund auf einen passenden Wert und bietet AA- und AAA-Ziele an.

Anleitung

1. Geben Sie eine Vordergrundfarbe (Text) und eine Hintergrundfarbe ein – fügen Sie hex, rgb(), hsl() oder einen CSS-Farbnamen ein oder nutzen Sie die Farbwähler.
2. Sehen Sie das Kontrastverhältnis und die Bestanden/Nicht-bestanden-Ergebnisse für WCAG-AA- und AAA-Konformitaet für normalen Text, grossen Text und UI-Komponenten.
3. Falls der Kontrast nicht ausreicht, nutzen Sie die vorgeschlagenen Farbanpassungen, um die nächstgelegene barrierefreie Farbkombination zu finden.

Wann verwenden

• Markenfarben gegen weißen oder dunklen Hintergrund prüfen, bevor eine Landingpage live geht.
• Barrierefreie Button-Zustände für Default, Hover und Disabled festlegen.
• Platzhalter und deaktivierte Felder kontrollieren — die rutschen oft unter 4,5:1.

Ergebnis

Ein UI-Designer prüft sein Markenblau #3B82F6 auf weißem Hintergrund #FFFFFF, das 4,5:1-Verhältnis besteht AA für grossen Text, scheitert aber an AAA für normalen Text. Er dunkelt auf #2563EB (5,3:1) ab, um beide Standards zu erfüllen.

Häufige Fragen

Welches Verhältnis braucht Fließtext für WCAG AA?

4,5:1 gegenüber dem Hintergrund. Großer Text (ab 18pt regular oder 14pt bold) sinkt auf 3:1. AAA hebt das auf 7:1 bzw. 4,5:1. UI-Komponenten wie Eingabefeld-Rahmen brauchen nur 3:1.

Warum scheitert mein dunkles Grau auf Weiß, obwohl es für mich gut aussieht?

Subjektives Lesegefühl und Messwerte trennen sich schnell. 4:1 wirkt auf einem kalibrierten Schirm bei gutem Licht scharf, scheitert aber bei Sehbehinderung, Blendung oder älteren Monitoren. WCAG legt die Latte am schlechtesten Fall an, nicht am besten.

Brauchen Icons und Formularrahmen denselben Kontrast wie Text?

Nein. WCAG 2.1 hat eine 3:1-Regel für nichttextliche Komponenten ergänzt: Rahmen, Icons, Fokus-Indikatoren, Diagrammteile. Rein dekorative Grafiken sind ausgenommen, alles Informationstragende muss aber 3:1 gegen angrenzende Farben erreichen.

Wie repariere ich eine durchgefallene Kombination, ohne die Marke anzufassen?

Wenn die Markenfarbe gesetzt ist, justieren Sie den Hintergrund. Ihn abdunkeln oder aufhellen, bis das Verhältnis passt. Die Vorschlagsliste hier schiebt den Vordergrund in kleinen Schritten; dasselbe Vorgehen lässt sich auch auf den Hintergrund anwenden.

Gibt es WCAG-Regeln für transparenten Text oder Text auf Fotos?

WCAG verlangt die Bewertung des schlechtesten Pixels unter dem Text. Bei Text auf Fotos heißt das meist, einen getönten Schleier oder eine volle Fläche dahinterzulegen. Messen Sie die tatsächlich gerenderte Farbe, nicht nur den Ausgangs-Hex.

Ähnliche Tools