Berechnung des Kontrastverhältnisses nach WCAG 2.1 / 2.2
Das Kontrastverhältnis zwischen Text und Hintergrund entscheidet maßgeblich darüber, wie barrierefrei digitale Inhalte für Menschen mit Sehbehinderungen oder unter schwierigen Lichtverhältnissen lesbar sind. Der Kontrast-Rechner ermittelt dieses Verhältnis präzise auf Basis der mathematischen Formeln der Web Content Accessibility Guidelines (WCAG) in den Versionen 2.1 und 2.2.
Die Skala der Kontrastwerte reicht von 1:1 bis 21:1. Ein Wert von 1:1 bedeutet, dass keinerlei Kontrast vorhanden ist, da Text- und Hintergrundfarbe identisch sind. Der maximale Kontrast von 21:1 wird bei der Kombination von reinem Schwarz auf reinem Weiß erreicht. Um eine verlässliche Einstufung zu gewährleisten, vergleicht das Tool die eingegebenen Farbwerte mit den offiziellen Grenzwerten für die Konformitätsstufen AA und AAA.
Eingabeformate und Bedienung des Werkzeugs
Für die Überprüfung müssen eine Textfarbe und eine Hintergrundfarbe definiert werden. Das Tool unterstützt dabei die gängigen Farbformate, die in der Webentwicklung und im Design verwendet werden:
- Hex-Werte: Zum Beispiel
#1a1a1a. - RGB-Werte: Zum Beispiel
rgb(26, 26, 26). - HSL-Werte: Farbdefinitionen über Farbton, Sättigung und Helligkeit.
Beim Laden des Werkzeugs sind die Standardwerte auf #4f46e5 für die Textfarbe und #ffffff für die Hintergrundfarbe eingestellt, was zu einem Kontrastverhältnis von 6.29 führt. Über eine integrierte Tauschfunktion lassen sich die Werte für Textfarbe und Hintergrundfarbe direkt vertauschen.
Sollte ein eingegebener Farbwert nicht dem erforderlichen Format entsprechen, gibt das Tool eine präzise Fehlermeldung aus. Bei einer fehlerhaften Textfarbe erscheint der Hinweis: „Geben Sie eine gültige Textfarbe ein, z. B. #1a1a1a oder rgb(26, 26, 26).“. Ist die Hintergrundfarbe ungültig, zeigt das System die Meldung: „Geben Sie eine gültige Hintergrundfarbe ein, z. B. #ffffff oder rgb(255, 255, 255).“.
Die Anforderungen für normalen und großen Text
Die WCAG-Richtlinien unterscheiden bei den Kontrastanforderungen strikt zwischen normalem und großem Text, da größere Schriftzeichen auch bei einem geringeren Kontrastverhältnis für das menschliche Auge gut lesbar bleiben.
| Textkategorie | Definition der Textgröße | Mindestkontrast für Stufe AA | Mindestkontrast für Stufe AAA |
|---|---|---|---|
| Normaler Text | Unter 18pt (ca. 24px) bzw. unter 14pt (ca. 18,5px) bei fetter Schrift | 4,5:1 | 7:1 |
| Großer Text | Ab 18pt (ca. 24px) oder ab 14pt (ca. 18,5px) bei fetter Schrift | 3:1 | 4,5:1 |
Das Tool wertet diese Grenzwerte getrennt aus und gibt für beide Kategorien jeweils das Ergebnis „Bestanden“ oder „Nicht bestanden“ für die Stufen AA und AAA aus.
Kontrastanforderungen für UI-Komponenten und Grafiken
Neben dem Fließtext müssen auch visuelle Elemente wie Schaltflächen, Formularrahmen und informationstragende Grafiken ausreichend kontrastieren, damit sie als interaktive Elemente wahrgenommen werden können.
Für den Bereich „UI & Grafiken“ gilt ein einheitlicher Grenzwert von mindestens 3:1. Im Gegensatz zur Textbewertung gibt es in dieser Kategorie keine Unterscheidung zwischen den Stufen AA und AAA. Das Tool zeigt für diesen Bereich ein einziges Gesamtergebnis an, das entweder als „Bestanden“ oder „Nicht bestanden“ ausgewiesen wird.
Interpretation der Testergebnisse und Gesamtbewertung
Das Tool fasst die Ergebnisse in einer abschließenden Gesamtbewertung zusammen, die das höchste erreichte Konformitätsniveau beschreibt. Folgende Statusmeldungen werden ausgegeben:
- „Besteht AA und AAA für normalen Text.“ – Die Farbkombination erfüllt die strengsten Kontrastanforderungen für alle Textgrößen.
- „Besteht AA für normalen Text.“ – Der Kontrast ist ausreichend für die Standard-Konformität bei normalem Text, erreicht jedoch nicht die AAA-Stufe für normalen Text.
- „Besteht AA nur für großen Text.“ – Der Kontrast reicht für großen Text aus, ist jedoch für normalen Text unter dem AA-Minimum von 4,5:1.
- „Unter dem AA-Minimum — erhöhen Sie den Kontrast.“ – Die Farbkombination ist für barrierefreie Texte ungeeignet und muss angepasst werden.
Datenschutz und technische Verarbeitung
Die Überprüfung der Farbwerte erfolgt vollständig lokal. Jede Prüfung läuft direkt in Ihrem Browser. Keine Ihrer Eingaben wird an BroBroGo übertragen. Dies ermöglicht eine schnelle Auswertung ohne Datenübertragung über das Netzwerk.
Häufig gestellte Fragen (FAQ)
Was bedeuten die Ergebnisse für AA und AAA? AA ist die Stufe, die die meisten Websites anstreben: Sie erfordert ein Verhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. AAA ist strenger – 7:1 für normalen Text und 4,5:1 für großen Text. Das Verhältnis reicht von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß).
Was gilt als großer Text? Text ab 18pt (ca. 24px) oder ab 14pt (ca. 18,5px), wenn er fett gedruckt ist. Größerer Text bleibt auch bei geringerem Kontrast lesbar, weshalb er die Anforderungen für AA bereits bei 3:1 und für AAA bei 4,5:1 erfüllt (statt der strengeren Grenzwerte für normalen Text).
Welche Farbformate kann ich eingeben? Geben Sie einen Hex-Wert wie #1a1a1a, einen rgb()-Wert wie rgb(26, 26, 26) oder einen hsl()-Wert ein – oder klicken Sie auf eines der Farbfelder, um eine Farbe auszuwählen. Mit dem Tauschen-Button können Sie Text- und Hintergrundfarbe vertauschen.
Wird hier WCAG 2 oder die neuere APCA-Methode verwendet? Dieses Tool nutzt die Formel nach WCAG 2.1 / 2.2, auf die sich aktuelle Barrierefreiheitsregeln und Audits beziehen. APCA ist eine neuere, stärker wahrnehmungsorientierte Methode, die für die WCAG 3 entworfen wird – vielversprechend, aber noch kein offizieller Standard, weshalb die Testergebnisse hier sie nicht nutzen.