Direkte Antwort
Der WCAG-Farbkontrast-Prüfer ermittelt das Kontrastverhältnis zweier Farben anhand ihrer relativen Leuchtdichte nach den Vorgaben der Web Content Accessibility Guidelines (WCAG 2.2) und prüft die Konformitätsstufen AA und AAA.
So verwenden Sie dieses Tool
Vorder- und Hintergrundfarbe eingeben
Geben Sie HEX-, RGB- oder HSL-Werte für Text und Hintergrund ein oder nutzen Sie den Farbwähler.
Kontrastverhältnis prüfen
Lesen Sie das exakte Kontrastverhältnis (z. B. 4,5:1) und die Bestehenskriterien für normalen Text, großen Text und UI-Komponenten ab.
Automatische Farbkorrektur nutzen
Wählen Sie das Kontrastziel passend zu normalem Text, großem Text oder UI-Komponenten und legen Sie fest, ob die Vorder- oder Hintergrundfarbe unverändert bleibt. Prüfen Sie den Vorschlag zur Anpassung der anderen Farbe und übernehmen Sie ihn bei Bedarf. Nicht jedes Kontrastziel lässt sich mit der gewählten festen Farbe erreichen.
Formel für das Kontrastverhältnis nach WCAG 2.2
L1 ist die relative Helligkeit der helleren und L2 die der dunkleren Farbe im sRGB-Farbraum. Die Werte reichen von 1:1 (kein Kontrast) bis 21:1 (maximaler Schwarz-Weiß-Kontrast). Stufe AA verlangt 4,5:1 für Fließtext, Stufe AAA fordert 7:1.
- Stufe AA für Fließtext: Mindestens 4,5:1; für großen Text (ab 18pt oder 14pt fett) mindestens 3:1.
- Stufe AAA: Höchste Zugänglichkeitsstufe mit mindestens 7:1 für Standardtext und 4,5:1 für großen Text.
- Grafische UI-Elemente und Bedienelemente benötigen mindestens 3:1 nach WCAG 2.2 Kriterium 1.4.11.
Praktische Beispiele
Grauer Text auf weißem Hintergrund
Eingabe: Textfarbe: #767676, Hintergrund: #FFFFFF
Ausgabe: Kontrastverhältnis: 4,54:1 (Besteht Stufe AA für normalen Text, verfehlt Stufe AAA)
Dieser Grauton erfüllt knapp die WCAG-2.2-Kontrastanforderung der Stufe AA für normalen Text. Daraus folgt keine vollständige WCAG-Konformität der Seite.
Einschränkungen
- Der Rechner prüft einfarbige Flächen; Farbverläufe oder semitransparente Hintergründe erfordern separate Messungen an den ungünstigsten Stellen.
- Reale Lichtverhältnisse oder matte Bildschirmfilter können die wahrgenommene Lesbarkeit bei Nutzern zusätzlich beeinflussen.
Häufige Fragen
Warum verlangt die Barrierefreiheit nach WCAG 2.2 feste Kontrastverhältnisse?
Ausreichender Kontrast stellt sicher, dass Menschen mit Sehbeeinträchtigungen, Farbfehlsichtigkeiten oder bei starkem Sonnenlicht Texte und Schaltflächen mühelos erfassen können.
Wie funktioniert der intelligente Kontrastkorrektur-Vorschlag?
Der Algorithmus hält die gewählte Vorder- oder Hintergrundfarbe fest und sucht durch Aufhellen oder Abdunkeln der anderen Farbe nach einem Vorschlag, der mindestens das gewählte Kontrastverhältnis erreicht. Ist das Ziel mit der festen Farbe nicht erreichbar, zeigt das Werkzeug einen entsprechenden Hinweis. Ein Vorschlag erfüllt nur das gewählte Kontrastziel und garantiert keine vollständige WCAG-Konformität.
Maßgebliche Referenzen & Standards
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Offizieller internationaler Standard für Kontrastverhältnisse, Stufe AA und AAA.
- W3C Definition und Formel der relativen Leuchtdichte ↗ — Mathematische Definition der relativen Helligkeit im sRGB-Farbraum.