Gibt es überhaupt barrierefreie Farben für die Website? Ja und nein.
Es geht vor allem darum, wie wir Farben auf der Website einsetzen:
- Welche Kontraste verwenden wir?
- Bieten wir zusätzlich zur Farbe andere Orientierungsmöglichkeiten an?
Warum Farben für die Barrierefreiheit deiner Website wichtig sind
Bei Farben denken wir ganz spontan an Farben im Hintergrund oder die Schriftfarbe. Diese spielen eine wichtige Rolle in unserem Design.
Doch oft übersehen wir Details wie die Farben von Buttons und wie sie sich beim Klicken verändern. Oder Formularfelder, die nur mit einem roten Rahmen zeigen, dass ein Feld fehlt oder falsch ausgefüllt wurde.
Beim Beispiel mit der Fehlermeldung beim Formular entsteht ein Problem für Menschen mit Rot-Grün-Schwäche: Sie können die Markierung des Formularfelds nicht erkennen und somit das Problem nicht finden.
Und das betrifft mehr Menschen, als man vielleicht denkt – etwa 10 % der Männer und 0,5 % der Frauen haben eine Rot-Grün-Schwäche.
Sie sehen mein Foto dann ungefähr so:
Farbkontraste sind wichtig für die Barrierefreiheit deiner Website
Der stärkste, aber nicht unbedingt sinnvollste Kontrast ist schwarz auf weiss und umgekehrt.
Es ist deshalb nicht ideal, weil der sehr harte Kontrast das Auge ermüdet.
Besser ist: Schwarz auf einem leicht eingefärbten Hintergrund oder ein dunkles Grau auf weissem Hintergrund.
Schwarz auf weiss ergibt einen guten Kontrast, aber es ermüdet die Augen
Besser ist ein dunkles Grau auf ganz leicht eingefärbtem Hintergrund
Weitere Tipps zu barrierefreien Schriften findest du hier.
Web Content Accessibility Guidelines (WCAG) – Richtlinien für Kontraste
Die WCAG (Web Content Accessibility Guidelines) sind internationale Richtlinien, die sicherstellen sollen, dass Webinhalte für alle zugänglich sind, unabhängig von ihren Fähigkeiten oder Einschränkungen.
Die Level AA und AAA sind Standards WCAG, die angeben, wie barrierefrei Farben und Kontraste auf einer Website sein sollten.
Level AA gilt als grundlegender Standard für gute Zugänglichkeit. Es ist ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für grossen Text vorgeschrieben. „Grosser Text“ umfasst Schriftgrössen ab 24 Pixel (oder 19 Pixel fett).
Level AAA stellt eine besonders hohe Barrierefreiheit sicher – vor allem für Menschen mit visuellen Einschränkungen. Es wird ein Kontrastverhältnis von 7:1 für normalen Text und 4,5:1 für grossen Text verlangt.
Keine Angst, das musst du nicht selbst errechnen, dafür gibt es Tools. Eins davon stelle ich dir gleich hier vor.
Farben auf digitale Barrierefreiheit prüfen
Es gibt etliche Tools, mit denen du die Kontraste auf deiner Website prüfen kannst. Ich stelle dir hier ein ganz einfaches Tool von leserlich.info vor.
Bevor du das Tool nutzen kannst, muss du den Farbcode (Hexadezimalcode) der Farben auf deiner Website kennen.
Farben auf der Website herausfinden
Auch wenn das im ersten Moment etwas kompliziert klingt: Es ist einfach.
Du installierst die Browsererweiterung ColorZilla.
Die gibt es sowohl für Firefox als auch für den Chrome-Browser:
Firefox: https://addons.mozilla.org/de/firefox/addon/colorzilla/
Chrome: https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=de
Dann kannst du ganz einfach mit der Pipette die Farbcodes auslesen:
Sobald du dir diese Codes notiert hast, gehst du zu Kontrastrechner:
Gefällt dir, was du liest?
Dann abonniere doch meinen Newsletter. In meinen Website-Tipps bekommst du Woche für Woche inspirierenden Input und leicht umsetzbare Tipps für deine Website.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Barrierefreie Farbpaletten finden
Wenn ich eine Farbpalette für eine Website entwickle, beginne ich mit der Akzentfarbe. Das mag merkwürdig klingen, da es die Farbe ist, die am wenigsten vorkommt.
Aber es ist die Farbe, die die ganze Website beeinflusst. Farben suche ich immer so aus, dass die Gefühle, die sie auslösen, mit meinen Werten und denen meiner Lieblingskundinnen übereinstimmen.
Nehmen wir meine eigene Website: Die Akzentfarbe ist ein dunkles Rot.
#8b010d
Davon abgeleitet sind die Hintergrundfarben, die ich verwende.
Hintergrund 1
Hintergrund 2
Hintergrund 3
Dazu kommt noch die Schriftfarbe, ein dunkles Grau, das wie schwarz wirkt, aber nicht so hart ist.
Barrierefreie Farbgebung
Sobald ich meine Farben festgelegt habe, muss ich sie noch auf Barrierefreiheit testen. Also, ob sie genügend Kontrast haben.
- Hat die Schriftfarbe genügend Kontrast zur Hintergrundfarbe.
- Hat die Buttonfarbe (Akzentfarbe) genügend Kontrast zum Hintergrund.
- Hat die Schriftfarbe auf dem Button genügend Kontrast zum Button.
- Wie ist es, wenn ich den Button anklicke. Stimmt der Kontrast dann auch noch?
- Wie sieht es aus, wenn ich einen Button auf einen Hintergrund in der Akzentfarbe setze?
Du siehst, es ist einiges, was da getestet werden muss.
Damit du das nicht immer wieder machen musst, solltest du diese Tests dokumentieren. Also notieren, welche Farbkombinationen welchen Kontrast haben.
Barrierefreie Fehlermeldungen
Vergiss nicht, dir auch Gedanken zu den Fehlermeldungen auf deiner Website zu machen.
Wenn zum Beispiel in einem Formular ein Eingabefehler nur durch eine rote Umrandung angezeigt wird, kann das für Menschen mit Farbsehschwäche ein Problem sein.
Du solltest mindestens noch dazu schreiben, welche Eingabe nicht korrekt war. Das ist natürlich nicht nur für Menschen mit einer rot-grün-Sehschwäche nützlich, sondern für alle anderen Benutzer auch.
Barrierefreie Farben für Infografiken
Infografiken können für Menschen mit Farbsehschwäche eine echte Herausforderung sein. Denn dort sind Farben oft das zentrale Element, um Daten zu visualisieren und Zusammenhänge zu verdeutlichen.
Wenn jemand bestimmte Farben nur schwer oder gar nicht unterscheiden kann, gehen diese wichtigen Infos verloren.
Um Infografiken barrierefrei zu gestalten, bieten sich alternative Darstellungen wie Muster, Symbole oder unterschiedliche Formen an.
Auch Farbkombinationen, die für Menschen mit Farbsehschwäche gut erkennbar sind, machen einen grossen Unterschied.
Eine klare Legende, die die Bedeutung der verwendeten Farben und Muster erklärt, ist dabei ebenfalls unerlässlich.
Fazit: Mit einer clever ausgewählten Farbpalette schaffst du eine Website, die für alle besser zugänglich und benutzerfreundlicher ist. Eine barrierearme Gestaltung kommt nicht nur Menschen mit Einschränkungen zugute – sie macht deine Seite für jeden angenehmer.
Es lohnt sich also, Zeit in die richtige Farbauswahl zu investieren!
Gefällt dir, was du liest?
Dann abonniere doch meinen Newsletter. In meinen Website-Tipps bekommst du Woche für Woche inspirierenden Input und leicht umsetzbare Tipps für deine Website.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Aus eigener Erfahrung möchte ich ergänzen: Das ist nicht nur für Menschen mit Sehbeeinträchtigung relevant. Wir tun uns selbst als Websitebetreiber einen Gefallen.
Nach einer leichten Designanpassung war bei mir die Schriftfarbe schwarz statt bisher grau. Links erschienen weiterhin in meinem Dunkelrot.
Irgendwann wunderte ich mich, dass die Anzahl der Seitenaufrufe je Besucher in den Keller gesackt war.
Die roten Links waren kaum noch von dem schwarzen Text zu unterscheiden und wurden schlicht nicht als solche erkannt. Nachdem ich das rot etwas heller eingestellt hatte, haben sich die Leute auch wieder mehr bei mir umgesehen.
Ganz genau, Dagmar. Es hilft allen, wenn wir unsere Websites barrierearm gestalten. Bei den Links empfehle ich immer auch einen Unterstrich, damit er sich für alle klar vom restlichen Text abhebt.