Der WCAG-Farbkontrastprüfer ist ein Werkzeug mit zwei Feldern. Die Seite hält ein Feld für die Vordergrundfarbe und ein Feld für die Hintergrundfarbe, jeweils mit einem Farbwähler und einem Textfeld, und darunter die Ergebnisse: eine Live-Vorschau, das Kontrastverhältnis und ein Raster aus vier Karten mit Bestanden oder Nicht bestanden. Es gibt keinen Ausführen-Button und nichts zu konfigurieren; ändern Sie eine der beiden Farben, und alle Zahlen aktualisieren sich auf derselben Taste. Es wird nichts irgendwohin gesendet: die Helligkeitsmathematik läuft im Browser des Geräts.
Die zwei Farbfelder und die Live-Vorschau
Der Vordergrund ist die Textfarbe und der Hintergrund das, was dahinter liegt, und die Standardwerte sind Schwarz auf Weiß, #000000 über #FFFFFF. Jedes Feld akzeptiert einen Hex-Wert mit drei Ziffern wie #F00 oder mit sechs wie #767676, und das führende # ist optional, sodass 000000 gleich wie #000000 geparst wird. Neben jedem Feld sitzt ein Farbwähler, der das Textfeld für Sie ausfüllt. Sobald beide Farben gültig sind, erscheint der Ergebnisbereich: eine Vorschau, die Beispieltext im gewählten Farbpärchen in drei Schriftgrößen rendert, das Verhältnis, und die vier WCAG-Karten. Enthält ein Feld etwas, das kein Hex-Wert mit drei oder sechs Ziffern ist, verschwindet der gesamte Ergebnisbereich, statt eine Vermutung zu zeigen.
Wie das Kontrastverhältnis berechnet wird
Das Werkzeug folgt der Standardformel von WCAG. Jede Hex-Farbe wird in Rot-, Grün- und Blauwerte von 0 bis 255 umgewandelt, jeder Kanal wird von der sRGB-Kurve linearisiert, und die drei Kanäle werden zu einer relativen Helligkeit gewichtet mit den Koeffizienten 0.2126 für Rot, 0.7152 für Grün und 0.0722 für Blau. Das Verhältnis ist die hellere Helligkeit plus 0.05 geteilt durch die dunklere Helligkeit plus 0.05, weshalb es mindestens 1 ist und 21 nie überschreitet, den Abstand zwischen reinem Schwarz und reinem Weiß. Die Zahl wird auf zwei Nachkommastellen angezeigt, gefolgt von Doppelpunkt und Einer, also liest sich Schwarz auf Weiß 21.00:1 und eine Farbe über sich selbst 1.00:1. Das Verhältnis hängt nicht davon ab, welche Farbe Vordergrund heißt: Tauschen Sie die beiden Felder, Sie erhalten dieselbe Zahl.
Die vier festen Schwellwerte und ihre Grenzwerte
Vier Karten bewerten das Verhältnis gegen vier feste Mindestwerte: AA für normalen Text bei 4.5:1, AA für großen Text bei 3:1, AAA für normalen Text bei 7:1 und AAA für großen Text bei 4.5:1, und jede Karte zeigt ihr Minimum unter dem Urteil. Die Grenzen sind inklusive, ein Verhältnis genau auf dem Mindestwert besteht. Die Werte, die Sie in der Praxis antreffen: #767676 auf Weiß ist 4.54:1 und besteht AA normal, während #777777 auf Weiß 4.48:1 ist und nicht besteht, einen Hex-Schritt auf der anderen Seite der Linie. #808080 auf Weiß ist 3.95:1, nur großer Text, und #595959 auf Weiß ist 7.00:1, was alle vier Karten besteht, einschließlich AAA normal.
Was großer Text für die Karten 3:1 und 4.5:1 bedeutet
Großer Text im Sinne von WCAG ist mindestens 18 Punkte in regulär oder 14 Punkte in fett, was ungefähr 24px regulär oder 19px fett entspricht. Das Werkzeug misst keine Schriftgrößen und hat kein Feld dafür; es berechnet immer alle vier Urteile, daher ist das Lesen des Ergebnisses eine Zweistufen-Aktion. Schauen Sie zuerst auf die vier Karten, und entscheiden Sie dann, welche Ihrer realen Textgrößen das Design nutzt: Wenn der Text groß ist, gelten die großen Karten 3:1 und 4.5:1, wenn er normal groß ist, die normalen Karten 4.5:1 und 7:1. Ein Verhältnis von 4:1 besteht beispielsweise die AA-Karte für großen Text, besteht die AA-Karte für normalen Text nicht und besteht beide AAA-Karten nicht.
Grenzfälle: ungültiges Hex und gleiche Farben
Der Parser akzeptiert nach dem Entfernen eines führenden # nur einen Hex-Wert mit drei oder sechs Ziffern, also verbirgt alles andere die Ergebnisse: fünf Ziffern, acht Ziffern mit einem Alpha-Kanal und nicht-hexadezimale Buchstaben lassen die Seite mit nur den beiden Eingabefeldern stehen. Identische Vordergrund- und Hintergrundfarbe ergeben 1.00:1 und bestehen alle vier Karten nicht, was das ehrliche Urteil für Text in derselben Farbe wie sein Hintergrund ist. Groß- und Kleinschreibung bei Hex-Werten wird gleich behandelt, und die Dreiziffer-Abkürzung wird ziffernweise ausgedehnt, also ist #F00 gleich #FF0000. Es gibt keine Validierungsnachricht im Ergebnisbereich; das Verbergen ist das einzige Signal, was zu wissen lohnt, wenn Sie sich fragen, wo die Karten geblieben sind.
Nur clientseitig, nichts wird gespeichert
Die beiden Hex-Werte verlassen den Browser nie. Es gibt keinen Versand, keine Historie, keine gespeicherten Paare und keinen Kopieren-Button; die Berechnung ist eine reine Funktion der beiden aktuellen Eingaben, und das Neuladen der Seite bringt die Standardwerte Schwarz auf Weiß zurück. Es gibt auch keine Tauschsteuerung zwischen den beiden Feldern, also tippen Sie zum Umkehren eines Paares beide Werte erneut, und kein Vorschlagsmechanismus sagt Ihnen die nächste bestandene Farbe: Das Werkzeug berichtet das Verhältnis und die vier Urteile, und das Anpassen liegt bei Ihnen.
Was das Werkzeug behält, und wo es weitergeht
Es behält nichts: Es wird keine Netzwerkanfrage gestellt, nichts wird gespeichert, und das Neuladen setzt die Felder auf #000000 und #FFFFFF zurück. Für den Rest des Farb- und CSS-Workflows wandelt der Farbkonverter einen Hex-Wert zwischen HEX, RGB und HSL um, der CSS-Einheiten-Konverter rechnet zwischen px, rem, em und pt, damit Sie Ihre Schriftgrößen an der Linie für großen Text abgleichen können, und der CSS-Formatierer räumt das Stylesheet auf, das diese Farben trägt. Für einen breiteren Blick auf die Markup-Seite derselben Seite sehen Sie in den HTML-Formatierungs-Guide.