Farben spielen eine zentrale Rolle für alle Sehenden, egal ob offline oder im Web. Aber: Farben beeinflussen nicht nur das Design, sondern auch die Zugänglichkeit. Wir möchten Dir in diesem Beitrag das Thema barrierefreie Farben näher bringen und Dir damit die Chance geben, Deine Website fit für die 2025 geforderte digitale Barrierefreiheit zu machen. Los geht’s!
Worum geht es bei barrierefreien Farben?
Barrierefreie Farben sind Farbkombinationen, die für alle Menschen leicht erkennbar und lesbar sind. Sie helfen, Sehschwächen zum Beispiel aufgrund von Alter oder Behinderung zu kompensieren und die Benutzerfreundlichkeit dadurch insgesamt zu verbessern.
Bitte mache nicht den Fehler zu glauben, dass barrierefreie Farben nur Menschen mit Sehbeeinträchtigung hilft. Sie helfen allen Menschen, Informationen mit weniger Anstrengung wahrzunehmen.
Beim Thema barrierefreie Farben geht es eigentlich um den Helligkeitsunterschied zweier zusammenliegender Farben. Man nennt das auch Farbkontrast.
Und warum sind barrierefreie Farben so wichtig?
Ketzerisch könnte ich Dir jetzt sagen: Weil es in einem Barrierefreiheit-Gesetz wie dem Barrierefreiheitsstärkungsgesetz (BFSG) steht. Weil du von diesen Gesetzen und Anforderungen gehört hast, bist Du vielleicht überhaupt erst hier. Aber es gibt einen viel wichtigeren Grund.
Barrierefreie Farben sind kein Trend, sondern eine Notwendigkeit für eine inklusive Webgestaltung und rechtliche Anforderung ab Juni 2025.
Farben können durch verschiedene Sehbehinderungen unterschiedlich oder auch überhaupt nicht wahrgenommen werden. Zu der häufigsten Beeinträchtigung zählt die Rot-Grün-Schwäche (Deuteranopie). Bei dieser zumindest für mich überraschend sehr häufig vorkommenden Sehschwäche (10 Prozent aller Männer und 0,5 Prozent aller Frauen in Deutschland) fällt es den Betroffenen schwer, Rot- und Grüntöne voneinander zu unterscheiden. Für diese Personen erscheinen Rot und Grün oft als ähnliche Grautöne. Natürlich gibt es noch weitere Einschränkungen, die das Thema barrierefreie Farben so wichtig machen:
- Blaublindheit (Tritanopie): Menschen mit Blaublindheit haben Schwierigkeiten, Blau- und Gelbtöne zu unterscheiden.
- Totale Farbenblindheit (Achromatopsie): Personen mit Achromatopsie sehen die Welt in Graustufen und benötigen daher starke Kontraste und alternative Darstellungsformen.
- Graustufensehschwäche: Menschen mit dieser Sehschwäche sehen die Welt in unterschiedlichen Graustufen und benötigen ebenfalls starke Kontraste.
- Deuteranopie: Ähnlich wie die Rot-Grün-Schwäche, jedoch sind hier die Rot- und Gelb-Töne weniger unterscheidbar.
- Tritanopie: Blau-Blindheit, bei der Blau- und Gelbtöne schwer auseinanderzuhalten sind.
Farbbedürfnisse älterer Menschen vs. junger Menschen
Auch nicht vergessen solltest Du ältere Menschen. Gerade mit dem demografischen Wandel wird diese Gruppe immer größer und für Dich damit vermutlich auch immer relevanter. Die Herausforderungen für ältere Menschen: Sie nehmen Farben oft dunkler und weniger intensiv wahr. Daher sind stärkere Kontraste und gut lesbare Schriftarten besonders wichtig. Dein Glück: Da jungen Menschen idealerweise dynamische und kräftige Farben bevorzugen, kannst Du mit einem entsprechenden Farbschema Deiner Website alle Generationen gleichermaßen ansprechen.
Wie hängen barrierefreie Farben und Farbkontraste zusammen?
Der Farbkontrast ist entscheidend, um Texte und wichtige Inhalte klar erkennbar zu machen. Ein hoher Kontrast zwischen Hintergrund und Text verbessert die Lesbarkeit und ist daher ein wesentlicher Aspekt für die Barrierefreiheit auf Websites. Natürlich spielt hier auch die Schriftgröße eine Rolle bei der Zugänglichkeit von bestimmten Farben und Farbkontrasten. Dazu gleich auch mehr. Nun erst einmal für Dich wichtig zu wissen:
Der Kontrast zwischen Text und Hintergrund sollte mindestens 4,5 zu 1 betragen.
Gut, aber wie berechnet sich der Kontrast und vor allem, wie kannst Du den Kontrast messen? Dafür gibt es online eine Vielzahl frei zugänglicher Tools. An dieser Stelle möchte ich dir wenigstens drei Möglichkeiten vorstellen.
Online-Tools
- Contrast-Ratio von Moritz Giessmann
- Kontrast-Prüfung von Siteimprove (nutze ich selbst gerne)
- WAVE-Plugin für den Firefox-Browser (auch für andere Browser verfügbar)
Desktop-Tools
Für professionellere Tests nutze ich in der Regel den Color Contrast Checker von TPGi, einem Unternehmen, das sich dem Thema „inklusive Digitalerfahrung“ verschrieben hat. Soweit ich das beurteilen kann, wird das auch von ausgebildeten Barrierefreiheit-Prüfenden genutzt. Das Tool bietet noch einige weitere Funktionen und ich kann es deshalb jedem empfehlen, der sich nicht nur einmal mit barrierefreien Farben beschäftigen möchte oder muss.
Minimale Farbkontraste zur Einhaltung der digitalen Barrierefreiheit
Wie schon erwähnt, handelt es sich bei barrierefreien Farben um die unterschiedliche Helligkeit zusammenhängender Farben für den Hintergrund und den Vordergrund. In den WCAG wird von „relative luminance“ gesprochen, zu deutsch „relative Helligkeit“.
Farbkontraste für Texte
Beginnen wir mit Web-Texten. Wir wissen bereits, dass es beim Farbkontrast um die Lesbarkeit von Texten geht. Folgerichtig spielt auch die Schriftgröße eine Rolle. Je größer die Schrift, desto besser ist diese zu lesen, auch bei geringerem Farbkontrast. Daher musst Du immer zwischen den folgenden Mindestanforderungen für Farbkontraste bei Texten unterscheiden:
- Normale Schrift: Für Schriftgrößen ist grundsätzlich ein Kontrastverhältnis von 4,5:1 erforderlich.
- Große Schrift benötigt lediglich ein Kontrastverhältnis von 3:1. Als große Schrift gilt alles über 24 Pixel und über 19 Pixel (exakt sind es 18,7 Pixel) bei fetter Schrift.
Bitte beachte, dass es sich hierbei um Mindestanforderungen im Sinne der digitalen Barrierefreiheit handelt. Konkret nachlesen kannst Du die Anforderungen in der englischen WCAG 2.1 mit dem Erfolgskriterium 1.4.3 oder hier die BIK BITV Prüfschritte 9.1.4.3 auf deutsch. Damit sind die Anforderungen der Konformitätsstufe AA erfüllt, nicht mehr und nicht weniger. Wenn möglich, arbeite nicht im unteren Bereich des Kontrastverhältnisses. Deine Website-Nutzenden werden es Dir danken, wenn Du bei deine Farben so barrierefrei wie möglich definierst und einsetzt.
Falls Deine Website der höchsten Konformitätsstufe der WCAG genügen soll, benötigst du folgende Kontrastverhältnisse (siehe englische WCAG 2.1, Erfolgskriterium 1.4.6:
- Normale Schrift: Für Schriftgrößen ist grundsätzlich ein Kontrastverhältnis von 7:1 erforderlich.
- Große Schrift benötigt lediglich ein Kontrastverhältnis von 4,5:1. Als große Schrift gilt alles über 24 Pixel und über 19 Pixel (exakt sind es 18,7 Pixel) bei fetter Schrift.
Farbkontraste für Texte auf Grafiken
Sprechen wir nach dem Kontrasten für Texte nun über die barrierefreie Farben im grafischen Umfeld. Texte können auf Grafiken sehr schwer lesbar sein. Eine gute Lösung für einen guten Farbkontrast und eine generell bessere Lesbarkeit ist die Schrift mit einer separaten Hintergrundfarbe zu unterlegen. Das folgende Bild veranschaulicht das Problem und die Lösung mit einem Text, der einen separaten, einfarbigen Hintergrund hat.
Alternativ dazu kannst Du deine Bilder auch abdunkeln. Das ist aber in der Regel nur in Ausnahmen sinnvoll, da dadurch das Bild selbst schlechter zugänglich und damit weniger barrierefrei wird.
Digitale Farben und das Prinzip der zwei Sinne
Du solltest nicht nur barrierefreie Farben nutzen, um wichtige Informationen hervorzuheben. Es gibt Menschen, die haben mit der Wahrnehmung von Farben erhebliche Probleme. Die Rot-Grün-Schwäche gehört wohl zu den bekanntesten Beeinträchtigungen. Dieses Thema kommt vor allem bei der Interaktion mit interaktiven Elementen einer Website zum Tragen.
Stell Dir vor, deine Links oder deine Buttons sind grundsätzlich rot und beim Kontakt mit einem Mauszeiger werden diese Elemente grün. Das wird ein Mensch mit Rot-Grün-Schwäche nicht wahrnehmen. Deine ansonsten möglicherweise barrierefreien Farben verfehlen ihr Ziel, deine Website ist nicht für alle Menschen gleichermaßen zugänglich.
Helfen kann Dir hier die Anforderung des Zwei-Sinne-Prinzips. Thematisiert wird dieses Erfolgskriterium in der englischsprachigen WCAG 1.4.1 „Use of color“, zu deutsch „Nutzung von Farben“ oder „Ohne Farben nutzbar“, wie es im BIK BITV Prüfschritt 9.1.4.1 heißt.
Danach soll die ansonsten möglicherweise schon barrierefreie Farbe niemals die einzige Methode sein, eine Information gleich welcher Art zu transportieren. Daher sind Mittel wie Unterstrich, Fettung, Outline also ein Rahmen oder andere Effekte erforderlich.
Das Prinzip der zwei Sinne ist kein Kann-Option, sondern mit der Konformitätsstufe A ein absolutes Minimum für die digitale Barrierefreiheit und unabhängig vom Anspruch an die Nutzung barrierefreier Farben.
Fazit und Tipp für Dein Web-Projekt
Barrierefreie Farben sind ein essentieller Teil der inklusiven Webgestaltung. Konkret geht es bei barrierefreien Farben aber eigentlich immer um die zwei Themen Farbkontraste und „Prinzip der zwei Sinne“. Die Einhaltung der in diesem Beitrag genannten Standard helfen, dass all Deine Website-Nutzenden unabhängig von ihren individuellen Bedürfnissen Deine Inhalte problemlos wahrnehmen und verstehen können.
Abschließend nun noch mein Tipp: Erspare Dir Zeit und Nerven und lege für Deine Website ein globales Farb-Schemata an. Solltest Du eine Onlineagentur haben, lass Dich von ihr dazu beraten. Ein Tool, das ich Dir dafür sehr ans Herz legen kann ist das Contrast Grid von Eightshapes.