Die Contrast Ratio beschreibt das Helligkeitsverhältnis zwischen Vordergrund- und Hintergrundfarbe – zum Beispiel zwischen Text und Hintergrund auf einer Website. Der Farbkontrast ist ein zentrales Kriterium für barrierefreies Design und wird in den WCAG verbindlich geregelt.
Warum ist der Kontrast so wichtig?
Nicht alle Menschen können Farben gleich gut erkennen. Bei zu schwachen Kontrasten werden Texte schwer lesbar – insbesondere für:
- Menschen mit Sehbehinderung oder Farbsehschwäche
- ältere Nutzer mit altersbedingtem Sehverlust
- alle, die Inhalte draußen oder auf kleinen Displays nutzen
Ein ausreichender Kontrast erhöht nicht nur die Zugänglichkeit, sondern auch die Benutzerfreundlichkeit für alle.
Welche Contrast Ratios sind vorgeschrieben?
Laut WCAG 2.1 (Level AA) gelten folgende Mindestwerte:
- Normale Texte: mindestens 4.5:1
- Große Texte (ab 24 px oder fett ab 18,66 px): mindestens 3:1
- Grafiken und UI-Elemente (Buttons, Formulare): mindestens 3:1
Für Level AAA gelten noch strengere Vorgaben (7:1 bzw. 4.5:1).
Wie prüft man den Farbkontrast?
Es gibt zahlreiche Tools zur Kontrastprüfung – etwa den WAVE Checker, den Contrast Ratio Calculator von Lea Verou oder den Color Contrast Analyzer von TPGi. Viele Page Builder wie Divi bieten ebenfalls integrierte Farbtests an.
Tipp: Schwarz auf Weiß ist nicht immer ideal – auch andere Kombinationen mit hohem Kontrast, aber angenehmerem Look sind möglich.
Der Klicklounge-Tipp: Denken Sie beim Farbdesign nicht nur an Ästhetik, sondern an Zugänglichkeit. Testen Sie alle wichtigen Texte und Bedienelemente – und passen Sie Farben gegebenenfalls an. Das verbessert Barrierefreiheit und User Experience gleichermaßen.