Contrast ratio

Das Kontrastverhältnis ist kein „nice to have“, sondern ein Muss in der Entwicklung von barrierefreien Websites. Es sorgt dafür, dass die Inhalte gut erkennbar sind – von Suchmaschinen ebenso wie von Menschen mit Sehschwäche oder Farbfehlsichtigkeit. Deshalb investiert unsere Digitalagentur viel Zeit, um Kontraste zu optimieren. Die Website wird damit nicht nur barrierefrei, sondern auch ein echter Erfolg.

Wenn jemand die Augen zusammenkneift, um graue Schrift auf weißem Hintergrund zu entziffern, dann ist dies der Moment, in dem Contrast ratio versagt hat. Für Menschen mit Sehbehinderungen oder Farbfehlsichtigkeit wird das Problem sogar noch größer. Aber Abhilfe ist in Sicht: Mit ein paar einfachen Anpassungen beim Web-Relaunch oder auch im Rahmen eines Retainers kann das Kontrastverhältnis optimiert werden.

Ein typisches Beispiel: Ein Button mit hellgrauem Text auf einem weißen Hintergrund. Das mag vielleicht „minimalistisch“ wirken, aber für viele Nutzer ist das Element schlicht unsichtbar. Tauscht man nun das Hellgrau gegen ein kräftiges Dunkelgrau aus, wird der Call-to-Action für alle zugänglich – und wirkt immer noch stylish.

Damit Websites barrierefrei entwickelt werden, geben die Web Content Accessibility Guidelines (WCAG) unseren Full-Stack-Webentwicklern klare Richtlinien vor. Für normale Schriftgrößen schreiben sie bspw. ein Kontrastverhältnis von mindestens 4,5:1 vor. Bei größeren Schriften – also ab 24 Pixel oder 18 Pixel bei fettem Schriftschnitt – reicht ein Verhältnis von 3:1 aus. Interaktive Elemente wie Buttons und Icons sollten ebenfalls mindestens ein Kontrastverhältnis von 3:1 aufweisen.

Ein gutes Beispiel dafür ist schwarzer Text (#000000) auf einem weißen Hintergrund (#FFFFFF), der ein perfektes Kontrastverhältnis von 21:1 erreicht. Das ist eine absolute Spitzenklasse, gerade für kleine Schriftgrößen im Corporate Webdesign. Schlecht wird es hingegen, wenn eine Corporate Website hellgraue Schrift (#AAAAAA) auf einem fast genauso hellen grauen Hintergrund (#DDDDDD) verwendet. Das Verhältnis beträgt in diesem Fall nur 1,4:1 – und der Text wird für viele Nutzer unsichtbar.

Die Beachtung von Contrast ratio ist gar nicht so schwer, wenn man in der professionellen Webdesign ein paar Grundsätze beachtet. Wir setzen auf starke Farbkontraste, wie z. B. bei dunkelblauem Text auf weißem Hintergrund oder bei weißer Schrift auf schwarzem Button. Solche Kombinationen sind nicht nur ästhetisch ansprechend, sondern auch gut lesbar.

Wir vergessen auch die sogenannten Hover-States nicht. Es passiert zu oft, dass Buttons oder Links beim Darüberfahren ihre Sichtbarkeit verlieren. Wir achten darauf, dass diese Elemente entweder eine klare Umrandung bekommen oder die Farben stark leuchten, um ihre Interaktivität zu betonen.

Ein weiteres Gestaltungselement sind Akzentfarben, die mit Bedacht eingesetzt werden sollten. Zum Beispiel kann ein gelber Button (#FFD700) auf einem dunklen Hintergrund (#2B2B2B) stylish aussehen und gleichzeitig sehr gut lesbar sein – perfekt, um die Aufmerksamkeit der Nutzer auf sich zu lenken.