Barrierefreiheit wird Gesetz: Höchste Zeit für einen Kontraste-Check!
Mit dem baldigen Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) wird es für digitale Inhalte wichtig, den Richtlinien der Web Content Accessibility Guidelines (WCAG) zu entsprechen.
Ab dem 28. Juni 2025 unterliegen Dienstleistungen im elektronischen Geschäftsverkehr dem BFSG. Dies betrifft sämtliche geschäftlichen Transaktionen, die über eine Website abgewickelt werden können, wie E-Commerce, Kontaktaufnahme, Terminbuchung und andere Interaktionsmöglichkeiten, die auf den Abschluss eines Verbrauchervertrags (B2C) abzielen (Anmerkung: Hier gibt es auch kleinere Ausnahmen. Jeder sollte daher seinen spezifischen Fall rechtlich prüfen lassen, ob er die Richtlinien des Gesetzes einhalten muss).
Ein zentraler Punkt bei den Erfolgskriterien der WCAG ist der ausreichende Kontrast zwischen Text und Hintergrund sowie bei Formularen und Buttons.
Warum sind ausreichende Kontraste so wichtig?
Barrierefreiheit
Nutzer:innen mit Sehbehinderungen oder Farbfehlsichtigkeit sind auf einen klaren Kontrast angewiesen, um Inhalte wahrnehmen zu können. Ein unzureichender Kontrast erschwert das Lesen und die Interaktion erheblich, was zu Frustration führt. Im schlimmsten Fall können Inhalte gar nicht erkannt werden, was letztendlich zum Verlassen der Website bzw. zum Kaufabbruch führt.
Lesbarkeit
Auch bei anderen Faktoren, wie zum Beispiel schlechten Lichtverhältnissen oder der Wiedergabe digitaler Inhalte auf Endgeräten mit kleinen Bildschirmen (z. B. mobil), ist ein ausreichender Kontrast entscheidend. Dies ist für alle Nutzer:innen relevant, aber besonders wichtig im Hinblick auf die immer älter werdende Gesellschaft, da bekanntlich die Sehkraft im Alter nachlässt.
Conversion-Rate
Ein gut erkennbares und kontrastreiches Design verbessert die Nutzererfahrung insgesamt, was zu höheren Conversion-Rates führen kann. Wenn Nutzer:innen Texte leichter lesen und Formulare einfacher erkennen, ausfüllen und absenden können, steigt die Wahrscheinlichkeit, dass sie gewünschte Aktionen durchführen.
Was muss ich nach WCAG beachten?
Die WCAG definieren spezifische Kontrastverhältnisse für Text und Hintergründe, die je nach Konformitätslevel eingehalten werden sollten.
Bei normaler (oder kleiner) Textgröße: ein Kontrastverhältnis von mindestens 4,5:1.
Hier ein Negativ-Beispiel bei kleinem Text:
Beispiel für unzureichenden Farbkontrast: Weißer Text auf beigem Hintergrund verfehlt die WCAG-Anforderung für Lesbarkeit.
Bei großer Textgröße (mindestens 18 Punkt oder 14 Punkt fett): ein Kontrastverhältnis von mindestens 3:1.
Hier ein Negativ-Beispiel bei großem Text:
Der Schriftzug „UNSER BESTSELLER“ weist mit 1,78:1 ein zu niedriges Kontrastverhältnis auf und erfüllt keine WCAG-Anforderungen.
Für andere wichtige Elemente, wie z. B. interaktive Komponenten wie Buttons oder Formulare, gelten ähnliche Anforderungen, um sicherzustellen, dass diese auch bei verschiedenen Hintergrundfarben gut sichtbar bleiben.
Zum Beispiel taucht dieser Fehler auch häufig bei der Umrandung von Formularfeldern auf:
Das Eingabefeld „Gutschein einlösen“ weist ein zu geringes Kontrastverhältnis auf und erfüllt die WCAG-Anforderungen nicht.
Ausführlich beschrieben werden die Kontraste und Anforderungen bei den Erfolgskriterien, die hier auf der offiziellen Website des World Wide Web Consortium nachzulesen sind:
Das Erfolgskriterium 1.4.3 über minimale Farbkontraste kannst du hier einsehen
Das Erfolgskriterium 1.4.6 über erhöhte Farbkontraste kannst du hier einsehen
Das Erfolgskriterium 1.4.11 über Nicht-Text-Kontrast kannst du hier einsehen
3 Tipps zur allgemeinen Verbesserung des Kontrasts
Farben bewusst wählen
Achte darauf (vor allem bei der Erstellung neuer Inhalte), Farben mit ausreichendem Kontrast zu wählen. Wenn nötig, weiche von deinem Corporate Design (CI) ab, um die Nutzererfahrung zu verbessern.
Seine Vorauswahl kann man sehr gut bei webaim.org prüfen:
Klicke hier, um zum Contrast Checker zu gelangen!
Testen, testen, testen …
Nutze Tools wie WAVE, um den Kontrast deiner Inhalte zu überprüfen. Führe sowohl automatische als auch manuelle Tests durch, um sicherzustellen, dass alle Kriterien erfüllt sind. Hilfreich ist es auch, sich manche Sehbehinderungen durch Tools simulieren zu lassen, um Kontrastfehler besser nachvollziehen zu können.
Beispiel bei Kontrastfehler-Meldung aus dem Tool Wave:
Der Text „klimaregulierend durch“ weist laut Test mit 4,47:1 ein zu niedriges Kontrastverhältnis auf und ist schwer lesbar.
Weitere hilfreiche und geprüfte Tools bietet die offizielle Liste des World Wide Web Consortium (W3C):
Klicke hier, um zur Tool-Liste des W3C zu gelangen
Feedback von Betroffenen
Lass deine Inhalte von Nutzer:innen mit Sehbehinderungen testen und berücksichtige deren Feedback, um die Barrierefreiheit kontinuierlich zu verbessern.
Fazit
Das Sicherstellen ausreichender Kontraste auf deiner Website gemäß WCAG ist nicht nur eine gesetzliche Anforderung ab Juni 2025, sondern auch eine Möglichkeit, die Nutzererfahrung insgesamt zu verbessern.
Durch eine kontrastreiche Farbwahl, regelmäßige Tests und das Einbeziehen von Feedback kannst du sicherstellen, dass deine Website für alle Nutzer:innen zugänglich und benutzerfreundlich ist.
Daher solltest du nicht mehr lange mit der Umsetzung warten! Je früher, desto besser.
Natürlich gibt es neben der Kontrastverhältnisse noch eine Vielzahl an weiteren Erfolgskriterien, die erfüllt werden müssen, damit deine Website als barrierefrei gilt. Falls wir von Bloofusion deine Website gemäß den gesamten Erfolgskriterien der WCAG (bis zum Konformitätslevel AA) prüfen sollen, können wir dir gerne ein Accessibility-Audit anbieten.
Klicke hier, um weitere Informationen zu unserem Accessibility-Audit zu erhalten!