Kontrastberechnung
Farbe im Web
Im Web ist Kontrast nicht statisch. Inhalte werden auf unterschiedlichen Geräten, Bildschirmgrößen und Helligkeiten betrachtet. Nutzer:innen können zoomen oder Systemeinstellungen verändern. Deshalb muss Kontrast so gewählt werden, dass er unter variierenden Bedingungen stabil funktioniert.
Kontrastverhältnis im Web
Für Bildschirmmedien wird das Kontrastverhältnis nach WCAG verwendet. Dabei wird die relative Helligkeit (Luminanz) von Vorder- und Hintergrundfarbe miteinander verglichen.
Das Ergebnis wird als Verhältnis angegeben, zum Beispiel 7 : 1.
Je höher der Wert, desto besser ist der Kontrast. Für gute Lesbarkeit gelten folgende Mindestwerte:
Normaler Text (bis 24px): mindestens 8 : 1
Großer Text (ab 24px): mindestens 3 : 1
Icons, grafische Symbole: mindestens 3 : 1
Diese Kontrastwerte stellen sicher, dass relevante Inhalte auch bei eingeschränktem Sehvermögen, Farbfehlsichtigkeiten oder ungünstigen Lichtverhältnissen gut erfassbar bleiben.
Praktische Berechnung
In der Praxis wird der Kontrast nicht manuell berechnet. Stattdessen kommen Online- Kontrastrechner zum Einsatz. Dort werden Text- und Hintergrundfarbe eingegeben und das Kontrastverhältnis automatisch ausgegeben.
Solche Tools zeigen meist auch direkt an, ob die WCAG-Mindestanforderungen erfüllt sind.
Kontrast im Nutzungskontext prüfen
Kontrast sollte auch nach rechnerischer Prüfung im realen Nutzungskontext getestet werden, da Display, Helligkeit und Darstellungsmodus die Wahrnehmung beeinflussen.
Kontrast im Web immer rechnerisch prüfen und im Nutzungskontext testen – nicht nur im Design-Tool beurteilen.
