Kontrastprüfer — WCAG-Farbkontrast prüfen
Prüfe das WCAG-2.1-Farbkontrastverhältnis auf AA- und AAA-Konformität. Gib Vordergrund- und Hintergrundfarbe ein und sieh sofort, ob dein Text barrierefrei lesbar ist. Alles läuft vollständig in deinem Browser, ohne Upload.
So verwendest du dieses Werkzeug
- Enter a foreground (text) colour and a background colour as hex values, or pick them with the swatches.
- The tool computes the relative luminance of each colour and divides them to get the contrast ratio.
- Read the ratio and the pass/fail badges for WCAG AA and AAA at normal and large text sizes.
Sample text — Aa Bb Cc
The quick brown fox jumps over the lazy dog
21.00:1
WCAG 2.1 — Large text is 18pt+ or 14pt+ bold. All calculations run in your browser.
Über Farbkontrast-Prüfer
Der Kontrastprüfer ermittelt das Kontrastverhältnis zwischen einer Vordergrund- und einer Hintergrundfarbe und gleicht es mit den Anforderungen der WCAG 2.1 ab, den Web Content Accessibility Guidelines. Ein ausreichender Kontrast ist entscheidend dafür, dass Text für alle gut lesbar ist – auch für Menschen mit Sehschwäche oder bei schlechten Lichtverhältnissen. Du gibst einfach zwei Farben ein, und das Werkzeug berechnet das Verhältnis und zeigt dir, welche Konformitätsstufen erfüllt sind.
Das Kontrastverhältnis wird auf einer Skala von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß) angegeben. Die WCAG legen Schwellen fest: Für normalen Text verlangt Stufe AA mindestens 4,5:1 und Stufe AAA mindestens 7:1; für großen Text gelten mit 3:1 (AA) und 4,5:1 (AAA) niedrigere Anforderungen. Der Prüfer rechnet das Verhältnis aus den relativen Helligkeitswerten der beiden Farben aus und sagt dir auf einen Blick, ob deine Kombination AA, AAA oder keine der Stufen besteht.
Das Werkzeug eignet sich für Webdesign, UI-Arbeit und jedes Projekt, das barrierefrei sein soll oder gesetzlichen Vorgaben zur Zugänglichkeit unterliegt. Indem du Farben anpasst und das Verhältnis beobachtest, findest du Kombinationen, die sowohl gut aussehen als auch lesbar sind. Alles läuft vollständig in deinem Browser, ohne Upload, und deine Farben verlassen dein Gerät nie.
Häufig gestellte Fragen
- Was ist ein Farbkontrastverhältnis?
- Es ist ein Maß für den Helligkeitsunterschied zwischen zwei Farben, angegeben auf einer Skala von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß). Je höher das Verhältnis, desto besser hebt sich Text vom Hintergrund ab.
- Was bedeuten AA und AAA?
- Das sind Konformitätsstufen der WCAG. AA ist der gängige Mindeststandard, AAA ist die strengere, höhere Stufe. Für normalen Text verlangt AA mindestens 4,5:1 und AAA mindestens 7:1.
- Welche Kontrastwerte sind erforderlich?
- Für normalen Text gelten 4,5:1 für AA und 7:1 für AAA. Für großen Text sind die Anforderungen niedriger: 3:1 für AA und 4,5:1 für AAA.
- Was zählt als großer Text?
- Nach WCAG gilt Text als groß, wenn er mindestens 18 Punkt (etwa 24 px) groß ist oder mindestens 14 Punkt (etwa 19 px) bei fetter Schrift. Großer Text darf einen geringeren Kontrast haben, weil er auch so leichter lesbar ist.
- Warum ist Kontrast für Barrierefreiheit wichtig?
- Ausreichender Kontrast sorgt dafür, dass Text auch für Menschen mit Sehschwäche, Farbfehlsichtigkeit oder bei schlechten Lichtverhältnissen lesbar bleibt. Er ist ein zentraler Bestandteil zugänglicher und oft gesetzlich geforderter Webgestaltung.
- Wird etwas hochgeladen oder gesendet?
- Nein. Der Kontrastprüfer läuft vollständig in deinem Browser, ohne Upload, und deine Farben verlassen dein Gerät nie.