WCAG-Farbkontrast berechnen

Er liefert die Luminanz beider Farben, das daraus entstehende Kontrastverhältnis sowie eindeutige AA- und AAA-Ergebnisse für normalen und großen Text. Sie können damit Design-Tokens prüfen, Oberflächenfarben vor der Veröffentlichung validieren oder einen wiederholbaren Barrierefreiheitstest in einen automatisierten Ablauf aufnehmen. Die Eingaben sind eindeutige Hexadezimalfarben, alle Berechnungen sind deterministisch und ungültige Formate führen zu einer verständlichen Fehlermeldung. Das Browserwerkzeug eignet sich für einzelne Prüfungen; jeder Aufruf über die API kostet $0.002.

Verstehen Sie die ausgegebenen Werte

Das Ergebnis normalisiert zunächst beide Eingaben als sechsstellige, kleingeschriebene Hexadezimalfarben. Eine Kurzform wie #fff wird daher einheitlich als #ffffff ausgegeben. Danach sehen Sie die relative Luminanz von Vorder- und Hintergrund. Sie reicht von null für Schwarz bis eins für Weiß und wird aus linearisierten sRGB-Kanälen abgeleitet, die entsprechend der unterschiedlichen Empfindlichkeit des Auges für rotes, grünes und blaues Licht gewichtet werden. Das Kontrastverhältnis vergleicht die hellere mit der dunkleren Luminanz und reicht von 1:1 bei identischen Farben bis 21:1 bei Schwarz und Weiß. Der sichtbare Wert wird auf zwei Dezimalstellen gerundet, jede Einstufung verwendet jedoch den vollständigen ungerundeten Wert. Dadurch besteht ein als 4.50 angezeigtes Ergebnis nicht, wenn sein tatsächlicher Wert noch unter 4.5 liegt. Die Antwort bündelt vier boolesche Werte für normalen und großen Text. Diese lassen sich einem Designteam verständlich zeigen oder direkt in automatisierten Tests gegen eine Richtlinie prüfen.

Geben Sie gültige Farben ein und deuten Sie AA und AAA

Geben Sie Vorder- und Hintergrund als drei- oder sechsstellige Hexadezimalfarben mit oder ohne vorangestelltes Rautezeichen ein. Werte wie #123, 123, #112233 und AABBCC werden akzeptiert und normalisiert. CSS-Farbnamen, rgb()- oder hsl()-Ausdrücke, vier- oder achtstellige Hexwerte mit Alphakanal, leere Zeichenfolgen und andere Datentypen werden abgelehnt, weil Deckkraft und Komposition zusätzlichen Kontext benötigen. Für normalen Text verlangt WCAG AA mindestens 4.5:1 und AAA mindestens 7:1. Bei großem Text benötigt AA 3:1 und AAA 4.5:1. Als groß gilt gewöhnlich Text ab 18 Punkt in Normalschnitt oder 14 Punkt in Fettschrift. Die Fähigkeit untersucht die Typografie jedoch nicht; sie gibt beide Matrizen aus, damit Ihre Anwendung die passende auswählt. Ein bestandener Farbwert ist nur ein Teil einer Barrierefreiheitsprüfung und belegt nicht, dass eine gesamte Oberfläche barrierefrei ist.

Nutzen Sie Kontrastergebnisse in Design- und Lieferabläufen

Beginnen Sie mit den tatsächlichen Vordergrund- und Hintergrund-Tokens der Komponente statt mit Farben aus einem komprimierten Bildschirmfoto. Vergleichen Sie bei einer manuellen Prüfung Fließtext, Sekundärtext, Links, Schaltflächenbeschriftungen, Formularhinweise, Fokusmarkierungen und deaktivierte Zustände mit allen Flächen, auf denen sie erscheinen. Pflegen Sie in einem Designsystem eine kleine Matrix freigegebener Paare und rufen Sie die API bei jeder Palettenänderung auf. Eine kontinuierliche Integrationsprüfung kann ein vorgeschlagenes Paar ablehnen, wenn AA für normalen Text falsch ist, während eine dekorative oder groß gesetzte Kombination nach einer dokumentierten Regel zulässig bleibt. Speichern Sie normalisierte Farben und Verhältnis zusammen mit dem Testergebnis, damit Prüfer den Befund reproduzieren können. Jeder automatisierte Aufruf kostet $0.002; ungültige Eingaben liefern einen Fehler. Da der Algorithmus weder Netzwerk noch Zufall oder aktuelle Zeit nutzt, erzeugt dasselbe Paar immer dasselbe Ergebnis. Ermitteln Sie bei Transparenz, Verläufen, Fotos oder interaktiven Zuständen zuerst die gerenderten Farben oder verwenden Sie eine Browserprüfung mit vollständigem Seitenkontext.