Accessibility – Teil 2: Kontraste

von Patrick Durrer

    Das Wichtigste in Kürze

  • Wie viel Kontrast ist genug?
    Die Web Content Accessibility Guidelines empfehlen ein Kontrastverhältnis von mindestens 4.5:1 für Fliesstexte und 3:1 für Titel.
  • Wie viel Kontrast ist gut?
    Um die Lesbarkeit wirklich sicherzustellen sollte ein Kontrastverhältnis von 7:1 bei Fliesstexten und 4.5:1 bei Titeln angestrebt werden.

Kontraste

Ein hoher Kontrast zwischen Text und Hintergrund garantiert die optimale Lesbarkeit der Inhalte. Dabei profitieren nicht nur Personen mit einer Sehschwäche (permanente Einschränkung) von einem hohen Kontrast, sondern auch Besucher mit einem normalen Sehvermögen. Spätestens wenn die Sonne auf das Smartphone-Display scheint (situative Einschränkung), freut sich der Besucher über klare Kontraste.

Wie viel Kontrast ist gut?

Doch wie viel Kontrast ist genug? Was ist ein hoher Kontrast? Ab wann ist ein Kontrast zu gering? Diese Fragen werden vom Web Content Accessibility Guidelines (WCAG) 2.0 mit einer Skala für das Kontrastverhälntnis beantwortet. Das Kontrastverhältnis von zwei Farben liegt dabei zwischen 1:1 und 21:1.

  • 1:1 = Minimales Kontrastverhältnis = Die verglichenen Farben sind identisch.
  • 21:1 = Maximales Kontrastverhälntnis = Schwarzer Text auf weissem Hintergrund (oder umgekehrt).
Minimale und maximale Kontraste auf der WCAG-Kontrast-Skala.
Minimale und maximale Kontraste auf der WCAG-Kontrast-Skala.

Die WCAG empfiehlt dabei einen minimales Kontrastverhälntnis von 4.5:1 zwischen einem Hintergrund und dem darauf platzierten Text. Dieses Verhältnis trifft bei Text zu, der kleiner ist als 24 Pixel (& nicht fett geschrieben) und bei einem Text, der kleiner ist als 19 Pixel (& fett geschrieben). Für grössere Texte ist ein Verhältnis von 3:1 ausreichend.

Aber Achtung: Dies sind jedoch nur minimal Anforderungen. Um den Kontrast noch weiter zu verbessern, sollte ein Kontrastverhältnis von 7:1 bei normalem Text und 4.5:1 bei fettem Text anvisiert werden.

Minimale und maximale Kontraste auf der WCAG-Kontrast-Skala.
Minimale und maximale Kontraste auf der WCAG-Kontrast-Skala.

Um das Verhältnis des Kontrastes zwischen zwei Farben zu messen, können diese einfach in einen der vielen Online-Kontrastrechner eingegeben werden.

Kontrastrechner von Lea Verou
contrast ratio - Hier können einfach zwei Farben eingetragen werden, und das Kontrastverhältnis wird berechnet.

contrast-ratio von Lea Verou
Das Tool zeigt das berechnete Kontrastverhältnis von zwei Farben.

Google Lighthouse
Das Toolkit Google Lighthouse testet die Kontraste für die ausgewählte URL und listet die entsprechenden Elemente mit zu geringem Kontrast auf.

contrast-ratio von Lea Verou
Accessibility-Bericht von Google Lighthouse.

Firefox Inspektor für Barrierefreiheit
Firefox biete dieses Funktionalität bereits von Haus aus mit dem Inspektor für Barrierefreiheit.

contrast-ratio von Lea Verou
Inspektor für Barrierefreiheit.
Mehr aus dieser Serie
Accessibility

Diverse Disziplinen und Themen für eine bessere Zugänglichkeit von Inhalten im Web.

Weitere Beiträge anzeigen »

Los geht's!

Kontaktiere uns noch heute

Für Offerten, technische Anfragen oder einfach nur um Hallo zu sagen.

Wir verwenden Cookies um die Performance unserer Website zu messen. Möchtest du diese Cookies akzeptieren?