Der Farbkontrast entscheidet darüber, ob echte Menschen Ihren Text tatsächlich lesen können. Der Farbkontrastprüfer misst das WCAG-Kontrastverhältnis zwischen zwei beliebigen Farben und sagt Ihnen, ob das Paar für normalen Text, großen Text und Oberflächenelemente sicher ist. In diesem Leitfaden wird erläutert, woher die Zahlen stammen, was die Schwellenwerte bedeuten und wie eine fehlerhafte Kombination behoben werden kann.

So wird das Kontrastverhältnis berechnet

Kontrast ist kein einfacher Unterschied von Farbwerten – er basiert auf der relativen Leuchtdichte, einem Modell der wahrgenommenen Helligkeit. Die Rot-, Grün- und Blaukanäle jeder Farbe werden auf 0–1 normalisiert, von gammakodiertem sRGB in lineares Licht umgewandelt, dann gewichtet (0,2126 Rot, 0,7152 Grün, 0,0722 Blau) und summiert. Grün hat das größte Gewicht, weil das menschliche Auge am empfindlichsten darauf reagiert.

Die beiden Luminanzwerte ergeben das Verhältnis (L_heller + 0,05) / (L_dunkler + 0,05). Die 0,05-Konstante berücksichtigt das vom Bildschirm reflektierte Umgebungslicht. Das Ergebnis reicht von 1:1 (gleiche Farbe) bis 21:1 (reines Schwarz auf reinem Weiß). Wenn eine Vordergrundfarbe halbtransparent ist, fügt dieses Werkzeug sie zunächst über dem Hintergrund zusammen, da dies das ist, was ein Betrachter tatsächlich sieht.

Was die Schwellenwerte bedeuten

WCAG definiert Stufen. Für normalen Fließtext erfordert AA 4,5:1 und AAA 7:1. Bei großem Text – mindestens 24 Pixel normal oder 18,66 Pixel fett – verringern sich die Balken auf 3:1 (AA) und 4,5:1 (AAA), da größere Glyphen von Natur aus besser lesbar sind. Eine separate Regel, WCAG 1.4.11, legt ein Minimum von 3:1 für Nicht-Text-Elemente fest: Symbole, Eingaberahmen, Fokusindikatoren und die bedeutungsvollen Teile von Diagrammen und Grafiken.

AA ist die praktische Basislinie. Die meisten Barrierefreiheitsgesetze – das ADA in den USA, das European Accessibility Act, Abschnitt 508 – verweisen auf WCAG AA. Überall AAA zu erreichen ist bewundernswert, aber für Markenfarben nicht immer erreichbar; AA für den Fließtext plus 3:1 für die Benutzeroberfläche ist für die meisten Produkte das realistische Ziel.

Ein fehlerhaftes Paar reparieren

Wenn eine Kombination fehlschlägt, ist die Ursache meist eine Vordergrundfarbe, deren Helligkeit zu nahe an der des Hintergrunds liegt. Die sauberste Lösung besteht darin, die Helligkeit der Textfarbe anzupassen und gleichzeitig den Farbton beizubehalten, damit das Design immer noch der Marke entspricht. Die Registerkarte „Korrekturvorschläge“ dieses Tools macht genau das – sie stuft die Textfarbe dunkler und heller ein, bis sie 4,5:1 überschreitet, und meldet die kleinste Änderung, die passiert.

Zwei Vorbehalte. Erstens ist Kontrast notwendig, aber nicht ausreichend: Farbe sollte niemals die einzige Möglichkeit sein, Bedeutung zu signalisieren, da farbenblinde Benutzer den Unterschied möglicherweise nicht wahrnehmen. Zweitens machen große Hintergrundbilder und Farbverläufe eine Einzelverhältnisprüfung zunichte – testen Sie die ungünstigste Stelle, an der Text den hellsten oder dunkelsten Teil des Bildes überlappt.