Farbkontraste für Sehbehinderte: Best Practices

Ich prüfe bei Farbkontrasten zuerst drei Zahlen: 4,5:1, 3:1 und nochmals 3:1. Damit sehe ich in kurzer Zeit, ob Text, Links, Buttons, Fokusrahmen und Grafiken die WCAG-2.1-AA-Werte einhalten.

Wenn ich es ganz einfach sage: kleiner Text braucht 4,5:1, grosser Text 3:1, und UI-Elemente wie Buttons, Formularrahmen, Icons oder Fokus-Indikatoren ebenfalls 3:1. Dazu prüfe ich immer, ob Farbe nie allein eine Info trägt. Das trifft Fehler, Pflichtfelder, Status und Diagramme direkt.

Ich fasse die Prüfung so zusammen:

• Text prüfen: Fliesstext, kleine Hinweise und Placeholder mit Anweisungsfunktion brauchen 4,5:1
• Grossen Text prüfen: ab 24 px oder ab 18,7 px fett reichen 3:1
• Links prüfen: gegen den Hintergrund 4,5:1; wenn nur Farbe Links vom Fliesstext trennt, zusätzlich 3:1 zum Fliesstext
• Buttons und Formulare prüfen: Rahmen, Flächen und Auswahlmarken brauchen 3:1
• Fokus prüfen: :focus, :hover und :active immer einzeln messen
• Icons und Grafiken prüfen: bedeutungstragende Icons und Diagrammteile brauchen 3:1
• Fehler und Status prüfen: nie nur rot, grün oder eine andere Farbe nutzen
• Bilder und Verläufe prüfen: nicht die schönste Stelle messen, sondern die schwächste
• Tests ergänzen: Tools wie axe oder Lighthouse helfen, ersetzen aber keine Sichtprüfung auf echten Geräten

Mein Kurzfazit: Wenn ich diese Punkte sauber prüfe und freigegebene Farbkombinationen im Design-System festhalte, sinkt das Risiko für schlecht lesbare Oberflächen deutlich. Laut WCAG liegt der messbare Bereich zwischen 1:1 und 21:1 - und viele Probleme starten schon bei hellem Grau auf Weiss.

Damit ist der Kern des Artikels schon klar: Kontrast messen, Zustände einzeln prüfen, Farbe nie als einziges Signal nutzen und getestete Farbpaare festhalten.

Kontrastanforderungen vor der Checkliste

Ein Kontrastverhältnis zeigt, wie stark sich Vordergrund und Hintergrund in ihrer Helligkeit unterscheiden, also zum Beispiel Text und Hintergrundfläche. Die Skala reicht von 1:1 für keinen Unterschied bis 21:1 für Schwarz auf Weiss. Entscheidend ist dabei die Luminanz, nicht der Farbton. Zwei Farben können komplett verschieden wirken und trotzdem zu wenig Unterschied in der Helligkeit haben. Genau auf diesen Werten bauen die Prüfungen in der Checkliste auf.

Zu schwache Farbkontraste gehören zu den häufigsten Fehlern im Web. Das passiert schnell: Ein Design sieht auf den ersten Blick gut aus, scheitert aber im Alltag, weil Texte, Buttons oder Icons schwer erkennbar sind.

WCAG 2.1: Mindestwerte für Text und UI-Elemente

WCAG 2.1 teilt die Prüfung in drei Gruppen ein:

• Normaler Text (< 24 px bzw. < 18,7 px fett): mindestens 4,5:1
• Grosser Text (ab 24 px oder ab 18,7 px fett): mindestens 3:1
• UI-Komponenten wie Buttons, Formularrahmen, Icons und Fokusindikatoren: mindestens 3:1 gegenüber der angrenzenden Farbe

Für normalen Text gilt also 4,5:1 als Untergrenze. Bei sehr feinen Schriften hilft oft schon ein etwas klarerer Schriftschnitt. Dünne Haarlinien sehen schick aus, machen das Lesen aber oft mühsam. Auf dieser Basis lassen sich die Checklisten für Text, Bedienelemente und visuelle Inhalte direkt anwenden.

Ausnahmen – und Zustände, die trotzdem geprüft werden müssen

Dekorative Elemente, inaktive Controls ohne Informationswert und Logos ohne funktionale Rolle sind ausgenommen. Trotzdem solltest du :hover, :focus und :active immer einzeln prüfen. Genau dort rutschen viele Interfaces durch, weil sich Farben im aktiven Zustand ändern und der Kontrast plötzlich nicht mehr reicht.

Auch Platzhalter mit Anweisungsfunktion brauchen 4,5:1. Sobald Placeholder-Text also mehr ist als bloss eine optische Hilfe, zählt er wie normaler Text.

Die Ausnahmen sind damit klar abgesteckt. Die Tabelle unten fasst die Grenzwerte kompakt zusammen.

Tabelle: Mindestkontrastwerte nach Elementtyp

Im nächsten Abschnitt folgt die Prüfung der Inhalte, zuerst bei Texten, Links und Hintergründen.

sbb-itb-ec9488d

Checkliste: Text, Links und Hintergründe

Die Grenzwerte sind geklärt. Jetzt geht’s an die praktische Prüfung von Inhalten und Hintergründen.

Fliesstext, Überschriften und Links auf Kontrast prüfen

Prüfe Fliesstext und Überschriften immer gegen die festgelegten WCAG-Grenzwerte.

Bei Links reicht es nicht, wenn sie irgendwie andersfarbig sind. Sie müssen sich klar vom Fliesstext abheben. Ist Farbe das einzige Unterscheidungsmerkmal, braucht es ein Kontrastverhältnis von 3:1 zwischen Linkfarbe und Textfarbe. Am einfachsten klappt das meist mit einer Unterstreichung.

Auch die Zustände rund um Links und andere klickbare Elemente solltest du einzeln prüfen:

• Hover
• Fokus
• Active

Gerade hier passieren oft kleine Fehler, die man im Alltag leicht übersieht.

Schwache Farbkombinationen und Text über Bildern vermeiden

Gedämpfte Farben auf hellem Hintergrund sind heikel. Vor allem helle Grau-, Blau- und Beigetöne sehen auf den ersten Blick oft sauber aus, fallen beim Kontrast aber durch. Darum diese Farbkombinationen immer mit einem Kontrast-Checker testen.

Nicht nur die Schriftfarbe zählt. Auch der Hintergrund hat grossen Einfluss auf die Lesbarkeit. Text auf Fotos, Verläufen oder Mustern ist oft ein Wackelkandidat. Mal passt der Kontrast, mal kippt er je nach Bildbereich. Sicherer sind einfarbige Flächen oder halbtransparente Hintergründe, damit der Kontrast stabil bleibt.

Farbe darf nie das einzige Mittel sein, um Informationen, Aktionen oder Zustände zu unterscheiden.

Tabelle: Häufige Inhaltselemente und Mindestkontrastwerte

Als Nächstes prüfst du Buttons, Formulare, Icons und Datenvisualisierungen.

Checkliste: Buttons, Formulare, Icons und Datenvisualisierungen

Bedienelemente und Fokus-Indikatoren klar sichtbar halten

Bei Buttons, Eingabefeldern, Checkboxen, Toggles und Radiobuttons gilt WCAG 1.4.11 ganz klar: Alle Rahmen, Flächen und Auswahlmarkierungen brauchen ein Kontrastverhältnis von mindestens 3:1 zum direkt angrenzenden Hintergrund.

Das gilt nicht nur im Standardzustand, sondern auch bei Hover und Fokus. Wenn ein Hover-Zustand sichtbar hervorgehoben wird, muss auch er diesen Wert erreichen.

Besonders wichtig ist der Fokus-Indikator. Wenn in einem Projekt outline: none entfernt wird, braucht es einen Ersatz, der gleich gut funktioniert und ebenfalls mindestens 3:1 Kontrast hat. Mit :focus-visible lässt sich der Fokusring für Tastaturnutzende anzeigen, ohne ihn bei jedem Maus-Klick einzublenden. Das ist oft der sauberste Weg.

Ein Punkt, der gern übersehen wird: Dünne 1-px-Rahmen sehen in der Praxis oft schwächer aus, als es die reine Berechnung vermuten lässt. Der Grund ist Antialiasing. Deshalb sind 2 px Strichstärke oder ein noch höherer Kontrast oft die bessere Wahl.

Und noch etwas: Nicht nur Bedienelemente selbst müssen klar erkennbar sein. Auch Fehler und Statusanzeigen dürfen nicht nur über Farbe laufen.

Status, Fehler und Bedeutung nicht nur durch Farbe vermitteln

Farbe allein reicht nie aus, wenn Informationen oder Zustände vermittelt werden. Eine Fehlermeldung braucht darum immer noch etwas Zweites dazu: Text, ein Icon oder beides. Dasselbe gilt für Pflichtfelder, Statusanzeigen und Diagramme.

Bei Datenreihen helfen Muster, Schraffuren oder direkte Beschriftungen. Das ist simpel, aber wirksam. Ein schneller Graustufentest zeigt meist sofort, ob ein Interface auch ohne Farbe noch verständlich bleibt.

Die wichtigsten Punkte dazu zeigt die Tabelle:

Tabelle: UI-Komponenten und Nicht-Text-Kontrastprüfung

Checkliste: Testen, Dokumentieren und Pflegen

Kontraste mit Tools, Graustufen und echten Geräten prüfen

Automatisierte Tools wie axe-core, Lighthouse oder pa11y gehören in die CI/CD-Pipeline. Das spart Zeit und findet viele Fehler früh. Aber: Solche Tools sehen nicht alles. Manuelle Prüfungen bleiben Pflicht.

Danach folgen Sichtprüfungen für Punkte, die Tools oft nicht sauber erfassen. Sinnvoll ist ein Graustufentest oder ein grayscale-Filter. Inhalte und Bedienelemente müssen auch ohne Farbe klar unterscheidbar bleiben. Simulatoren für Rot-Grün-Schwächen helfen zusätzlich. So lässt sich prüfen, ob Statusanzeigen wie rote und grüne Punkte auch dann klar sind, wenn die Farbe als Signal wegfällt. Bei Bildern und Verläufen zählt nicht der schönste Bereich, sondern der schwächste. Genau dort muss der Kontrast geprüft werden.

Im nächsten Schritt geht es raus aus der Theorie. Dieselben Inhalte sollten unter echten Nutzungsbedingungen geprüft werden. Teste Kontraste auf verschiedenen Geräten und direkt im Einsatz. Auf mobilen Geräten oder bei Sonnenlicht kann der wahrgenommene Kontrast spürbar sinken.

Freigegebene Farbpaare dokumentieren und in den Workflow einbauen

Kontrastprobleme tauchen oft nicht beim ersten Entwurf auf, sondern später im Alltag. Etwa dann, wenn Redaktions- oder Marketing-Teams neue Inhalte anlegen, Banner bauen oder bestehende Farben ändern. Deshalb sollten freigegebene Farbkombinationen im Design-System, in Design-Tokens oder im Styleguide festgehalten werden.

Wichtig ist dabei:

• welche Farbpaare freigegeben sind
• wie sie geprüft wurden
• welche Ausnahmen gelten

So arbeiten Designer, Entwickler und Content-Teams mit denselben geprüften Werten. Ist das einmal sauber festgelegt, muss es im Tagesgeschäft konsequent genutzt werden.

Fazit: Die Kontrastprüfungen, die jede Website bestehen sollte

Wer diese Checkliste konsequent nutzt, deckt die wichtigsten Punkte ab: WCAG-Schwellenwerte für Text und Nicht-Text-Elemente einhalten, Farbe nie als einziges Kommunikationsmittel einsetzen, Fokus-Indikatoren sichtbar halten und Kontraste regelmässig testen. Prüfen, freigeben, dokumentieren, wiederholen. Zugängliche Kontraste sind die Basis für Websites, die sich gut nutzen lassen.

FAQs

Wie messe ich Farbkontrast korrekt?

Messen Sie Farbkontraste mit einem Kontrast-Analyse-Tool. Solche Tools berechnen den Helligkeitsunterschied zwischen Vorder- und Hintergrundfarben und zeigen, ob die Grenzwerte der WCAG 2.1 eingehalten werden.

• Fliesstext: mindestens 4,5:1
• Grosser Text: mindestens 3:1
• Interaktive UI-Elemente und Grafiken: mindestens 3:1

Für Level AAA gelten 7:1 für normalen Text und 4,5:1 für grossen Text.

Wann gilt Text als grosser Text?

Nach den WCAG gilt Text als gross, wenn er mindestens 18 pt (rund 24 px) misst oder ab 14 pt (rund 18,7 px) fett gesetzt ist.

Für diesen Text genügt ein Kontrastverhältnis von mindestens 3:1. Bei normalem Text liegt die Vorgabe für Stufe AA dagegen bei mindestens 4,5:1.

Das ist ein wichtiger Unterschied. Grössere oder fette Schrift lässt sich meist leichter lesen, darum ist hier etwas weniger Kontrast erlaubt. Bei kleinerem Fliesstext braucht es mehr Kontrast, damit der Inhalt gut erkennbar bleibt.

Was tun bei Text auf Bildern?

Text in Bildern muss dieselben Kontrastregeln erfüllen wie normaler Text: mindestens 4,5:1. Für grossen Text – ab 18 pt oder 14 pt fett – gilt 3:1.

Es gibt nur wenige Ausnahmen:

• Logos
• Markennamen
• inaktive Elemente
• dekorative Grafiken

Der Punkt ist simpel: Text in Bildern ist für Screenreader oft schwerer zugänglich. Darum empfiehlt Hyperpage, Inhalte wenn möglich als echten HTML-Text umzusetzen.

Verwandte Blogbeiträge

• Webdesign für Schweizer Firmen: 7 wichtige Schritte zum Erfolg
• Checkliste: Barrierefreiheit für Schweizer Websites
• E-Commerce Usability: Best Practices 2026
• WCAG-Standards: Was sie für Websites bedeuten