Gib eine Vordergrund- und Hintergrundfarbe an, um das WCAG-Kontrastverhältnis mit AA- und AAA-Pass/Fail-Badges für normalen und großen Text zu prüfen.

Foreground

Background

21.00:1

AA Normal text

AA Large text

AAA Normal text

AAA Large text

Preview

The quick brown fox jumps over the lazy dog.

So funktioniert es

Wähle eine Vordergrund- und Hintergrundfarbe über die Farbwähler oder gib Hex-Werte direkt ein. Das Tool berechnet die relative Luminanz jeder Farbe mit der WCAG-2.1-Formel — eine gewichtete Summe der sRGB-Kanäle nach Gamma-Dekodierung — und dividiert die hellere Luminanz durch die dunklere (plus 0,05 in Zähler und Nenner, um Division durch null bei reinem Schwarz zu vermeiden). Das resultierende Kontrastverhältnis reicht von 1:1 (identische Farben) bis 21:1 (reines Schwarz auf reinem Weiß). Vier WCAG-Badges zeigen Pass oder Fail: AA für normalen Text (≥ 4,5:1), AA für großen Text (≥ 3:1), AAA für normalen Text (≥ 7:1) und AAA für großen Text (≥ 4,5:1). Ein Live-Vorschau-Panel zeigt Beispielsätze in normalem und großem Text zur visuellen Überprüfung. Die Berechnung erfolgt vollständig im Browser ohne Serveranfragen und jede Farbänderung aktualisiert Verhältnis und Vorschau sofort.

Anwendungsfälle

Eine Markenfarbpalette vor einem Website-Redesign auf Barrierefreiheit prüfen

Button- und Link-Farben wählen, die auf hellem oder dunklem Theme lesbar bleiben

WCAG 2.1 AA- oder AAA-Anforderungen für Section 508, EN 301 549 oder ADA-Konformität erfüllen

Ein Design-Mockup prüfen, um unlesbaren Text vor Entwicklungsbeginn zu markieren

Barrierefreiheit lehren, indem gezeigt wird, wie kleine Luminanzunterschiede große Kontrastprobleme verursachen