-
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.
Das Wichtigste in Kürze
Inhalt
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).
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.
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.
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.
Firefox Inspektor für Barrierefreiheit
Firefox biete dieses Funktionalität bereits von Haus aus mit dem Inspektor für Barrierefreiheit.
Diverse Disziplinen und Themen für eine bessere Zugänglichkeit von Inhalten im Web.
