Farbkontrast und WCAG: So wird Text gut lesbar

Hellgrauer Text auf Weiß wirkt in der Designdatei elegant, ist aber auf dem Handy in der Sonne, für ältere Augen oder bei Sehschwäche schwer zu lesen. Die Barrierefreiheitsrichtlinien WCAG machen aus „lesbar“ eine Zahl, die man prüfen kann.

Das Kontrastverhältnis

Kontrast ist ein Verhältnis von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß). Es beruht auf der relativen Leuchtdichte, also darauf, wie hell eine Farbe für das Auge wirkt, wobei Grün am stärksten und Blau am schwächsten zählt. Deshalb ist gelber Text auf Weiß fast unsichtbar, während Blau auf Weiß gut lesbar ist.

Die Schwellenwerte

                Normaler Text   Großer Text
AA  (Minimum)   4,5:1           3:1
AAA (erhöht)    7:1             4,5:1

Großer Text = mindestens 24px oder 18,66px fett

AA ist die Stufe, auf die sich die meisten Gesetze und Richtlinien zur Barrierefreiheit beziehen, also behandle sie als Minimum. AAA lohnt sich bei langen Lesetexten. Icons, Eingaberahmen und Fokusmarkierungen, die Informationen tragen, brauchen nach WCAG 2.1 mindestens 3:1.

Paare, die oft durchfallen

Grauer Platzhaltertext, weißer Text auf kräftigen Markenfarben wie Orange, Gelb oder Hellgrün und Text auf Fotos. Die Unterschiede können winzig sein: #777777 auf Weiß kommt auf etwa 4,48:1, knapp unter AA, während #767676 etwa 4,54:1 erreicht und besteht.

Schnelle Lösungen

Dunkle den Text oder den Hintergrund ein, zwei Stufen ab, statt den Farbton zu ändern; kleine Helligkeitsänderungen verschieben das Verhältnis stark. Mach Beschriftungen auf kräftigen Buttons groß und fett oder nimm dunklen statt weißen Text. Auf Fotos hilft eine dunkle Fläche hinter dem Text.

Kontrast ist nicht die einzige Farbregel

Die WCAG sagen auch, dass Farbe nicht das einzige Mittel sein darf, um Informationen zu vermitteln. Ein Formularfeld, das nur durch einen roten Rahmen als fehlerhaft markiert ist, oder ein Diagramm, das Linien nur über die Farbe unterscheidet, scheitert bei Menschen mit Farbsehschwäche, etwa jedem zwölften Mann. Ergänze ein Symbol, eine Textbeschriftung, ein Muster oder einen anderen Linienstil.

Dunkelmodus

Für dunkle Hintergründe gelten dieselben Verhältnisse. Reines Weiß auf reinem Schwarz erreicht 21:1, kann aber hart wirken und Buchstaben für manche Leser leuchten lassen; ein helles Grau auf sehr dunklem Grau besteht AA immer noch locker und ist beim langen Lesen angenehmer. Prüfe beide Themes, denn ein Paar, das im hellen Modus besteht, fällt nach dem Umkehren der Farben oft durch.

Text auf Bildern und Verläufen

Auf einem Foto oder Farbverlauf ändert sich der Hintergrund hinter jedem Buchstaben. Miss den Kontrast gegen den hellsten Teil des Hintergrunds hinter dem Text, nicht gegen den Durchschnitt. Eine halbtransparente dunkle Ebene oder ein fester Balken hinter dem Text macht das Ergebnis berechenbar.

Was als Nächstes kommt

Der Entwurf von WCAG 3 untersucht ein neues Kontrastverfahren namens APCA, das Schriftgröße und Schriftstärke genauer berücksichtigt. Es ist noch ein Entwurf: Gesetze und Prüfungen beziehen sich heute auf WCAG 2.1 und 2.2, die Schwellen von 4,5:1 und 3:1 bleiben also die, die du erfüllen musst.

Ein Farbpaar prüfen

Der Farbkontrast-Prüfer von 4Dev zeigt das Verhältnis für jede Text- und Hintergrundfarbe, mit Live-Vorschau und Bestanden oder Nicht bestanden für AA und AAA, für normalen und großen Text. Die Berechnung nutzt die WCAG-2-Formel und läuft in deinem Browser.

Farbkontrast-Prüfer öffnen