Was ausreichender Kontrast ist
Kontrast ist der Helligkeitsunterschied zwischen Text und Hintergrund. Normaler Text braucht mindestens 4,5:1, große Schrift 3:1, damit ihn auch Menschen mit Sehschwäche lesen können.
So funktioniert es
Das Kontrastverhältnis vergleicht die Helligkeit zweier Farben. Es reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß). Der Farbton spielt dabei keine Rolle, nur die Helligkeit, wie sie das Auge wahrnimmt.
Blassgrauer Text auf Weiß sieht elegant aus, ist aber für viele schwer zu lesen: mit Sehschwäche, im Alter, auf einem billigen Bildschirm oder draußen in der Sonne. Ein paar Beispiele auf weißem Grund:
#999999erreicht 2,8:1 und ist für normalen Text zu blass.#767676erreicht 4,5:1, das ist das hellste Grau, das noch reicht.#595959erreicht 7:1.
WCAG 2.2 legt die Werte in Kriterium 1.4.3 fest. Für BFSG und BITV 2.0 ist in der Praxis die Norm EN 301 549 maßgeblich; sie übernimmt die Kriterien der WCAG 2.1 auf Stufe AA, darunter 1.4.3.
Worauf es ankommt
- 4,5:1 für normalen Text. Das gilt für Fließtext, Links, Beschriftungen und Text in Buttons.
- 3:1 für große Schrift. Groß heißt ab 24 Pixel, fett ab 18,7 Pixel (18 und 14 Punkt).
- Text auf Bildern und Verläufen. Hier lässt sich der Kontrast nicht automatisch messen; er muss an der ungünstigsten Stelle hinter dem Text reichen. Eine halbtransparente Fläche hinter dem Text hilft.
- Ausnahmen. Logos, rein dekorativer Text und deaktivierte Bedienelemente müssen den Wert nicht erreichen.
- Mehr als Text. Für Rahmen von Eingabefeldern, Icons und Fokusrahmen verlangt Kriterium 1.4.11 mindestens 3:1. Das misst dieser Test nicht, es gehört aber zum selben Thema.
So richtest du es ein
Farben legt das Design fest, im besten Fall an einer Stelle: im Design-System, in den Farbeinstellungen des Themes oder in CSS-Variablen. Ändere sie dort, dann ändern sie sich überall. Der Report schlägt für jede zu blasse Farbe eine vor, die denselben Farbton hat und gerade dunkel genug ist (auf dunklem Grund: hell genug). Stimm die Änderung mit dem ab, der das Design verantwortet, und prüf danach auch Zustände wie Hover und Platzhalter. Einzelne Stellen im Inhalt, etwa farbig gesetzter Text im Editor, änderst du im CMS.