Hand aufs Herz: Wer an barrierefreies Webdesign denkt, hat oft sofort ein ziemlich trostloses Bild vor Augen. Schwarzer Text auf knallweißem Grund, kastige Formulare, null Spielraum für feine Nuancen. Kein Wunder, dass viele Designer beim Thema WCAG und Kontrastwerte erst mal die Augen rollen.
Aber wie streng sind die Regeln im Alltag eigentlich? Und bedeutet Barrierefreiheit wirklich das Ende von ästhetischem Design?
Sobald wir über normalen Fließtext reden – also den Inhalt, den Ihre Besucher tatsächlich lesen sollen , gibt die WCAG einen Richtwert von 4,5:1 vor.
Interaktive Elemente: Icons, Input-Felder und Fokus-Ränder brauchen ebenfalls mindestens 3:1, um als Bedienelement erkannt zu werden. Das gilt übrigens nicht nur für die Hauptnavigation oder den Kaufen-Button, sondern für jeden echten Infotext auf der Seite. Der Grund ist simpel: Wer im Sommer mit dem Smartphone draußen unterwegs ist oder schlicht nicht mehr die Sehschärfe eines 18-Jährigen hat, gibt bei zu blassen Grautönen extrem schnell auf.
Große Schriften: Ab etwa 24 Pixel (oder 18,5 Pixel bei fetter Schrift) sinkt die Anforderung auf 3:1.
Es gibt allerdings ein paar Stellschrauben:
Die gute Nachricht: Sie müssen Ihre Farbpalette keineswegs über Bord werfen. Die Richtlinien lassen an den richtigen Stellen erstaunlich viel Luft zum Atmen.
Eingetragene Logos und Wortmarken sind von den Kontrastregeln zum Beispiel komplett ausgenommen. Genauso sieht es mit rein dekorativen Elementen aus. Eine riesige, hellgraue „01“ im Hintergrund einer Sektion? Überhaupt kein Problem, solange sie keinen essenziellen Inhalt transportiert. Auch inaktive Buttons dürfen blass sein, weil sie dem Nutzer signalisieren sollen: Hier geht es gerade nicht weiter.
Fazit
Gutes Design und hohe Zugänglichkeit schließen sich nicht aus. Ganz im Gegenteil. Wer den Fließtext knackig und gut lesbar gestaltet, tut allen Besuchern einen Gefallen. Und für die kreative Note bleiben immer noch Layout, Typografie, Bildsprache und dekorative Akzente.