Prüfpunkt 1.4.3Stufe AAFarbe und Kontrast
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.
Beispiele
Grauer Fließtext auf Weiß
body { color: #999999; background: #ffffff; } /* 2,8:1 */body { color: #595959; background: #ffffff; } /* 7,0:1 */Die Grenze für normalen Text ist 4,5:1, für großen Text ab 24 Pixel 3:1. Der Wert steht im Prüfbericht je Fundstelle.
Weiße Schrift auf Markenfarbe
.knopf { color: #fff; background: #5aa9ff; } /* 2,5:1 */.knopf { color: #fff; background: #1a5fb4; } /* 6,3:1 */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.
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.
Foto: Alex Mihis, CC0
.jpg){kind=link}