Farben & Kontraste – So gestaltest Du barrierefreie Websites

Warum Farben und Kontraste so wichtig sind

Farben sind das erste, was Nutzer:innen wahrnehmen – sie lenken den Blick, schaffen Emotionen und Orientierung.
Doch Farben können auch Barrieren erzeugen, wenn sie schlecht gewählt oder zu ähnlich sind.

Laut WHO haben weltweit rund 300 Millionen Menschen eine Farbfehlsichtigkeit.
In Deutschland betrifft das ca. 8 % der Männer und 0,5 % der Frauen.
Wenn also z. B. Rot und Grün denselben Kontrastwert haben,
können Betroffene Schaltflächen oder Hinweise gar nicht erkennen.

Gute Farbgestaltung ist keine Geschmackssache, sondern ein UX- und Zugänglichkeitsfaktor.

→ Lies zuerst: Barrierefreiheit im Web

Wie Farben wahrgenommen werden

Farben lösen Emotionen aus – aber sie haben auch technische Wirkung:
Sie bestimmen, wie lesbar Texte und Bedienelemente sind.

Ein hellgrauer Text auf weißem Hintergrund mag elegant wirken,
ist aber für viele Nutzer:innen nicht lesbar.
Deshalb muss jedes Design sowohl ästhetisch als auch funktional gedacht sein.

Farben sollten:

  • genügend Helligkeitsunterschied haben,
  • auch ohne Farbinformationen unterscheidbar bleiben (z. B. Icons mit Symbolen statt nur Farben),
  • und konsistent im gesamten Design eingesetzt werden.

Beispiel: Wenn Links immer blau sind, erwarten Nutzer:innen, dass alle Links blau sind.
Inkonsistente Farbverwendung wirkt verwirrend und unprofessionell.

Kontrastverhältnisse nach WCAG 2.2

Die WCAG-Richtlinien (Web Content Accessibility Guidelines) definieren klare Kontrastverhältnisse,
um sicherzustellen, dass Texte und Bedienelemente auch bei eingeschränktem Sehvermögen lesbar sind.

Empfohlene Mindestwerte:

  • Normaler Text: Kontrastverhältnis von mindestens 4,5:1
  • Großer Text (>18 px fett oder >24 px normal): mindestens 3:1
  • Grafische Elemente & UI-Komponenten: mindestens 3:1

Ein hellgrauer Text (#aaa) auf weiß (#fff) hat nur 2,3:1 – also nicht barrierefrei.
Ein dunkles Grau (#555) dagegen erreicht 7,1:1 – voll barrierefrei.

💡 Tipp: Gute Designer:innen beginnen ihr Farbsystem immer mit den Kontrastwerten –
nicht mit der Farbpalette.

→ Ergänzend: Mobile UX 

Praktische Tipps zur Farbwahl

Nutze Farben mit Sinn

Verwende Farben, um Bedeutungen zu verstärken – nicht allein, um sie darzustellen.
Beispiel: Fehlermeldungen in Rot sollten zusätzlich ein Icon (⚠️) enthalten.

Achte auf neutrale Grundfarben

Hintergründe sollten hell, ruhig und kontraststark sein.
Vermeide stark gesättigte Farben im Content-Bereich.

Teste Deine Palette auf Farbschwächen

Ein Design, das nur auf Farbunterschiede setzt, ist nicht inklusiv.
Nutze Simulationen (siehe Tools unten), um zu prüfen,
wie Dein Design bei Rot-Grün- oder Blau-Gelb-Schwäche aussieht.

Halte die Hierarchie klar

Primärfarben = Hauptaktionen
Sekundärfarben = unterstützende Elemente
Neutrale Farben = Hintergrund, Text, Flächen

Konsistenz in der Farbverwendung ist entscheidend für Orientierung und Vertrauen.

Tools zur Farb- und Kontrastprüfung

Teste regelmäßig, ob Deine Website kontrastreich und barrierefrei ist.
Hier sind die besten kostenlosen Tools:

Wenn Du mit diesen Tools arbeitest, kannst Du bis zu 90 % der häufigsten Farbfehler vermeiden.

Fazit & weiterführende Themen

Farben und Kontraste sind der einfachste Weg,

Barrieren zu vermeiden und die Nutzerfreundlichkeit Deiner Website zu verbessern

Eine barrierefreie Farbgestaltung sorgt für:

  • bessere Lesbarkeit,
  • klare Hierarchien,
  • höhere Conversion-Raten,
  • und zufriedene Besucher:innen.

Wenn Du Farben bewusst einsetzt,
. gestaltest Du nicht nur schöner – sondern inklusive

→ Weiterführende Themen:

Wenn Du Unterstützung brauchst, kontaktiere uns.

Accessibility Toolbar