Optimierung der Farbkontraste für Barrierefreiheit
Von Jonas Um sicherzustellen, dass das Farben barrierefrei verwendet werden, müssen u.a. die Kontraste von Text zu Hintergrund sowie die Kontraste von funktionalen Elemente wie Buttons zum Hintergrund ein Kontrastverhältnis von mindestens 3:1 aufweisen.
Ausreichend hohe Farbkontraste sind ein wichtige Qualitätsmerkmal von benutzerfreundlichem und barrierefreien UI Design, da sie nicht nur Menschen mit Sehbehinderungen, sondern auch allen anderen Personen helfen, Informationen leichter lesen bzw. erkennen zu können.
Warum sind Farbkontraste wichtig?
Wenn der Kontrast zwischen dem Text und dem Hintergrund zu gering ist, kann dies dazu führen, dass der Text verschwommen oder unscharf erscheint. Er ist schwieriger zu lesen, was als unkomfortabel empfunden wird und zu hohen Absprüngen führt. Ein guter Kontrast verbessert häufig auch die Ästhetik des Designs und hilft, die Aufmerksamkeit auf wichtige Elemente zu lenken. Das Layout wirkt vielmals schärfer, frischer und klarer.
Welche Farbkontraste müssen eingehalten werden?
Design-Teams sollten sicherstellen, dass der Farbkontrast zwischen Text und Hintergrund ausreichend ist, um eine gute Lesbarkeit und Erkennbarkeit zu gewährleisten. Nach der aktuellen WCAG 2.2-Richtlinie bedeutet dies ein Kontrastverhältnis von 3:1 bei einer AA-Konformität. Wenn AAA-konform gearbeitet werden muss, gilt der Verhältnis von 4.5:1.
Allerdings hat auch die Wahl der Schriftart, die Schriftgröße usw. großen Einfluss auf den empfundenen Kontrast. Dünne Schriftschnitte werden z. B. bei gleicher Farbe als weniger gut lesbar wahrgenommen. Es zeichnet sich daher ab, dass in der WCAG 3-Richtlinie umfassendere Beurteilungen zur Berechnung des Farbkontrast Einzug halten. Diese neue Berechnung wird als APCA (Advanced Perception of Color Algorithm) beschrieben.
Hilfreiche Tools zum Überprüfen der Farbkontraste:
Es gibt sehr viele Websites, die Tools zur Farbberechnung anbieten. Die folgenden Tools nutzen wir selbst:
- Contrast Tools – WCAG 2 + WCAG 3 (APCA) Kontrast Tests
- ContrastGrid – Erzeugt ein Raster mit Kombinationen aller angelegten Farben. Das Raster kann nach Richtlinie gefiltert werden. Es ist auf einen Blick ersichtlich, welche Kombinationen erlaubt sind.
Empfohlene Plugins für Design-Tools
- Für Adobe XD: Stark. Das Plugin bietet auch kostenpflichtige Features an. Der wichtige »Rapid Contrast Check« ist jedoch auch gratis nutzbar.
- Für Figma: Use Contrast. Das Plugin zeigt nicht nur an, ob Kontraste ausreichend sind, sondern es macht per Klick Vorschläge für ausreichende Kontraste.
Auswirkungen, wenn Farbkontraste nicht barrierefrei sind
Wenn die verwendeten Farben nicht 100% barrierefrei sind, werden nicht alle Menschen den Text komfortabel lesen können. Der Anspruch beim UI Design sollte jedoch sein, dass etwas gut benutzbar ist und gut aussieht. Zusätzlich wird die Website bei technischen Bewertungen – z.B. durch Google Lighthouse – keine volle Punktzahl mehr erreichen können. Ob und inwiefern Lighthouse auf das Suchmaschinen-Ranking durchschlägt ist umstritten. Allerdings kann man davon ausgehen, dass bei einer schlecht lesbaren Website, die User Experience für Menschen schlechter wird, was ggf. die Bounce-Rate bei Google erhöht und somit langfristig und indirekt schlechteres Ranking auslösen kann.
Lösungsansätze, wenn die Farben des Corporate Designs »failen«
In vielen Fällen wird man im Webdesign mit einem Corporate Design oder einem Styleguide konfrontiert, in dem bereits nicht barrierefreie Farben verbindlich festgelegt sind. Bei der Umsetzung von barrierefreien Websites haben wir mit folgenden Ansätzen die besten Ergebnisse erreicht:
- Beim Kunden für das Problem sensibilisieren. Argumentieren, dass barrierefreie Farben das Design für alle Menschen besser machen, nicht nur für Menschen mit Handycap. Situativ profitieren wir alle von guten Kontrasten (Beispiel: Sonne auf dem Display)
- Die fehlerhaften Farben verwenden, allerdings nicht dort wo es Probleme mit der Lesbarkeit bzw. Benutzung gibt. Die Farben können beispielsweise als Hintergrund zum Einsatz kommen.
- Wenn die Farben nur knapp das Kontrastverhältnis verfehlen, können sie auch leicht angepasst werden. In solchen Fällen argumentieren wir damit, dass der Farbeindruck aus dem Styleguide beibehalten wird, auch wenn der Farbcode nicht exakt übernommen wird.
- Den Styleguide um Farben für die barrierefreie digitale Nutzung erweitern. Zusätzliche Farben festlegen, die Farben anpassen usw.
Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
