Farb-Kontrast-Prüfer

Überprüft das Farbkontrastverhältnis gemäß WCAG 2.1 Barrierefreiheitsrichtlinien. Sofortige AA/AAA-Ergebnisse.

Vordergrundfarbe

Hintergrundfarbe

Großtext-Vorschau (18pt fett)

Normaltext-Vorschau — The quick brown fox jumps over the lazy dog.

14.05:1Kontrastverhältnis

AA — Normaltext (≥ 4,5:1)Bestanden

AA — Großtext (≥ 3:1)Bestanden

AAA — Normaltext (≥ 7:1)Bestanden

AAA — Großtext (≥ 4,5:1)Bestanden

Über dieses Tool

Der Farbkontrast-Prüfer berechnet das Kontrastverhältnis zwischen einer Vordergrund- und Hintergrundfarbe mit der WCAG 2.1 relativen Luminanzformel.

WCAG 2.1 definiert zwei Konformitätsstufen: AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text. AAA 7:1 bzw. 4,5:1.

Anleitung

Wählen Sie Vordergrund- und Hintergrundfarbe mit den Farbwählern oder geben Sie Hex-Codes ein.
Die Vorschau zeigt, wie Text bei normaler und großer Schriftgröße aussieht.
Kontrastverhältnis und WCAG-Ergebnisse aktualisieren sich sofort.
Verwenden Sie die Beispielpaare, um gängige Barrierefreiheitsmuster zu erkunden.

Anwendungsfälle

UI-Designer prüfen, ob Schaltflächenbeschriftungen und Text WCAG-Standards erfüllen. Frontend-Entwickler prüfen Text-Hintergrund-Kombinationen in Designsystemen.

Häufige Fragen

Was gilt als "großer Text"? — WCAG definiert großen Text als mindestens 18pt (24px) normal oder 14pt (~18.67px) fett.
Unterstützt es Transparenz oder rgba? — Nein, dieses Tool funktioniert nur mit einfarbigen Hex-Farben.
Welche WCAG-Stufe sollte ich anstreben? — AA ist der empfohlene Mindestwert für die meisten öffentlichen Websites. AAA bietet bessere Lesbarkeit.
Ist 4,5:1 immer ausreichend? — 4,5:1 erfüllt WCAG AA, aber Nutzer mit schwereren Sehbeeinträchtigungen können von höheren Verhältnissen profitieren.