Warum ist Farbkontrast für die Barrierefreiheit im Web wichtig?

Es gibt viele Designaspekte, die bei der Barrierefreiheit von Websites berücksichtigt werden müssen – vom Seitenlayout über die Verwendung von Bildern bis hin zur Typografie.

Doch Ihre Farbauswahl ist eines der ersten Dinge, die Menschen bemerken, wenn sie Ihre Seite besuchen. Und wenn Sie hier Fehler machen, kann sich das auf die Nutzererfahrung aller Besucher auswirken – nicht nur auf die von Menschen mit Sehbehinderungen.

Tatsächlich haben Ihre Farbauswahl – und die Beziehungen zwischen diesen Farbtönen – einen enormen Einfluss auf die Nutzererfahrung. Wenn Sie Farben wählen, die nicht genügend Kontrast bieten, können Teile Ihrer Website für Menschen mit Sehbehinderungen schwer lesbar und schwer navigierbar sein.

Beispiel für hohen Kontrast: weißer Text auf schwarzem Hintergrund und Beispiel für niedrigen Kontrast: weißer Text auf gelbem Hintergrund

Was ist Farbkontrast?

Technisch gesehen beschreibt der Farbkontrast die Beziehung zwischen der Leuchtdichte zweier Farben. Einfacher ausgedrückt können Sie sich die Leuchtdichte als die Helligkeit einer Farbe vorstellen: Reines Weiß hat die höchste Leuchtdichte, reines Schwarz die niedrigste.

Kontrast wird typischerweise als Verhältnis angegeben, wobei eine höhere Zahl einen stärkeren Kontrast zwischen den beiden Farben bedeutet. Zum Beispiel haben Weiß und Schwarz ein Kontrastverhältnis von 21:1 (das höchstmögliche), während Weiß und Gelb nur ein Kontrastverhältnis von 1,07:1 aufweisen.

Wenn zwei Farben übereinandergelegt werden – zum Beispiel, wenn Sie Text in einer Farbe auf einem Hintergrund mit einer anderen Farbe haben – werden die Vorteile eines hohen Kontrastverhältnisses deutlich. Weißer Text auf schwarzem Hintergrund ist viel leichter zu lesen als weißer Text auf gelbem Hintergrund.

Zwei geöffnete Websites, eine in voller Farbe und eine in Graustufen

Warum ist Farbkontrast wichtig?

Für viele Menschen mit Sehbehinderungen kann der Farbkontrast den Unterschied zwischen einer Website, die leicht zu lesen und zu navigieren ist, und einer, die völlig unleserlich ist, ausmachen. Viele Arten von Sehbehinderungen – von Kurzsichtigkeit und Weitsichtigkeit bis hin zu diabetischer Retinopathie und Makuladegeneration – können das Lesen von Text erschweren, wenn der Farbkontrast gering ist.

Niedriger Kontrast kann auch für Menschen mit Farbsehschwäche Probleme verursachen, selbst wenn ihre Sehkraft ansonsten perfekt ist. Wenn zwei sehr unterschiedliche Farben eine nahezu identische Leuchtdichte haben, sind sie fast nicht voneinander zu unterscheiden.

Etwa 15 % der US-Bevölkerung sind derzeit 65 Jahre oder älter

Farbkontrast spielt auch eine wichtige Rolle für die Nutzererfahrung älterer Menschen. Die Sehschärfe nimmt typischerweise ab, sobald Menschen 70 Jahre alt werden(opens in a new tab), selbst wenn ihre Augen immer gesund waren.

Zu den häufigsten Sehproblemen älterer Menschen gehört eine niedrige Kontrastempfindlichkeit(opens in a new tab). Wenn Ihre Website nicht mit einem barrierefreien Farbkontrast gestaltet ist, riskieren Sie, einen großen Prozentsatz der Besucher von Ihren Online-Diensten oder Produkten auszuschließen.

Eine Justizwaage und ein Schild über einem Webbrowser

Farbkontrast und Barrierefreiheitsgesetze

Das Americans with Disabilities Act(opens in a new tab) (ADA) ist eines der wichtigsten Gesetze, das Diskriminierung aufgrund von Behinderung verbietet. Da das ADA 1990 in Kraft trat, enthält es keine direkten Regelungen zum Internet oder spezifische rechtliche Kriterien für digitale Barrierefreiheit.

Stattdessen verlassen sich Gerichte und das Justizministerium (DOJ) auf die Web Content Accessibility Guidelines(opens in a new tab) (WCAG), den internationalen De-facto-Standard für digitale Barrierefreiheit.

Im Rahmen des ADA werden die WCAG in Klagen und Vergleichen fast immer herangezogen – und rechtliche Präzedenzfälle zeigen, dass die Einhaltung der WCAG für die ADA-Konformität entscheidend ist.

Neben dem ADA stützen sich auch der European Accessibility Act(opens in a new tab) (EAA) und das Accessibility for Ontarians with Disabilities Act(opens in a new tab) (AODA) auf die WCAG-Standards für Barrierefreiheit.

Ein Beispiel für weißen Text mit rotem Hintergrund, der nicht besteht, und ein Beispiel mit dunklerem Rot, der besteht.

Was sagen die WCAG zum Farbkontrast?

Laut WCAG Erfolgskriterium (SC) 1.4.3: Kontrast (Minimum)(opens in a new tab), muss die visuelle Darstellung von Text und Bildern von Text ein Kontrastverhältnis von mindestens 4,5:1 aufweisen.

Es gibt drei Ausnahmen von der 4,5:1-Kontrastanforderung: großer Text, nebensächlicher Text und Logotypen.

• Großer Text: Großer Text ist leichter lesbar, daher wird die Kontrastanforderung auf 3:1 reduziert. Die WCAG definieren großen Text als Text mit mindestens 18pt oder 14pt und fett.

• Nebensächlich: Text oder Textbilder, die Teil eines inaktiven UI-Elements sind, reine Dekoration, für niemanden sichtbar oder Teil eines Bildes mit wesentlichen anderen visuellen Inhalten, unterliegen keiner Kontrastanforderung.

• Logotypen: Text, der Teil eines Logos oder Markennamens ist, unterliegt keiner Kontrastanforderung.

Es ist wichtig, Ihre Kontrastverhältnisse aktiv zu testen, da es nicht immer offensichtlich ist, welche Farbkombinationen einen niedrigen Kontrast haben. Zum Beispiel hat weißer Text auf rotem Hintergrund (wie er von vielen Marken verwendet wird) nur ein Kontrastverhältnis von 3,99:1. Das bedeutet, dass er nur dann den WCAG entspricht, wenn er mit großen oder fetten Schriften verwendet wird.

AudioEye-Portal mit positiven Barrierefreiheits-Ergebnissen

Wie kann ich meine Website barrierefreier machen?

Hier sind zwei schnelle Tipps, um sicherzustellen, dass Ihre Farben barrierefrei sind:

1. Verwenden Sie Farbe nicht als alleiniges Mittel zur Informationsvermittlung: Websites nutzen oft grüne und rote Texte, um Erfolg oder Fehler anzuzeigen. Rot-Grün-Sehschwäche ist jedoch die häufigste Form der Farbsehschwäche (CVD). Und denken Sie daran: Wer blind ist, ist auch farbenblind. Daher sollten Sie sicherstellen, dass alle Pass/Fail-Hinweise (wie ein fehlendes Formularfeld) auch programmatisch kommuniziert werden.

2. Unterstreichen Sie Inline-Links: Ihr Inline-Link-Stil sollte eine Unterstreichung haben – Farbe allein reicht nicht aus. Die meisten Nutzer erwarten unterstrichene Links, und Unterstreichungen helfen Menschen mit Sehbehinderungen, Links zu erkennen.

Sie möchten sicherstellen, dass Ihre Farben barrierefrei sind? Testen Sie beliebige Farbkombinationen auf Ihrer Website mit dem kostenlosen Farbkontrast-Checker von AudioEye.

Oder erhalten Sie einen kostenlosen Scan einer beliebigen URL und identifizieren Sie Barrierefreiheitsprobleme auf Ihrer Website.