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.
Fließtext in Hellgrau auf Weiß kommt auf 2,8 zu 1 und fällt durch. Ein etwas dunkleres Grau erreicht 4,6 zu 1 und besteht die Anforderung, ohne dass sich der Gesamteindruck der Seite verändert.
Verwandte Begriffe
WCAG
Die WCAG sind die internationalen Richtlinien für barrierefreie Webinhalte. Sie legen fest, was technisch als barrierefrei gilt.
Web & DesignAlt-Text
Ein Alt-Text beschreibt, was auf einem Bild zu sehen ist. Er hilft blinden Menschen beim Verstehen der Seite und sagt Google, worum es im Bild geht.
SEOBFSG
Das Barrierefreiheitsstärkungsgesetz verpflichtet seit Juni 2025 auch private Anbieter dazu, bestimmte digitale Angebote barrierefrei zu gestalten.
Web & Design
Online-Marketing Freelancer aus dem Rhein-Main-Gebiet. Ich helfe Unternehmen dabei, sichtbar zu werden und aus Klicks Kunden zu machen.
