Farbkontrast-Prüfer
Farbkombinationen auf WCAG-Zugänglichkeitskonformität testen
Vordergrundfarbe
Hintergrundfarbe
Vorschau
Großer Text (Beispiel)
Normaler Text (Beispiel). Der schnelle braune Fuchs springt über den faulen Hund.
Ergebnisse
Anleitung
- Farben wählen: Geben Sie HEX-Werte ein oder nutzen Sie die Auswähler für Text- und Hintergrundfarbe.
- Verhältnis ablesen: Das Tool berechnet sofort das Kontrastverhältnis von 1:1 bis 21:1.
- Konformität prüfen: Sehen Sie, ob das Paar AA und AAA für normalen und großen Text erfüllt.
- Anpassen und neu versuchen: Ändern Sie eine Farbe, bis das Verhältnis Ihr Ziel erreicht.
Funktionen
- Akzeptiert HEX-Farben in 3- oder 6-stelliger Form, mit oder ohne #
- Berechnet das exakte WCAG-2.1-Kontrastverhältnis
- AA- und-AAA-Bewertungen für normalen und großen Text
- Live-Vorschau der Farbkombination
- Läuft vollständig in Ihrem Browser
Warum Kontrast wichtig ist
Etwa einer von zwölf Männern und eine von zweihundert Frauen haben eine Form von Farbschwäche, und weit mehr Menschen lesen Bildschirme bei hellem Sonnenlicht oder mit alternden Augen. Text mit geringem Kontrast — das klassische helle Grau auf Weiß — ist für alle schwierig und für viele unlesbar. Kontrast ist kein Randfall, sondern die Grundlage der Lesbarkeit.
Die WCAG-Formel ist bewusst wahrnehmungsbasiert. Sie wandelt die sRGB-Werte jeder Farbe in eine relative Leuchtdichte um, mithilfe derselben nichtlinearen Antwortkurve wie das menschliche Sehvermögen, und vergleicht dann die beiden Leuchtdichten. Darum können Verhältnisse überraschen: Weiß auf Schwarz erreicht das Maximum von 21:1, während zwei Farben, die unterschiedlich wirken, wie #777777 auf #999999, bei etwa 2:1 deutlich durchfallen.
Anwendungsfälle
- UI-Designer: Prüfen Sie Text- und Buttonfarben vor Markenhintergründen.
- Frontend-Entwickler: Erwischen Sie schwache Kombinationen vor dem Accessibility-Audit.
- Content-Teams: Prüfen Sie Link- und Caption-Farben in CMS-Designs.
- Accessibility-Tester: Dokumentieren Sie exakte Verhältnisse in WCAG-Berichten.
Verwandte Tools
Häufig gestellte Fragen
Was ist WCAG-Farbkontrast?
Die WCAG (Web Content Accessibility Guidelines) definiert Mindestkontrastverhältnisse zwischen Text- und Hintergrundfarben, um die Lesbarkeit für Menschen mit Sehbehinderungen zu gewährleisten. Das Kontrastverhältnis reicht von 1:1 (kein Kontrast) bis 21:1 (maximaler Kontrast, Schwarz auf Weiß).
Welches Kontrastverhältnis benötige ich für die AA-Konformität?
Normaler Text (<18pt) benötigt mindestens 4,5:1. Großer Text (18pt+ oder 14pt+ fett) benötigt mindestens 3:1. Für die AAA-Konformität steigen diese Werte auf 7:1 bzw. 4,5:1.
Wie wird das Kontrastverhältnis berechnet?
Gemäß WCAG 2.1: (L1 + 0.05) / (L2 + 0.05), wobei L1 die relative Leuchtdichte der helleren Farbe und L2 die der dunkleren Farbe ist. Die relative Leuchtdichte verwendet eine Linearisierungsformel aus sRGB-Werten.