WCAG 2.1 - 1.4.3
Contrast (Minimum)
Die visuelle Darstellung von Text und Bildern von Text hat ein Kontrastverhältnis von mindestens 4,5:1, mit Ausnahme der folgenden:
Inhalt
Was steht in den Guidelines zum Success Criterium 1.4.3 - Contrast (Minimum)?Was Bedeutet das Success Criterium 1.4.3 - Contrast (Minimum)?Warum ist es so wichtig, das Success Criterium 1.4.3 - Contrast (Minimum) zu beachten?Was hat das Success Criterium 1.4.3 - Contrast (Minimum) mit dem BFSG zu tun?Lösungen für 1.4.3 - Contrast (Minimum) anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 1.4.3 - Contrast (Minimum)?Was steht in den Guidelines zum Success Criterium 1.4.3 - Contrast (Minimum)?
Implementationshinweise
- Large Text: Großflächiger Text und Bilder mit großflächigem Text haben ein Kontrastverhältnis von mindestens 3:1;
- Incidental: Text oder Bilder von Text, die Teil eines inaktiven Benutzeroberflächenkomponenten sind, die reine Dekoration darstellen, die für niemanden sichtbar sind oder die Teil eines Bildes sind, das bedeutende andere visuelle Inhalte enthält, haben keine Kontrastanforderung.
- Logotypes: Text, der Teil eines Logos oder Markennamens ist, hat keine Kontrastanforderung.
Was Bedeutet das Success Criterium 1.4.3 - Contrast (Minimum)?
Das Success Criterion 1.4.3 – Contrast (Minimum) der WCAG schreibt vor, dass Texte und deren Hintergrund einen ausreichenden Kontrast aufweisen müssen. Konkret bedeutet das: Der Kontrast zwischen dem Text (inklusive Symbolen, die wie Text wirken) und dem Hintergrund muss mindestens ein Verhältnis von 4,5:1 haben. Für großen Text (mind. 24px oder 19px fett) gilt ein Mindestkontrast von 3:1. Ausgenommen sind bei dieser Regel dekorative Texte oder Logos.
Vereinfacht gesagt: Nutzerinnen und Nutzer mit eingeschränktem Sehvermögen, Sehschwächen, Farbenblindheit oder bei schlechten Lichtverhältnissen müssen Inhalte problemlos lesen können. Zu geringer Kontrast erschwert das und sorgt dafür, dass wichtige Inhalte verloren gehen können.
Warum ist es so wichtig, das Success Criterium 1.4.3 - Contrast (Minimum) zu beachten?
Viele Menschen haben eine eingeschränkte Sehfähigkeit oder sind altersbedingt auf größere Kontraste angewiesen. Wird der Kontrast nicht eingehalten, sind Inhalte schwer lesbar – das betrifft Menschen mit Sehbehinderung, farbabschwache Nutzerinnen sowie Personen, die Displays bei starkem Sonnenlicht verwenden. Die Einhaltung der Kontrastanforderung ist essenziell, damit alle Nutzerinnen und Nutzer unabhängig von ihren Fähigkeiten und Umständen den Inhalt wahrnehmen und verstehen können.
Was hat das Success Criterium 1.4.3 - Contrast (Minimum) mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die EU-Richtlinie um und verlangt von allen öffentlichen Stellen sowie zahlreichen privaten Anbietern (z.B. Onlineshops), dass digitale Angebote barrierefrei sind. Die WCAG ist dabei der anerkannte Standard für die technische Umsetzung. Nicht ausreichender Kontrast ist ein sehr häufiger Verstoß gegen die Barrierefreiheit und führt klar zu einem Nicht-Bestehen nach BFSG. Da Betroffene in der Wahrnehmung der Inhalte behindert werden, ist eine Website ohne ausreichenden Kontrast nicht BFSG-konform.
Lösungen für 1.4.3 - Contrast (Minimum) anhand von Codebeispielen
Falscher Code
<p style="color: #CCCCCC; background-color: #FFFFFF;">Schlechter Kontrast – schwer lesbar!</p>Korrekter Code
<p style="color: #000000; background-color: #FFFFFF;">Sehr guter Kontrast – gut lesbar!</p>Der schlechte Code verwendet hellgrauen Text auf weißem Hintergrund. Das ergibt einen zu niedrigen Kontrast (< 4,5:1). Der gute Code nutzt schwarzen Text auf weißem Hintergrund (Kontrast 21:1), was sehr gut lesbar ist.
Falscher Code
<button style="color: #5a5a5a; background-color: #bbbbbb;">Jetzt buchen</button>Korrekter Code
<button style="color: #FFFFFF; background-color: #0072ce;">Jetzt buchen</button>Der Button im schlechten Beispiel verwendet dunkles Grau auf mittelgrauem Hintergrund – der Text ist kaum noch lesbar. Im guten Beispiel steht weißer Text auf kräftigem Blau, das den Mindestkontrast deutlich übertrifft.
Wie löse ich Verstöße gegen das Success Criterium 1.4.3 - Contrast (Minimum)?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.