Dieser Beitrag vertieft ein einzelnes Kriterium aus dem Überblick zu barrierefreiem Webdesign. Du bekommst konkrete Orientierung, ohne daraus eine trockene Checkliste zu machen.
Farbkombination direkt prüfen
Gib Text- und Hintergrundfarbe ein und prüfe sofort, ob die Kombination die WCAG-Werte für AA oder AAA erreicht.
Welche Kontrastwerte gelten?
Die WCAG arbeitet mit Kontrastverhältnissen. Für normalen Text gilt auf Level AA mindestens 4,5:1. Für großen Text reicht 3:1. Für AAA gelten strengere Werte: 7:1 für normalen Text und 4,5:1 für großen Text.
Diese Zahlen sind keine Designbremse. Sie helfen, Farbkombinationen objektiv zu bewerten. Gerade sehr helle Grautöne, Pastellfarben und bunte Buttons fallen in der Praxis häufig durch.
Farbe darf nicht die einzige Information sein
Barrierefreiheit bedeutet nicht nur, dass Farben gut lesbar sind. Farbe darf auch nicht die einzige Art sein, Informationen zu vermitteln. Ein Formularfehler, der nur rot markiert ist, hilft Menschen mit Farbsehschwäche nicht zuverlässig.
Besser sind Kombinationen: Farbe plus Text, Symbol, Rahmen, Muster oder klare Position. Ein Fehlerfeld sollte also nicht nur rot sein, sondern auch eine verständliche Meldung anzeigen.
Praktisch testen statt raten
Ein Farbkontrast-Checker ist der schnellste Einstieg. Wichtig ist aber, echte UI-Zustände zu prüfen: Navigation, Hero-Text, Cards, Buttons, Formularfelder, Cookie-Banner und Footer. Viele Websites bestehen den Test im Fließtext, scheitern aber bei kleinen Labels oder hellen Buttons.
Auf der Hauptseite zur Barrierefreiheit findest du einen interaktiven Kontrast-Checker, mit dem du Farben direkt ausprobieren kannst.
