Barrierefreiheit · Prüfpunkt
Welcher Farbkontrast ist für Text auf Websites vorgeschrieben?
Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text — ab etwa 24 Pixel oder fett ab etwa 18,7 Pixel — mindestens 3:1. Diese Schwellen stammen aus dem internationalen Standard WCAG. Sie stellen sicher, dass auch Menschen mit nachlassender Sehkraft Ihre Texte lesen können — und jeder Besucher bei Sonnenlicht am Handy.
Das Kontrastverhältnis, in Alltagssprache erklärt
Das Kontrastverhältnis beschreibt, wie stark sich Textfarbe und Hintergrundfarbe in ihrer Helligkeit unterscheiden. Schwarz auf Weiß erreicht den Höchstwert 21:1 und liest sich mühelos. Das modische Hellgrau auf Weiß liegt oft unter 3:1 — für Menschen mit altersbedingt nachlassender Sehkraft verschwimmt solcher Text zur grauen Fläche. Betroffen sind nicht nur Sehbehinderte: Auch der Kunde, der Ihre Öffnungszeiten bei Sonnenlicht am Handy sucht, scheitert an schwachen Kontrasten. Die Schwelle 4,5:1 für normalen Text und 3:1 für großen Text ist der im Standard festgelegte Kompromiss zwischen gestalterischer Freiheit und verlässlicher Lesbarkeit.
So misst unser Messkern den Kontrast — auch auf Bildern
Die Grundmessung übernimmt axe-core: Es berechnet für die Texte Ihrer Seite das Kontrastverhältnis aus Text- und Hintergrundfarbe. Bei Text auf Fotos oder Farbverläufen kann kein Werkzeug den Hintergrund einfach ablesen — genau dort geht unser Messkern weiter: Er schaltet den Text kurz unsichtbar, fotografiert die Stelle im Browser, berechnet die Helligkeit des tatsächlichen Hintergrunds Bildpunkt für Bildpunkt und ermittelt daraus den echten Kontrast gegen die Textfarbe. So wird aus „nicht entscheidbar“ ein belastbares Urteil. Jede durchgefallene Stelle dokumentiert der Bericht mit dem gemessenen Wert, der geforderten Schwelle und einem Beleg-Bildschirmfoto — Sie sehen also genau, welche Textstelle betroffen ist.
Kontrast verbessern, ohne das Design zu opfern
Gute Kontraste erzwingen kein Schwarz-Weiß-Design. Meist genügt es, die Textfarbe um wenige Stufen abzudunkeln — aus einem hellen Grau wird ein mittleres Anthrazit, das dieselbe Zurückhaltung ausstrahlt und trotzdem lesbar ist. Bei Text auf Fotos helfen bewährte Handgriffe: eine halbtransparente dunkle Fläche hinter dem Text, ein Farbverlauf am unteren Bildrand oder die Verlagerung des Textes auf eine ruhige Bildpartie. Ihre Markenfarben müssen Sie dafür in aller Regel nicht ändern — oft reicht es, sie für großflächige Hintergründe zu verwenden und für den Text eine dunklere oder hellere Variante derselben Farbfamilie zu wählen.
So gehen Sie es an
- Prüfen Sie die grauen Texte Ihrer Website zuerst — Fußzeilen, Bildunterschriften und Formularhinweise liegen am häufigsten unter der Schwelle.
- Bitten Sie Ihre Agentur, alle Textfarben gegen die Schwellen 4,5:1 und 3:1 zu prüfen und die Werte zu dokumentieren.
- Hinterlegen Sie Text auf Fotos mit einer halbtransparenten dunklen Fläche, statt die Lesbarkeit dem Bild zu überlassen.
- Betrachten Sie Ihre Seite bei hellem Tageslicht am Handy — was dort kippt, kippt für sehschwache Besucher immer.
- Legen Sie die geprüften Farbkombinationen in Ihrem Gestaltungshandbuch fest, damit neue Seiten sie übernehmen.
Häufige Fragen
Was bedeutet ein Kontrastverhältnis von 4,5:1?
Es besagt, dass die hellere Fläche viereinhalbmal so hell ist wie die dunklere. Schwarz auf Weiß erreicht 21:1, Weiß auf Weiß 1:1. Der Standard WCAG verlangt für normalen Text mindestens 4,5:1 und für großen Text mindestens 3:1, damit Texte auch bei nachlassender Sehkraft lesbar bleiben.
Ab wann gilt Text als groß im Sinne der Kontrastregel?
Ab etwa 24 Pixel Schriftgröße, bei fetter Schrift bereits ab etwa 18,7 Pixel. Für solchen großen Text genügt das mildere Kontrastverhältnis von 3:1, weil größere Buchstaben auch bei schwächerem Kontrast erkennbar bleiben. Unser Messkern berücksichtigt Schriftgröße und Schriftstärke bei jeder einzelnen Messung automatisch.
Wie wird der Kontrast bei Text auf einem Foto gemessen?
Unser Messkern schaltet den Text kurz unsichtbar, fotografiert die Stelle im Browser und berechnet die Helligkeit des Hintergrunds aus den einzelnen Bildpunkten. Gegen die Textfarbe ergibt sich daraus das echte Kontrastverhältnis. Durchgefallene Stellen dokumentiert der Bericht mit Messwert und Beleg-Bildschirmfoto.
Muss ich meine Markenfarben wegen des Kontrasts ändern?
In aller Regel nicht. Meist genügt es, die Markenfarbe für große Flächen zu nutzen und für Texte eine dunklere oder hellere Abstufung derselben Farbfamilie zu wählen. Viele bekannte Marken fahren genau diese Lösung: Die Wiedererkennung bleibt, die Texte erreichen die geforderten Schwellen.
Weiter im Prüfbereich Barrierefreiheit
- Muss sich Text auf einer Website auf 200 Prozent vergrößern lassen?Ja — Besucher müssen Text per Browser-Zoom verdoppeln können, ohne dass Inhalte verloren gehen. Zoom-Sperren am Handy verstoßen gegen die Regel.
- Warum ist echter Text auf Websites besser als Text im Bild?Text als Bild lässt sich weder vorlesen noch vergrößern noch von Google durchsuchen. Echter Text kann alles davon — und ist leichter zu pflegen.
- Wie bleibt eine Website am Handy ohne seitliches Scrollen lesbar?Inhalte müssen bei 320 Pixel Breite in eine Spalte umbrechen. Unser Messkern rendert die Seite in mehreren Breiten und misst den Überlauf.
- Welchen Kontrast brauchen Schaltflächen und Eingabefelder auf Websites?Bedienelemente und aussagekräftige Grafiken brauchen mindestens 3:1 Kontrast zur Umgebung — sonst findet ein sehschwacher Besucher das Eingabefeld nicht.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit — dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.