Als die FernUniversität in Hagen im Jahr 2017 ihren Webrelaunch vorbereitete, stand eine scheinbar einfache, tatsächlich aber sehr grundlegende Frage im Raum: Welche Farben sollen die Fakultäten im neuen Webauftritt erhalten? Farben sollten Orientierung geben, zur visuellen Identität passen und zugleich in digitalen Anwendungen funktionieren. Doch damit war die Aufgabe nicht erledigt. Denn Farben im Hochschulkontext müssen nicht nur schön, sondern auch zugänglich, robust und barrierefrei nutzbar sein.
In diesem Zusammenhang entwickelte Ingrid Lacher vom damaligen Webteameine barrierefreie Farbpalette, die bis heute im CSS der FernUni-Seiten Bestand hat. Viele dieser Farben und Farbkombinationen sind im Web bereits voreingestellt und können unmittelbar genutzt werden. Im Webguide finden Sie eine Auflistung aller Fakultätsfarben mit entsprechenden Farbwerten. Wichtig ist dabei: Die Fakultätsfarben sind für den Einsatz mit weißer Schriftfarbe vorgesehen und sollen nur in dieser Kombination verwendet werden. So wird sichergestellt, dass die vorgesehenen Kontrastwerte eingehalten und die Inhalte gut lesbar bleiben.
Diese Anekdote zeigt sehr gut: Barrierefreiheit beginnt nicht erst bei Prüfwerkzeugen oder gesetzlichen Anforderungen. Sie beginnt bereits bei grundlegenden Gestaltungsentscheidungen, etwa bei der Wahl einer Fakultätsfarbe.
Kontrast ist kein Detail, sondern Voraussetzung für Lesbarkeit
Ausreichender Kontrast bedeutet, dass sich Text, Bedienelemente oder grafische Informationen deutlich genug vom Hintergrund abheben. Nur so können Inhalte zuverlässig gelesen und erkannt werden.
Die Web Content Accessibility Guidelines, kurz WCAG, definieren Mindestanforderungen an Kontraste. Entscheidend ist das Verhältnis zwischen Vordergrund- und Hintergrundfarbe. Für Texte gelten insbesondere folgende Werte: Normale Schrift benötigt also mindestens ein Kontrastverhältnis von 4,5: 1. Für große Schrift genügt ein Verhältnis von 3:1, da große Buchstabenformen leichter erkennbar sind.
Kontrast betrifft nicht nur Fließtext
Ein häufiger Fehler in der Gestaltung: Der Kontrast wird nur für normalen Fließtext geprüft. Barrierefreie Gestaltung muss jedoch alle relevanten Elemente berücksichtigen.
Dazu gehören insbesondere:
- Überschriften
- Links
- Buttons
- Formularfelder
- Icons
- Infografiken
- Diagramme
- Beschriftungen in Bildern
- Navigationselemente
- Fehlermeldungen und Hinweise
- Fokusmarkierungen für Tastaturbedienung
Gerade bei interaktiven Elementen reicht es nicht, nur den Ausgangszustand zu prüfen. Auch Mouseover, besuchte Links, aktive Zustände und insbesondere der Tastaturfokus müssen ausreichend kontrastreich gestaltet sein. Ein Link, der im Normalzustand gut lesbar ist, darf nach dem Besuch nicht so blass werden, dass er kaum noch erkennbar ist.
Auch in Grafiken und Diagrammen sind Kontraste entscheidend. Besonders kritisch sind Grafiken, in denen Text enthalten ist. Text in Bildern sollte möglichst vermieden werden, weil er sich schlechter vergrößern, auslesen oder anpassen lässt. Wenn Text in Abbildungen unvermeidbar ist, muss er denselben Kontrastanforderungen genügen wie normaler Text.
Kontraste prüfen: Der Kontrastrechner von Leserlich.info
Kontraste sollten nicht nach Gefühl beurteilt werden. Was auf einem hochwertigen Monitor im Büro gut aussieht, kann auf einem Smartphone, bei Sonnenlicht oder für Menschen mit eingeschränkter Sehfähigkeit unzureichend sein.
Ein hilfreiches Werkzeug ist der Kontrastrechner von Leserlich.info
Dort können Vordergrund- und Hintergrundfarben eingegeben und gegen gängige Anforderungen geprüft werden. Wichtig ist, die tatsächlichen Farben aus dem Design oder Stylesheet zu verwenden.
