Real-time WCAG contrast ratio calculator with AA/AAA accessibility compliance checking. Make your designs accessible to everyone.
1. Relative Luminance L = 0.2126*R + 0.7152*G + 0.0722*B
2. Channel value: If RsRGB ≤ 0.03928, R = RsRGB/12.92, otherwise R = ((RsRGB+0.055)/1.055)^2.4
3. Kontrastverhaeltnis = (L_lighter + 0.05) / (L_darker + 0.05)
WCAG (Web Content Accessibility Guidelines) ist ein internationaler Standard, der vom W3C entwickelt wurde und Mindestanforderungen an das Kontrastverhaeltnis zwischen Vordergrund- und Hintergrundfarben definiert. Das Kontrastverhaeltnis reicht von 1:1 (kein Kontrast) bis 21:1 (maximaler Kontrast zwischen Schwarz und Weiss). Hoehere Verhaeltnisse bedeuten bessere Lesbarkeit. Guter Farbkontrast hilft nicht nur sehgeschaedigten und farbenblinden Benutzern beim Lesen, sondern verbessert auch die Leseerfahrung fuer alle in hellen Lichtverhaeltnissen.
| Stufe | Texttyp | Mindestkontrast |
|---|---|---|
| AA | Normaler Text (<18pt oder <14pt fett) | 4.5 : 1 |
| AA | Grosser Text (≥18pt oder ≥14pt fett) | 3 : 1 |
| AAA | Normaler Text | 7 : 1 |
| AAA | Grosser Text | 4.5 : 1 |
| AA | UI-Komponenten und Grafiken (Icons, Rahmen usw.) | 3 : 1 |
Der WCAG-Farbkontrast bezieht sich auf das Leuchtdichteunterschiedsverhaeltnis zwischen Vordergrund- (Text) und Hintergrundfarben, das von 1:1 bis 21:1 reicht. Es ist eine Kernmetrik, die in den W3C Web Content Accessibility Guidelines definiert ist, um die Textlesbarkeit zu messen. Hoehere Verhaeltnisse bedeuten, dass Text leichter zu unterscheiden ist, was fuer sehbehinderte und farbenblinde Benutzer freundlicher ist.
AA ist die grundlegende WCAG-Konformitaetsstufe, die einen Kontrast von mindestens 4,5:1 fuer normalen Text und mindestens 3:1 fuer grossen Text verlangt. Es ist der Mindeststandard, den die meisten Websites erreichen sollten. AAA ist eine strengere, erweiterte Stufe, die mindestens 7:1 fuer normalen Text und mindestens 4,5:1 fuer grossen Text verlangt, geeignet fuer Szenarien mit hohen Barrierefreiheitsanforderungen (wie Regierungs- und Gesundheitswebsites). AA ist das empfohlene Basisziel; AAA ist keine universelle Anforderung fuer alle Inhalte.
WCAG definiert grossen Text als: normaler Text mit einer Schriftgroesse von mindestens 18pt (ca. 24px) oder fetter Text mit mindestens 14pt (ca. 18,5px). Da grosser Text mehr Flaeche und dickere Striche hat, ist die Kontrastanforderung relativ niedriger, sodass der AA-Standard nur 3:1 statt 4,5:1 verlangt.
Der Wert 4,5:1 basiert auf Forschung mit Personen mit einer Sehschaerfe von etwa 20/40 (ca. 0,5 Sehkraft). Studien zeigen, dass bei einem Kontrast von 4,5:1 Benutzer mit 20/40-Sehkraft oder besser Textinhalte allgemein normal lesen koennen. Dieser Standard balanced Barrierefreiheitsbeduerfnisse mit Designflexibilitaet und ist der Best-Practice-Wert, der vom W3C nach umfassender wissenschaftlicher Validierung festgelegt wurde.
Der direkteste Ansatz ist die Anpassung der Farbleuchtdichte: Wenn der Text zu hell ist, verdunkeln Sie ihn (niedrigere RGB-Werte); wenn der Hintergrund zu dunkel ist, hellen Sie ihn auf (hoehere RGB-Werte). Dieses Werkzeug empfiehlt automatisch AA-konforme Ersatzfarben bei Nichtkonformitaet – einfach Klicken zum Anwenden. Alternativ koennen Sie Schwarz-Weiss-Kombinationen (21:1 maximaler Kontrast) als sichere Option versuchen oder die Funktion "Zufaellige Farben" verwenden, um konforme Kombinationen zu erkunden.