Prüft, ob sich zwei Farben —die des Texts und die des Hintergrunds— genug unterscheiden, damit jeder sie lesen kann, auch Menschen mit Sehbehinderung oder Farbenblindheit. Es berechnet das Kontrastverhältnis zwischen beiden und vergleicht es mit den offiziellen WCAG-2.1-Schwellenwerten für Barrierefreiheit. Das Verhältnis reicht von 1:1 (zwei identische Farben, unleserlich) bis 21:1 (reines Schwarz auf reinem Weiß). Die gesamte Berechnung läuft in deinem Browser ab: Nichts wird auf einen Server hochgeladen.
1. Klicke auf den Auswähler für Textfarbe und wähle die Farbe der Schrift.
2. Klicke auf den für Hintergrundfarbe und wähle den Hintergrund, auf dem sie liegen wird.
3. Die Vorschau zeigt ein echtes Beispiel mit diesen beiden Farben, und darunter erscheinen das Verhältnis und die vier PASS/FAIL-Abzeichen.
4. Alles wird sofort neu berechnet, während du die Auswähler bewegst; neben jedem siehst du den gewählten Wert #rrggbb.
Das Kontrastverhältnis misst, wie groß der Helligkeitsunterschied zwischen den beiden Farben ist. Es wird in zwei Schritten berechnet:
• Relative Leuchtdichte — für jede Farbe wird die vom Auge wahrgenommene Helligkeit mit der WCAG-Formel berechnet: Jeder Kanal R, G und B wird auf die Skala 0-1 umgerechnet, die Gamma wird korrigiert (Linearisierung) und gewichtet kombiniert: 0.2126·R + 0.7152·G + 0.0722·B (Grün wiegt mehr, weil das Auge es als heller wahrnimmt). Das Ergebnis reicht von 0 (Schwarz) bis 1 (Weiß).
• Verhältnis — mit der Leuchtdichte der helleren Farbe (L1) und der der dunkleren (L2) wird (L1 + 0.05) / (L2 + 0.05) angewendet. Das +0.05 verhindert extreme Divisionen. Es ist symmetrisch: Egal was Text und was Hintergrund ist, das Verhältnis bleibt gleich.
Jede Kombination wird anhand von vier offiziellen Schwellenwerten bewertet. AA ist das gesetzliche und empfohlene Minimum; AAA ist die verstärkte Stufe (längeres Lesen oder Zielgruppen mit Sehbehinderung):
• AA — normaler Text: Verhältnis ≥ 4.5:1.
• AA — großer Text: Verhältnis ≥ 3:1.
• AAA — normaler Text: Verhältnis ≥ 7:1.
• AAA — großer Text: Verhältnis ≥ 4.5:1.
Großer Text verlangt weniger, weil seine Striche dicker sind und sich leichter lesen lassen. Strebe mindestens AA an; wenn möglich AAA.
Die Schwellenwerte der ersten vier Abzeichen gelten für Text. Nicht-Text-Elemente haben ihre eigene WCAG-Regel (Kriterium 1.4.11): Feldränder, Icons, Formularsteuerelemente und die bedeutsamen Teile eines Diagramms brauchen einen Kontrast von mindestens 3:1 gegenüber dem, was direkt daneben liegt. Das ist das fünfte Abzeichen, Bedienelemente und Grafiken.
Wenn eine Kombination AA nicht erreicht (oder, falls sie das schon tut, AAA), werden Textfarben desselben Farbtons vorgeschlagen, die es schaffen: eine dunklere und, falls vorhanden, eine hellere, mit der geringstmöglichen Änderung. Bewegt wird nur die OKLCH-Helligkeit, also die vom Auge wahrgenommene Helligkeit, damit die Farbe deiner wirklich ähnelt. Klicke auf Verwenden, um es auszuprobieren.
Was Gesetze und Barrierefreiheitsnormen heute verlangen, ist WCAG 2.x — das misst dieses Tool. WCAG 3 ist noch ein Entwurf des W3C (der neueste, von September 2026), und sein Text sagt, der Kontrastalgorithmus sei noch nicht festgelegt. APCA, das viele Websites als «den WCAG-3-Kontrast» darstellen, verließ diesen Entwurf 2023: Es ist ein interessanter Vorschlag, aber nicht die Norm. Wenn du es verwendest, erfülle zusätzlich WCAG 2.
Als großer Text gilt —und erhält die milderen Schwellenwerte— Text ab 18pt (etwa 24px), oder ab 14pt (etwa 18.67px), wenn er fett ist. Unterhalb dieser Größen zählt er als normaler Text und muss den strengeren Schwellenwert erfüllen. Die Vorschau enthält eine Zeile jeder Größe zum Vergleichen.
Unter dem Verhältnis gibt es vier Zeilen, eine pro Kriterium, mit jeweils einem Badge:
• PASS (grün, mit Häkchen) — diese Kombination erfüllt dieses Niveau.
• FAIL (rot, mit Kreuz) — erfüllt es nicht; der Kontrast muss erhöht werden.
Da die Schwellenwerte aufsteigend sind, besteht ein Text, der AAA normal (7:1) besteht, auch alle anderen. Ein Text, der nur „AA groß“ (3:1) besteht, ist nicht für normalen Text gültig.
Wenn eine Kombination fehlschlägt:
• Verdunkle den Text oder helle den Hintergrund auf (oder umgekehrt): Je größer der Leuchtdichteunterschied, desto höher das Verhältnis.
• Verlass dich nicht nur auf den Farbton — zwei kräftige Farben (Rot auf Grün) können trotz „Zusammenstoß“ einen sehr niedrigen Kontrast haben. Entscheidend ist die Helligkeit, nicht die Farbe.
• Mittelgrau ist tückisch: hellgrauer Text auf Weiß fällt meist durch; dunkle ihn Richtung Schwarz ab.
• Verwende nicht nur Farbe, um Informationen zu vermitteln (Links, Fehler): ergänze sie mit Unterstreichung, Symbol oder Text.
• Passe die Farbwähler an, bis das Badge, das dich interessiert, auf PASS wechselt.
Großer Text = 18pt+ (24px) oder 14pt+ (18.67px) fett