Farbkontrast-Prüfer (WCAG)

Prüfen Sie, ob eine Vordergrund-/Hintergrundfarbkombination die WCAG-AA- und AAA-Barrierefreiheitsstandards erfüllt. Unverzichtbar für barrierefreies Webdesign.

Studio · neutrale Umgebung
Kontrastverhältnis
: 1

AA · Fließtext ≥ 4.5
AA · großer Text ≥ 3.0
AAA · Fließtext ≥ 7.0
AAA · großer Text ≥ 4.5
Ein-Klick-Korrektur · Farbton bleibt

Funktionen

Kontrastverhältnis anzeigen
WCAG-AA/AAA-Status
Live-Textvorschau
Normaler und großer Text

Anleitung

1. Text- und Hintergrundfarbe festlegen — Muster und WCAG-Urteil aktualisieren sich live.

2. Zwischen den Mustern (Schrift / Artikel / Oberfläche) wechseln, um das Farbpaar im realistischen Einsatz zu beurteilen; S tauscht die beiden Farben.

3. Scheitert eine Stufe, hilft die Ein-Klick-Korrektur — sie ändert nur die Helligkeit und erhält den Farbton — oder den WCAG-Bericht kopieren.

Über dieses Werkzeug

Text, dessen Helligkeit der des Hintergrunds zu ähnlich ist, ist für alle schwer und für manche Menschen gar nicht lesbar. Die Web Content Accessibility Guidelines (WCAG) messen das mit einem Kontrastverhältnis von 1:1 bis 21:1, das auf der relativen Leuchtdichte beider Farben beruht. Stufe AA verlangt mindestens 4,5:1 für Fließtext und 3:1 für großen Text (24 px oder etwa 18,66 px fett); Stufe AAA erhöht das auf 7:1 bzw. 4,5:1. Dieser Prüfer berechnet das Verhältnis live, zeigt für alle vier Schwellen „bestanden“ oder „nicht bestanden“ und stellt ein echtes Schriftmuster, einen Artikel und eine Oberfläche dar, damit Sie die Kombination im Zusammenhang beurteilen können. Fällt eine Stufe durch, schlägt er die nächstgelegene Textfarbe vor, die besteht – nur durch Änderung der Helligkeit.

Häufig gestellte Fragen

Wie wird das Kontrastverhältnis berechnet?
Jede Farbe wird mit der sRGB-Formel aus WCAG 2 in relative Leuchtdichte umgerechnet; das Verhältnis ist dann (L1 + 0,05) ÷ (L2 + 0,05), wobei L1 die hellere Farbe ist. Schwarz auf Weiß ergibt das Maximum von 21:1, identische Farben ergeben 1:1.
Was gilt als großer Text?
WCAG definiert großen Text als mindestens 18 Punkt (24 CSS-Pixel) in normaler Stärke oder 14 Punkt (etwa 18,66 CSS-Pixel) fett. Großer Text benötigt für AA nur 3:1 und für AAA 4,5:1, weil größere Buchstaben leichter zu lesen sind.
Heißt „AA bestanden“, dass mein Design barrierefrei ist?
Kontrast ist eine Anforderung unter vielen. Dünne Schriften, Text auf Fotos, kleine Schriftgrößen und Farbe als einziges Unterscheidungsmerkmal können trotzdem Probleme verursachen – testen Sie also echte Bildschirme und kombinieren Sie die Kontrastprüfung mit weiteren Barrierefreiheitsprüfungen.
Wie funktioniert der Korrekturvorschlag?
Er behält den Farbton Ihrer Textfarbe bei und sucht hellere oder dunklere Varianten, bis das Zielverhältnis erreicht ist. Lässt es sich mit keinem Helligkeitswert vor Ihrem Hintergrund erreichen, weist das Werkzeug darauf hin, und Sie müssen stattdessen den Hintergrund ändern.
Gelten Kontrastregeln auch für Icons und Buttons?
Ja. WCAG 2.1 verlangt mindestens 3:1 für bedeutungstragende Nicht-Text-Elemente wie Icons, Rahmen von Eingabefeldern und Fokusindikatoren. Rein dekorative Grafiken und deaktivierte Bedienelemente sind ausgenommen.

Verwandte Werkzeuge