Warum sind Farbkontraste so wichtig?
Rund jeder zwölfte Mann und etwa jede zweihundertste Frau hat eine Farbsehschwäche; viele Menschen sehen außerdem mit zunehmendem Alter kontrastärmer. Zu blasse Schrift wird für sie unlesbar. Kontrastfehler gehören zu den am häufigsten von automatischen Tools gefundenen WCAG-Verstößen – und zu den am schnellsten behebbaren.
Welche Kontrastwerte verlangt die WCAG?
Für normalen Text fordert WCAG 2.2 (Kriterium 1.4.3) ein Kontrastverhältnis von mindestens 4,5:1 gegenüber dem Hintergrund. Große Schrift – ab 24 px bzw. 18,7 px fett – darf bei 3:1 liegen. Grafische Bedienelemente und aussagekräftige Symbole brauchen nach 1.4.11 ebenfalls mindestens 3:1.
Wie messe ich Kontraste?
Das Kontrastverhältnis berechnet sich aus der relativen Helligkeit zweier Farben und reicht von 1:1 bis 21:1. Sie müssen nicht rechnen: Werkzeuge wie der WebAIM Contrast Checker, der TPGi Colour Contrast Analyser oder die Entwicklertools im Browser zeigen den Wert sofort und sagen, ob AA oder AAA erfüllt ist.
Farbe darf nie die einzige Information sein
WCAG-Kriterium 1.4.1 verlangt, dass Bedeutung nicht allein über Farbe transportiert wird. Ein rot markiertes Pflichtfeld braucht zusätzlich ein Symbol oder einen Text. Diagramme brauchen Muster oder Beschriftungen, Links sollten sich nicht nur durch die Farbe vom Fließtext abheben, sondern etwa durch Unterstreichung.
Praxis-Tipps für das Farbsystem
Definieren Sie Kontrast bereits in Ihren Design-Tokens und Komponenten, statt ihn nachträglich zu reparieren. Prüfen Sie auch Zustände wie Hover, Fokus und deaktivierte Elemente. Ein einmal sauber angelegtes Farbsystem verhindert, dass mit jeder neuen Seite neue Kontrastfehler entstehen.