Kontraste optimieren? Ja, ist so wichtig – weil es zur Verbesserung der Website-Usability beiträgt. Vor wenigen Tagen haben wir für unseren Kunden Stadtwerk Tauberfranken einen kleiner, aber feinen Website-Relaunch umgesetzt. Ziel war es dieses Mal nicht, die Seite komplett neu aufzusetzen. Stattdessen wollten wir die Seite in Abstimmung mit dem Kunden vor allem technisch auf den neuesten Stand bringen und daneben in puncto Usability einige Details gezielt optimieren.
Eine der dabei vorgenommenen Maßnahmen: die Optimierung der Farbkontraste!
Was zunächst nach einem eher unbedeutenden Detail klingen mag, hat nämlich tatsächlich eine ganz entscheidende Bedeutung – sowohl für die Verbesserung der Barrierefreiheit als auch was die grundsätzliche Usability betrifft.
Denn: Wer Kontraste optimiert, sorgt dadurch dafür, dass Inhalte besser wahrgenommen, schneller verstanden und leichter bedient werden können!
Warum sind Kontrastverhältnisse so wichtig?
Farbkontraste beeinflussen unmittelbar, wie gut Textinhalte, Buttons oder interaktive Elemente wahrgenommen werden – und das nicht nur von Menschen mit Sehbeeinträchtigungen. Auch alle anderen Nutzer, vor allem bei grellem Umgebungslicht oder immer dann, wenn kleinere Screens (zum Beispiel mobil) genutzt werden, profitieren davon, wenn sich Inhalte klar abheben.
Laut einer Studie der Web Accessibility Initiative (WAI) sollten Texte z. B. ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund aufweisen, um gut lesbar zu sein. Für größere Schriften genügt ein Verhältnis von 3:1. Viele Websites erfüllen diese Anforderungen jedoch beide nicht – was zu schlechterer Lesbarkeit und höheren Absprungraten führen kann!
Messbar besser – mit professionellen Tools
Ob eine Website über ausreichende Kontraste verfügt, lässt sich im Rahmen einer Optimierung, wie wir sie jetzt durchgeführt haben, mit speziellen Tools exakt bestimmen. Eingesetzt werden können dafür etwa der „Colour Contrast Analyser“ (TPGi), das WAVE Evaluation Tool oder die Browser-Erweiterung „axe DevTools“ – um nur einige Tools zu nennen.
Besonders spannend dabei: Selbst Kontraste, die auf den ersten Blick (mit bloßem Auge) relativ kräftig wirken, zeigen in diesen Analysen häufig überraschende Schwächen. So fallen etwa viele Hellgrau-Textelemente durch, ebenso wie Links, die sich nur farblich (ohne ergänzende Kontrasthilfen) vom Fließtext abheben sollen.
Der Barrierefreiheits-Spezialist Domingos de Oliveira weist übrigens in seinem Deep Dive „Kontraste und digitale Barrierefreiheit“ zurecht darauf hin, dass bei der Kontrastermittlung zunehmend der APCa-Mechanismus statt der klassischen WCAG-Vorgaben zur Anwendung kommt. Denn APCa orientiert sich noch besser an der realen menschlichen Wahrnehmung!
De Oliveira schreibt dazu:
„APCA beschreibt Kontraste nicht mehr mit einem abstrakten Verhältnis wie „4,5:1“, sondern mit sogenannten Lc-Werten (Lightness Contrast). Diese Werte geben an, wie stark sich Vordergrund- und Hintergrundfarbe voneinander abheben – und zwar so, dass der Wert besser mit der echten Lesbarkeit zusammenpasst. Beispielsweise reicht für gut lesbaren Fließtext ein Lc-Wert von etwa 60 aus. Wenn die Schrift jedoch sehr klein oder sehr dünn ist, braucht sie einen höheren Kontrast, etwa Lc 75 bis 90, damit sie noch angenehm erkennbar bleibt.“
Die professionelle Kontrastoptimierung ist keine „Nice-To-Have-Aktion“
Gerade am Beispiel der relaunchten Website des Stadtwerks Tauberfranken zeigt sich, wie solche gezielten Detailmaßnahmen die Usability ganz entscheidend verbessern können!Wer an die Zukunft seiner eigenen Digital-Tools denkt, sollte deshalb Barrierefreiheit und Usability immer als „Doppel“ denken. Denn: Starke Kontraste helfen nicht nur „einigen wenigen“, sondern uns allen!
Sie wollen die Usability Ihrer Website ebenfalls steigern und/oder das Thema Barrierefreiheit gleich ganz grundsätzlich angehen? Zum Beispiel durch eine professionelle Kontrastoptimierung als ersten Schritt in die richtige Richtung?
Dann lassen sie uns sprechen! Vereinbaren Sie am besten jetzt gleich einen kostenfreien Erstinfo-Termin.
