0173 / 7 123 813 kontakt@ds-kommunikation.de

Barrierefreiheit auf Websites: Die Bedeutung der richtigen Farbauswahl

Wenn es um die Gestaltung einer Website geht, ist eines der zentralen Themen die Barrierefreiheit – insbesondere die Farbauswahl. Farben spielen nicht nur eine ästhetische Rolle, sie haben auch eine direkte Auswirkung auf die Lesbarkeit und die Zugänglichkeit von Inhalten für alle Nutzer, einschließlich Menschen mit Seheinschränkungen.

Bsp.

Farbenfehlsichtigkeit (Link Wikipedia) eine Anomalie die 5 % der Bevölkerung, überwiegend Männer betrifft. Landläufig auch als Rot-Grün-schwäche bekannt.

Farbwahl zwischen Corporate Design und Benutzerfreundlichkeit

Vielleicht kommt Ihnen diese Situation bekannt vor: Man wählt eine Palette an Farben, die sich zum Teil aus den Vorgaben des Corporate Designs (CD) ergibt, kombiniert diese mit persönlichen Favoriten und freut sich über einen harmonischen Farbakkord. Nach Abschluss der Design-Findungs-Phase werden die festgelegten RGB-Werte in die Website eingebunden – in Überschriften, Texten, Buttons, Links oder Grafiken.

Was auf dem ersten Blick gelungen erscheint, kann jedoch für Menschen mit einer Farbsehschwäche zu einer echten Herausforderung werden.

Wie wirken Farben für Menschen mit Seheinschränkungen?

Etwa 8 % der Männer und 0,5 % der Frauen sind von einer Form der Farbfehlsichtigkeit betroffen – die häufigsten Varianten sind Rot-Grün-Sehschwäche und Blau-Gelb-Sehschwäche. Farben, die für die meisten klar voneinander unterscheidbar sind, verschwimmen für diese Nutzer zu kaum unterscheidbaren Tönen. Das hat zur Folge, dass wichtige Informationen unter Umständen gar nicht oder nur schwer erfassbar sind.

Barrierefreies Design bedeutet daher auch: Kontraste bewusst wählen, Farben mit Bedacht kombinieren und Tools zur Farbkontrastanalyse einsetzen.

Was wir bei der Farbwahl beachten

Um allen Nutzerinnen und Nutzern eine gleichwertige Erfahrung auf der Website zu ermöglichen, achten wir bei der Farbgestaltung auf folgende Grundsätze:

  • Hohe Kontraste zwischen Text und Hintergrund:
    Ein dunkler Text auf hellem Hintergrund (oder umgekehrt) sorgt für bessere Lesbarkeit.
  • Farbkombinationen mit Bedacht wählen:
    Farben wie Rot und Grün sollten nicht zur alleinigen Unterscheidung von Informationen dienen.
  • Testen mit Tools:
    Es gibt hilfreiche Werkzeuge, um die Barrierefreiheit von Farbkontrasten zu überprüfen, etwa den Color Contrast Checker oder Simulationstools für Farbsehschwächen.
  • Alternative Darstellungen:
    Informationen, die farblich gekennzeichnet sind, sollten zusätzlich mit Icons, Mustern oder Text ergänzt werden.

Fazit

Farben sind mehr als nur Gestaltungselemente – sie sind Träger von Informationen. Umso wichtiger ist es, die Farbauswahl nicht ausschließlich unter gestalterischen oder markentechnischen Gesichtspunkten zu treffen. Eine barrierefreie Farbgestaltung bedeutet, alle Nutzer mitzudenken – und das zahlt sich langfristig aus: durch mehr Reichweite, bessere Nutzererfahrung und inklusive Kommunikation.

Aspekt Beschreibung Empfehlung / Best Practice Hilfreiche Tools
Kontrastverhältnis Verhältnis zwischen Textfarbe und Hintergrundfarbe Mindestens 4.5:1 für normalen Text, 3:1 für großen Text WebAIM Contrast Checker
Farbenblindheit (z. B. Rot-Grün) Bestimmte Farbkombinationen sind schwer unterscheidbar Rot-Grün-Kombinationen vermeiden Coblis Simulator
Farben im Corporate Design (CD) CI/CD-Farben müssen barrierefrei umgesetzt werden Mit barrierefreien Alternativen ergänzen Adobe Color
Farbkodierung von Informationen Farben sollten nicht die einzige Unterscheidung sein Symbole, Muster oder Text ergänzen Farben Designsysteme / Pattern Libraries
Browserkompatibilität Darstellung kann je nach Gerät und Browser variieren Tests auf verschiedenen Geräten und Browsern Browser Dev-Tools, Responsivetests
User Experience & UX-Design Farben beeinflussen Lesbarkeit und Navigation UX-Tests mit betroffenen Nutzern durchführen UserTesting, Feedbackrunden