Kontrastverhältnis

Was bedeutet Kontrastverhältnis?

Das Kontrastverhältnis vergleicht die Helligkeit von Text und Hintergrund. Es wird als Verhältnis angegeben, etwa 4,5 zu 1. Schwarz auf Weiß erreicht den Höchstwert von 21 zu 1, hellgraue Schrift auf Weiß liegt oft unter 3 zu 1 und ist damit für viele Menschen schwer zu lesen.

Als Maßstab gilt Stufe AA der WCAG: mindestens 4,5 zu 1 bei normalem Text und mindestens 3 zu 1 bei großer Schrift ab etwa 24 Pixeln oder ab 19 Pixeln in Fettschrift. Für Bedienelemente und wichtige grafische Elemente gelten ebenfalls 3 zu 1.

Messen lässt sich das ohne Zusatzsoftware: In den Entwicklerwerkzeugen von Chrome oder Edge zeigt der Farbwähler das Verhältnis direkt an. Online geht es zum Beispiel mit dem Kontrastrechner von leserlich.info. Wichtig ist, auch Zustände wie Platzhaltertexte, deaktivierte Felder und Text auf Bildern zu prüfen.

In der Praxis entsteht das Problem fast immer aus Designgründen: Hellgrau wirkt auf großen Monitoren edel. Auf einem Handy in der Sonne oder für Augen jenseits der fünfzig ist es unlesbar. Mehr dazu im Beitrag Barrierefreie Website.

Wie der Wert berechnet wird

Grundlage ist die relative Leuchtdichte beider Farben, also wie hell sie wahrgenommen werden. Daraus ergibt sich ein Verhältnis zwischen 1 zu 1 bei identischen Farben und 21 zu 1 bei Schwarz auf Weiß.

Wichtig ist, dass der Wert nicht der gefühlten Helligkeit entspricht. Gelb wirkt kräftig, hat auf Weiß aber einen sehr schlechten Wert. Rot wirkt dunkel, liegt auf Schwarz aber oft unter der Grenze. Deshalb wird gemessen und nicht geschätzt.

Halbtransparente Farben sind ein Sonderfall: Gerechnet wird mit der Farbe, die tatsächlich entsteht, also einschließlich des Hintergrunds darunter.

Was außer Fließtext noch geprüft werden muss

Bedienelemente: Ränder von Eingabefeldern, Schalter, Häkchen und der Fokusrahmen brauchen mindestens 3 zu 1 gegenüber ihrer Umgebung. Sonst ist nicht erkennbar, wo etwas anfängt.

Grafiken mit Information: Linien in einem Diagramm, Symbole mit Bedeutung, Fortschrittsbalken. Auch hier gelten 3 zu 1.

Text auf Bildern: Der schwierigste Fall, weil der Hintergrund an jeder Stelle anders ist. Praktikabel ist eine abdunkelnde Fläche oder ein Verlauf hinter dem Text.

Zustände: Platzhalter in Formularen, deaktivierte Schaltflächen, besuchte Links und Hover-Zustände fallen am häufigsten durch, weil sie beim Prüfen vergessen werden.

Womit gemessen wird

Im Browser: Rechtsklick auf den Text, Untersuchen, dann im Farbfeld der Entwicklerwerkzeuge. Chrome und Edge zeigen das Verhältnis direkt an, samt Hinweis auf AA und AAA.

Online: der Kontrastrechner von leserlich.info, der zusätzlich Schriftgröße und Schriftschnitt berücksichtigt und damit näher an der Praxis liegt als ein reiner Farbvergleich.

Über die ganze Seite: Erweiterungen wie die WAVE-Toolbar oder Lighthouse finden alle Stellen auf einmal. Sie übersehen allerdings Text auf Bildern und Zustände, die erst durch Bedienung entstehen.

Worauf es ankommt

• Farben einmal festlegen. Wer die Textfarben im Corporate Design prüft, muss sie später nicht auf jeder Unterseite einzeln korrigieren.
• Zustände mitprüfen. Platzhalter in Formularen, ausgegraute Schaltflächen und Beschriftungen auf Fotos fallen am häufigsten durch.
• Orange und Gelb sind heikel. Als Akzentfarbe auf Weiß reichen sie für Text selten, als Fläche mit dunkler Schrift funktionieren sie gut.
• Am Handy im Freien testen. Was am Monitor im Büro noch geht, ist draußen oft nicht mehr lesbar.

Häufige Fehler

• Weiße Schrift über ein Foto legen, ohne eine abdunkelnde Fläche dahinter.
• Nur die Grundfarben prüfen und Hover- oder Fokuszustände vergessen.
• Dünne Schriftschnitte einsetzen, die trotz ausreichendem Messwert schlecht lesbar sind.

Häufige Fragen

Verwandte Begriffe

Rouven Berz

Online-Marketing Freelancer aus dem Rhein-Main-Gebiet. Ich helfe Unternehmen dabei, sichtbar zu werden und aus Klicks Kunden zu machen.