Berechnet das Kontrastverhältnis zwischen einer Textfarbe und einer Hintergrundfarbe und prüft, ob es die Barrierefreiheitsrichtlinien WCAG 2.1 erfüllt. Das Verhältnis reicht von 1:1 (kein Kontrast) bis 21:1 (schwarz auf weiß).
Wähle die Textfarbe und die Hintergrundfarbe mit den Auswahlfeldern. Die Vorschau und das Verhältnis werden sofort aktualisiert, während du die Farben anpasst.
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 nach vier Kriterien bewertet: AA normal (≥4.5:1), AA groß (≥3:1), AAA normal (≥7:1) und AAA groß (≥4.5:1). AA ist das empfohlene Minimum; AAA ist die anspruchsvollste Stufe.
Die oben genannten Schwellenwerte gelten für Text. Nicht-textliche Elemente haben ihre eigene WCAG-Regel (Kriterium 1.4.11): Feldränder, Symbole, Formularsteuerelemente und die signifikanten Teile einer Grafik benötigen einen Kontrast von mindestens 3:1 gegenüber dem, was daneben liegt. Dieses Tool zeigt die vier Text-Badges; achte bei einem Symbol oder Rand darauf, dass das Verhältnis 3:1 erreicht, auch wenn das Badge „AA normal“ fehlschlägt.
Als großer Text gilt Text ab 18pt (etwa 24px) oder ab 14pt (etwa 18.67px) in Fettschrift. Großer Text erfordert weniger Kontrast als normaler Text.
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