WCAG-Kontrastprüfer

1. Gib Vordergrund- (Text) und Hintergrundfarben ein oder wählen Sie sie aus.

2. Lies das Kontrastverhältnis ab (z. B. 4,52:1).

3. Prüfe die AA- und AAA-Zeilen auf normale und große Textgrößen.

4. Passe die HSL-Helligkeit an, bis das erforderliche Niveau erreicht ist, und kopieren Sie dann die Hex-Werte.

• Wenn du Design-System-Tokens vor der Veröffentlichung prüfen.

• Wenn du Barrierefreiheitsbefunde von Lighthouse oder Axe beheben.

• Wenn du Linkfarben auswählen, müssen diese sich vom Textkörper unterscheiden, nicht nur durch den Farbton.

• Wenn du eine vollständige Seitenprüfung benötigen, verwenden Sie automatisierte Scanner für gerendertes DOM.

• Beim Testen nicht fester Hintergründe (Bilder, Farbverläufe) sollten Sie Pixel im ungünstigsten Fall testen.

• Nutze bei der Simulation von Farbenblindheit spezielle Sehsimulatoren.

Level A ist mindestens; AA ist in vielen Gerichtsbarkeiten (ADA, EAA öffentlicher Sektor) das rechtliche Ziel. AAA strebt nach Fließtexten — große Schlagzeilen können AAA leichter bestehen als 14-Pixel-Untertitel. Sichtbare Fokusindikatoren (2.4.7) ergänzen den Kontrast — Tastaturbenutzer benötigen sichtbare Fokusringe, oft 3:1 gegenüber benachbarten Farben. Dokumentieren Sie „Bestanden/Nicht bestanden“ in deinem Designsystem neben jedem Token-Paar.

Wenn das Markenviolett auf Weiß scheitert, tauschen Sie den Farbton nicht aus — verdunkeln Sie den Vordergrund in Helligkeitsstufen von 5–10 % oder verwenden Sie Lila nur für große Überschriften. Platzhaltertext muss einen Kontrast (4,5:1) erfüllen, nicht nur Eingabewerte. Deaktivierte Zustände sind möglicherweise vom strengen Textkontrast ausgenommen, sollten jedoch wichtige Informationen nicht allein durch die Farbe vermitteln. Kombinieren Sie diesen Prüfer mit dem Farbkonverter für eine schnelle HSL-Iteration.