Kontrastverhältnis – Barrierefreiheit Glossar

Was bedeutet Kontrastverhältnis?

Das Kontrastverhältnis gibt den Helligkeitsunterschied zwischen Vordergrund und Hintergrundfarben an, zum Beispiel bei Text und Hintergrund. Es ist ein zentrales Kriterium für die digitale Barrierefreiheit und insbesondere für Menschen mit Sehbehinderungen wichtig.

Laut den WCAG-Richtlinien gelten folgende Mindestanforderungen:

• Normaler Text: mindestens 4,5:1
• Großer Text (ab 18pt oder 14pt fett): mindestens 3:1
• Für hohe Barrierefreiheit (Stufe AAA): 7:1 für normalen Text

Ein zu geringer Kontrast kann Inhalte unleserlich machen oder die Augen unnötig belasten. Daher sollte das Kontrastverhältnis stets überprüft werden – z. B. mit Tools wie dem WCAG Contrast Checker. Schon kleine Anpassungen können eine große Wirkung auf die Nutzbarkeit haben.

Gemessen wird das Kontrastverhältnis als Zahl zwischen 1:1 (kein Unterschied) und 21:1 (Schwarz auf Weiß). Die WCAG verlangen auf Stufe AA mindestens 4,5:1 für normalen Text und 3:1 für großen Text sowie für wichtige Bedienelemente und Symbole. Stufe AAA fordert 7:1 beziehungsweise 4,5:1 für großen Text. Schon ein mittleres Grau auf Weiß fällt häufig durch.

Ein ausreichender Kontrast hilft nicht nur Menschen mit Sehbehinderung oder Farbfehlsichtigkeit. Auch bei Sonnenlicht auf dem Smartphone, auf schlechten Bildschirmen oder im Alter bleibt Text lesbar. Besonders kritisch sind helle Schriften auf Bildern, Platzhaltertexte in Formularfeldern und deaktivierte Schaltflächen, die dennoch Informationen tragen.

Prüfen können Sie Farbpaare mit Kontrastrechnern oder den Entwicklerwerkzeugen des Browsers. Legen Sie die geprüften Kombinationen in Ihrem Designsystem fest, damit Redaktion und Entwicklung nicht jedes Mal neu entscheiden müssen. Vergessen Sie dabei auch Zustände wie Hover und Fokus nicht, denn auch dort muss der Kontrast stimmen.

Praktisch hilft ein Blick auf Ihre Markenfarben: Ist die Hauptfarbe zu hell für Text, sollten Sie eine dunklere Variante für Schrift und Links definieren und die Originalfarbe nur für Flächen nutzen. So bleibt die Marke erkennbar, ohne dass Lesbarkeit leidet. Planen Sie die Prüfung am besten schon im Designprozess ein, denn spätere Farbänderungen sind aufwendiger und betreffen viele Komponenten gleichzeitig.

Kurz gesagt: Visuelles Kontrastverhältnis: Lesbarkeit & Barrierefreiheit.