CSS-Kontrast-Checker

Kontrast ist keine Geschmacksfrage, sondern Barrierefreiheit. Menschen mit Sehschwäche, ältere Nutzer, jeder auf einem billigen Display oder bei Sonnenlicht - sie alle stehen und fallen mit dem Kontrast zwischen Text und Hintergrund. Der CSS-Kontrast-Checker macht diesen Wert sichtbar, statt ihn dem Bauchgefühl zu überlassen.

Der Checker rechnet dir das Kontrastverhältnis nach WCAG 2.1 aus und sagt dir sofort, ob deine Kombination die Stufe AA oder AAA erreicht - getrennt für normalen und großen Text, weil dort unterschiedliche Schwellen gelten. Du gibst Vorder- und Hintergrundfarbe als Hex, RGB, RGBA, HSL, HSLA oder als CSS-Farbnamen ein; der Checker versteht alle gängigen Schreibweisen.

Neben dem klassischen WCAG-Verhältnis rechnet das Tool auch mit APCA, dem Accessible Perceptual Contrast Algorithm, der für WCAG 3.0 vorgesehen ist. APCA bewertet Kontrast wahrnehmungsnäher, gerade bei dünnen Schriften und im Dunkelmodus, wo das alte Verhältnis oft danebenliegt. So bekommst du beide Perspektiven auf einen Blick.

Damit du nicht nur ein Urteil, sondern auch eine Lösung bekommst, simuliert der Checker die häufigen Formen der Farbenblindheit - Protanopie (kein Rot), Deuteranopie (kein Grün), Tritanopie (kein Blau) und Achromatopsie (keine Farben). Und wenn eine Kombination durchfällt, schlägt die Vorschlags-Engine angepasste Farben vor, die den Anforderungen genügen, ohne deinen Look komplett umzuwerfen.

Für größere Aufgaben gibt es zwei weitere Modi. Im Paletten-Modus prüfst du ein ganzes Farbschema auf einmal und siehst, welche Paarungen zusammen funktionieren. Im Batch-Modus fütterst du echtes CSS ein, und der Checker zieht die Farbwerte heraus und auditiert sie in einem Rutsch - praktisch, wenn du ein bestehendes Design gegen die Barrierefreiheit prüfen willst.

Das Ganze ist mehr als eine Fingerübung: Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) sind Kontrastanforderungen für viele digitale Angebote in Deutschland ab Juni 2025 verpflichtend. Fertige Presets - vom Bund.de-Standard über Elster bis zum bewusst schlechten Behördenweb-Grau-Desaster - zeigen dir, wie gute und schlechte Kontraste in der Praxis aussehen.

Alles läuft in deinem Browser. Kein Farbwert, kein CSS-Schnipsel wird an einen Server geschickt. Kein Konto, keine Anmeldung, keine Datenübertragung - nur schnelle, ehrliche Kontrastwerte.