Farbkontrast prüfen

Eine Messung statt eines Eindrucks

Bildschirmhelligkeit, Schriftstärke, Umgebungslicht und benachbarte Farbtöne verändern, wie dieselbe Kombination wahrgenommen wird. Eine Freigabe nach Augenmaß hängt deshalb zu stark vom Arbeitsplatz der prüfenden Person ab. Das Werkzeug wandelt beide Farben in sRGB um, berechnet ihre relative Leuchtdichte und wendet die WCAG-Kontrastformel auf den helleren und den dunkleren Wert an. Sie erhalten ein numerisches Verhältnis sowie vier getrennte Aussagen: AA und AAA für normalen Text, anschließend AA und AAA für großen Text. Eine Überschrift kann damit bestehen, obwohl derselbe Farbwert bei kleinerem Fließtext nicht ausreicht.

Farbwerte direkt aus Stylesheet oder Designsystem

Sie können drei- oder sechsstellige HEX-Werte, eine rgb()-Funktion mit drei Kanälen oder hsl() mit Prozentwerten für Sättigung und Helligkeit eingeben. Die Antwort normalisiert beide Angaben als sechsstelligen HEX-Wert und als RGB. Damit lässt sich ein CSS-Wert mit einem Design-Token vergleichen oder ein reproduzierbares Prüfergebnis dokumentieren. Alphakanäle bleiben bewusst außen vor: Die sichtbare Farbe einer transparenten Ebene hängt von allen darunterliegenden Schichten ab. Mischen Sie die Transparenz zuerst mit dem endgültigen Hintergrund und prüfen Sie danach das tatsächlich angezeigte, deckende Farbpaar.

Was die Ergebnismatrix aussagt und was nicht

Ein bestandenes Ergebnis beschreibt ausschließlich diese beiden einfarbigen Werte. Es prüft weder tatsächliche Schriftgröße und -stärke noch Verläufe, Bilder, Text auf Video, Hover-Zustände, Tastaturfokus oder die semantische Struktur einer Seite. Prüfen Sie jeden wichtigen Zustand eines Bedienelements einzeln, sobald sich eine Farbe ändert. Im Browser läuft die Berechnung lokal und eignet sich für die schnelle, nachvollziehbare Kontrolle einer vollständigen Palette in sämtlichen vorgesehenen Zuständen und Ansichten. Für automatische Prüfungen in Ihrer Entwicklungsstrecke senden Sie dieselben beiden Felder an die API. Sie erhalten dort dasselbe strukturierte Objekt und können es unmittelbar mit der festgelegten Qualitätsregel Ihres Produkts vergleichen.