Farbkontrast auf der Website: Mindestwerte nach WCAG und wie Sie sie einhalten

Kurz zusammengefasst

• Normaler Text braucht nach Stufe AA mindestens 4,5:1, großer Text mindestens 3:1.
• Stufe AAA verlangt 7:1 für normalen und 4,5:1 für großen Text.
• Bedienelemente und aussagekräftige Symbole brauchen 3:1 zu ihrer Umgebung.
• Markenfarben sind für Text oft zu hell. Behalten Sie sie für Flächen und legen Sie eine dunklere Variante für Schrift fest.
• Auch Platzhaltertext in Formularfeldern zählt als Text.

Was das Kontrastverhältnis misst

Das Kontrastverhältnis vergleicht die Helligkeit zweier Farben. Der kleinste mögliche Wert ist 1:1, dann sind beide Farben gleich hell. Den größten, 21:1, erreicht nur Schwarz auf Weiß. Nicht der Farbton ist entscheidend, sondern der Helligkeitsunterschied. Ein mittleres Rot auf einem mittleren Grün kann deshalb trotz kräftiger Farben schlecht lesbar sein, vor allem für Menschen mit Farbsehschwäche. Mit bloßem Auge ist das schwer zu beurteilen, besonders auf einem guten Monitor im abgedunkelten Büro. Draußen in der Sonne zeigt sich dann, dass das Grau doch zu blass war.

Die Werte nach WCAG

Die Web Content Accessibility Guidelines kennen zwei Konformitätsstufen für den Kontrast. Stufe AA, die in der Praxis meist angestrebt wird, verlangt 4,5:1 für normalen Text und 3:1 für großen Text. Die strengere Stufe AAA verlangt 7:1 und 4,5:1. Zusätzlich fordern die WCAG 3:1 für Elemente, die man zum Bedienen oder Verstehen braucht, etwa Rahmen von Eingabefeldern, Symbole ohne Beschriftung oder Diagramme. Ausgenommen sind Logos, rein dekorative Elemente und deaktivierte Bedienelemente.

Was als großer Text gilt

Als groß gilt Text ab 18 Punkt, bei fetter Schrift ab 14 Punkt. In Bildschirmpixeln sind das grob 24 beziehungsweise 19. Eine kräftige Überschrift darf also etwas blasser sein als der Fließtext darunter. Machen Sie davon aber sparsam Gebrauch, denn Lesbarkeit hängt auch von der Schriftart ab. Dünne Schnitte wirken bei gleichem Wert schwächer.

Markenfarben und Kontrast

Viele Firmenfarben stammen aus Logos und Drucksachen und wurden nie für Bildschirmtext ausgewählt. Das Pastellrosa einer Bäckerei, das leuchtende Orange eines Handwerksbetriebs oder der Goldton auf Creme in einem Kosmetikstudio erreichen als Schrift auf Weiß die Mindestwerte oft nicht. Das heißt nicht, dass die Farbe verschwinden muss. Sie eignet sich weiter für Flächen, Linien, Symbole und sehr große Überschriften.

Für Fließtext, Links und kleine Schrift legen Sie eine dunklere Textvariante derselben Farbfamilie fest. Auf farbigen Flächen funktioniert je nach Farbton helle oder dunkle Schrift besser. Passt keines von beiden, wird der Farbton angepasst, bis das Verhältnis stimmt. Sinnvoll ist eine kleine feste Palette: Textfarbe, Hintergrund, Akzent für Flächen, Akzent für Text und Links, Farbe für den Fokusrahmen. Das Logo selbst bleibt unverändert, denn es ist von der Regel ausgenommen.

Buttons

Bei Schaltflächen gibt es zwei Prüfungen. Die erste betrifft die Schrift auf dem Button: Sie braucht 4,5:1 zum Button-Hintergrund. Weiße Schrift auf einem gelben oder hellgrünen Button ist ein häufiger Fehler. Die zweite betrifft den Button selbst: Wenn nur die gefüllte Fläche ihn als Button kenntlich macht, sollte sie sich mit 3:1 vom Untergrund abheben. Ein hellgrauer Button auf weißem Grund fällt oft durch.

Prüfen Sie außerdem die Zustände. Beim Darüberfahren, beim Anklicken und bei der Bedienung mit der Tastatur dürfen Kontrast und Lesbarkeit nicht verloren gehen. Der Fokusrahmen sollte deutlich sichtbar sein, ebenfalls mit 3:1 gegenüber seiner Umgebung.

Platzhaltertext und Eingabefelder

Platzhalter in Formularfeldern, etwa „Ihre E-Mail-Adresse“, sind meist in hellem Grau gesetzt, damit sie sich vom Eingegebenen abheben. Für die WCAG ist das Text wie jeder andere, er braucht 4,5:1. Hinzu kommt ein praktisches Problem: Der Platzhalter verschwindet, sobald man tippt, und wer abgelenkt wird, weiß dann nicht mehr, was das Feld verlangt. Setzen Sie deshalb immer eine eigene Beschriftung über das Feld und verstehen Sie den Platzhalter höchstens als Beispiel. Auch der Rand des Feldes sollte sich mit 3:1 vom Hintergrund abheben.

Text auf Bildern und Verläufen

Liegt Text auf einem Foto, ändert sich der Kontrast von Stelle zu Stelle. Prüfen Sie ihn an der Stelle, an der das Bild hinter dem Text am hellsten oder am dunkelsten ist, je nach Schriftfarbe. Zuverlässiger sind eine halbtransparente dunkle Fläche zwischen Bild und Text oder eine Schriftbox mit eigenem Hintergrund. Bei Verläufen gilt dasselbe: Der schwächste Punkt entscheidet.

Weitere Stolperfallen

• Links, die man im Fließtext nur an ihrer Farbe erkennt. Eine Unterstreichung hilft allen.
• Fehlermeldungen, die nur rot sind und keinen Text enthalten.
• Graue Fußzeilen mit kleiner Schrift, in denen Impressum und Datenschutz stehen.
• Diagramme, die Datenreihen nur über Farbe trennen.
• Eine dunkle Darstellung, die vom Betriebssystem eingestellt werden kann und nie geprüft wurde.

So gehen Sie vor

• Notieren Sie alle Farben Ihrer Seite mit ihren Farbwerten.
• Prüfen Sie die Kombinationen, die tatsächlich vorkommen: Text auf Hintergrund, Links, Buttons, Fußzeile, Felder.
• Passen Sie durchfallende Farben an und tragen Sie die neuen Werte zentral im Stylesheet ein.
• Kontrollieren Sie Hover-, Fokus- und aktive Zustände.
• Sehen Sie sich die Seite auf einem Smartphone bei hellem Licht an.

Werte selbst prüfen

In den kostenlosen Kontrast-Checker tragen Sie Text- und Hintergrundfarbe als Hex-Wert ein oder wählen sie mit der Farbauswahl. Er zeigt das Verhältnis, eine Vorschau und ob die Werte für normalen und großen Text nach AA und AAA sowie die 3:1 für Bedienelemente erreicht sind. Liegt das Ergebnis unter 4,5:1, schlägt er je nach Hintergrund eine dunklere oder hellere Variante der Textfarbe vor. Gerechnet wird nur in Ihrem Browser, die Farben gehen nicht an bemuar.com. Halbtransparente Farben und Text auf Fotos kann er nicht auswerten. Messen Sie dort die Farbe an der kritischen Stelle mit einer Pipette und tragen Sie diesen Wert ein. Der Barrierefreiheits-Check misst keine Farbkontraste. Mehr zum Rahmen steht bei Barrierefreiheit der Website.

Sie planen eine neue Website mit Ihren Firmenfarben? Wie Bemuar dabei vorgeht, steht unter Webdesign. Den Festpreis erhalten Sie vor dem Start schriftlich.