Dieses WCAG-Kriterium verlangt, dass der visuelle Kontrast zwischen Text (oder Textbildern) und ihrem Hintergrund mindestens 4,5:1 beträgt (für normalen Fließtext), bzw. mindestens 3:1 für Großtext (ab 18 pt normal oder 14 pt fett), damit Inhalte für Menschen mit Seheinschränkung ohne spezielle Hilfsmittel lesbar bleiben. Ausgenommen sind rein dekorative Texte, inaktive UI-Elemente, Texte in Bildern, die Teil eines größeren Bildes sind und Logos.
Tipps und Infos zur Umsetzung des WCAG-Kriterium 1.4.3
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriterium 1.4.3:
- Hintergrundinfo: Ein Kontrast ergibt sich aus dem Verhältnis von Vordergrund-Elementen wie Texte, Bilder, Schaltflächen oder Grafiken zur Hintergrundfarbe. Ein weißer Text auf weißem Hintergrund hat einen Kontrast von 1 zu 1. Ein schwarzer Text auf weißen Hintergrund hat einen Kontrast von 21 zu 1.
- Kontrastanforderungen für alle Zustände: Achte darauf, dass die Anforderungen für alle Zustände von interaktiven Elementen gelten (z.B. Zustände wie hover, focus, unvisited, visisted, active).
- Kontrastverhältnisse prüfen: Nutze Tools wie Color Contrast Checker (z. B. Browser-Extension WAVE von WebAIM), um das Verhältnis von Vorder- und Hintergrundfarbwerten (Hex / RGB) zu messen.
- Definition von Großtext beachten: Stelle sicher, dass du 18 pt (~24 px) regulären Text oder 14 pt (~18,5 px) fetten Text korrekt klassifizierst. Dann gilt eine Kontrastverhältnis (3:1) als Minimum. Allerdings macht es immer Sinn, ein höheres Kontrastverhältnis als Minimum wie 4,5:1 festzulegen.
- Hintergrundbilder abdunkeln: Wenn über einem Bild getextet wird, füge halbtransparente Overlays hinzu oder wähle einen Teil des Bildes mit ausreichendem Helligkeitsunterschied zum Text.
- Dekorative Textinhalte vermeiden: Verzichte auf Text als rein gestalterisches Element oder markiere diesen entsprechend als nicht-informativ (bspw. über aria-hidden).
- Alternative Kontrast-Version anbieten: Implementiere einen „High-Contrast“-Button oder Styleswitcher, der bei Bedarf eine Seite mit erhöhtem Kontrast lädt (z. B. 7 : 1), solange auch dieser Button selbst das Kriterium 1.4.3 erfüllt.
- CSS-Standards einhalten: Definiere sowohl Textfarbe als auch Hintergrundfarbe im CSS (nicht nur einen von beiden), damit Kontrastmess-Tools eindeutige Werte ermitteln können.
- AAA-Kriterium 1.4.6: Texte und Textbilder haben einen minimalen Kontrast von 7 zu 1. Bei großem Text reicht auch ein Kontrast von 4,5 zu 1.
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 1.4.3 Kontrast (Minimum).