Design für Farbblindheit und Sehschwäche

Entdecke, wie du mit Farbkontrasten, Mustern und klarer Typografie Websites für Menschen mit verschiedenen Arten von Farbblindheit und niedriger Sehkraft zugänglich machst.

10 min Lesedauer Anfänger März 2026

Verschiedene Brillen und Sehtests auf einem weißen Hintergrund — Konzept für Sehbehinderungen und optische Hilfsmittel

Warum Farbkontrast mehr ist als nur Design

Etwa 8% der Männer und 0,5% der Frauen sind von einer Form der Farbblindheit betroffen. Das sind weltweit mehr als 300 Millionen Menschen. Hinzu kommen Millionen mit Sehschwächen, die Kontraste und Schriftgrößen brauchen, um Inhalte zu erkennen.

Wenn du nur auf Farbe setzt, um Informationen zu vermitteln, schließt du diese Nutzer aus — unbeabsichtigt. Aber es gibt Lösungen, und die sind nicht kompliziert. Gutes Design für Farbblindheit funktioniert für alle besser.

Person schaut auf einen Computerbildschirm mit Designelementen und Farbpaletten — illustriert barrierefreies Webdesign

Kontrastquoten: Das Zahlensystem verstehen

WCAG 2.1 definiert Kontrastverhältnisse auf einer Skala. Das ist kein abstrakes Konzept — es hat echte Zahlen. Für normalen Text empfiehlt die Norm ein Verhältnis von mindestens 4,5:1. Das bedeutet: Die hellere Farbe ist 4,5-mal leuchtender als die dunklere.

Warum 4,5:1? Weil damit Menschen mit Sehschwächen und Astigmatismus den Text erkennen können. Für größere Texte (18pt oder größer) reicht 3:1. Und für grafische Elemente — Symbole, Icons, Diagrammlinien — brauchst du 3:1.

Schnelle Regel: Wenn du einen Text lesen kannst, aber anstrengen musst, ist der Kontrast wahrscheinlich zu niedrig.

Farbmuster und Kontrastverhältnisse nebeneinander — zeigt unterschiedliche Helligkeitsstufen für Barrierefreiheit

Verschiedene Muster und Texturen — Punkte, Linien, Schraffur — für farbblinde Nutzer

Muster und Texturen statt nur Farbe

Hier kommt das Trick-Element: Du brauchst nicht nur Farbe, um Unterschiede zu zeigen. Muster funktionieren genauso gut. Ein Diagramm mit roten und grünen Balken ist für Menschen mit Rot-Grün-Blindheit unlesbar. Aber rote Balken mit durchgehenden Linien und grüne mit Punkten? Das funktioniert.

Schraffuren, Punkte, Streifen, unterschiedliche Dicken — all das gibt deinen Inhalten visuelle Unterschiede, die nichts mit Farbe zu tun haben. Charts werden lesbarer. Buttons bekommen mehr Definition. Und Nutzer mit Farbblindheit können endlich den Inhalt verstehen.

Schriftgröße und Lesbarkeit für schwache Augen

Menschen mit Sehschwäche brauchen größere Schriften. Das ist nicht einfach eine Vorliebe — es ist eine Notwendigkeit. Eine Mindestschriftgröße von 16px für Fließtext ist Standard. Manche Nutzer vergrößern ihre Browser-Zoom sogar auf 200%.

Gutes Design muss skalierbar sein. Relative Einheiten wie em oder rem statt fixen px-Werten bedeuten, dass wenn Nutzer zoomen, alles proportional größer wird. Deine Buttons, deine Icons, deine Abstände — alles wächst mit.

Praktische Tipps:

Verwende sans-serif Schriften (Helvetica, Arial, Open Sans) für bessere Lesbarkeit
Zeilenhöhe von mindestens 1,5 — nicht eng gepackt
Letterabstand leicht erhöhen (0,05em bis 0,1em)
Blocksatz vermeiden — Flattersatz ist leichter zu lesen

Typografische Hierarchie mit verschiedenen Schriftgrößen und Zeilenhöhen — zeigt barrierefreie Lesbarkeit

Werkzeuge zum Testen und Prüfen

Du kannst deine Designs testen, bevor sie live gehen. Es gibt kostenlose Tools, die dir zeigen, wie Menschen mit Farbblindheit deine Website sehen.

Contrast Checker

WebAIM’s Contrast Checker: Gib zwei Farben ein und sehe sofort, ob sie WCAG-konform sind. Zeigt dir auch, wie die Kombination für verschiedene Arten von Farbblindheit aussieht.

Colorblind Simulator

Browser-Erweiterungen wie Color Blindness Simulator zeigen dir in Echtzeit, wie deine Website für Menschen mit verschiedenen Arten von Farbblindheit aussieht.

WAVE Accessibility

WAVE scannt deine Seite auf Kontrast-Probleme und andere Barrierefreiheits-Fehler. Es zeigt Probleme direkt auf der Seite und gibt dir konkrete Lösungen.

Coolors.co

Erstelle Farbpaletten und prüfe sofort deren Zugänglichkeit. Das Tool zeigt Kontrastverhältnisse für alle Kombinationen und simuliert verschiedene Arten von Farbblindheit.

Praktische Beispiele aus der Praxis

Ein gutes Beispiel: Verkehrsampeln in modernen Städten. Die meisten verwenden jetzt Symbole — nicht nur Farben. Das Rot hat ein X, das Grün hat einen Pfeil. So funktioniert es auch für Menschen mit Rot-Grün-Blindheit.

Im Web brauchst du das gleiche Denken. Ein Fehler-Feld in rot gefärbt? Nicht ausreichend. Das Feld muss auch einen roten Rahmen haben, ein Symbol (wie ein Ausrufezeichen-Icon) oder einen klaren Text wie „Fehler” davor.

Charts in Berichten? Nutze Farbe plus Muster. Erfolgsquoten grün mit durchgehenden Linien, Misserfolgsquoten grau mit Punkten. Jeder kann unterscheiden.

Website-Screenshot mit guten Kontrasten, Mustern und klaren Icons — Beispiel für barrierefreies Design

Die wichtigsten Punkte zusammengefasst

Kontrastquoten prüfen

4,5:1 für normalen Text, 3:1 für große Text und Grafiken. Das ist WCAG AA Standard und funktioniert für die meisten.

Nicht nur Farbe verlassen

Nutze Muster, Icons, Text und Formen zusätzlich zu Farben. Das funktioniert für alle besser.

Schrift groß und lesbar halten

Mindestens 16px, relative Einheiten verwenden, Zeilenhöhe 1,5. Das hilft Menschen mit Sehschwächen.

Regelmäßig testen

Tools wie WebAIM Contrast Checker und WAVE sind kostenlos. Nutze sie während des Designs.

Hinweis zur Barrierefreiheit

Dieser Artikel bietet einen Überblick über Designprinzipien für Farbblindheit und Sehschwächen. Er ist kein Ersatz für umfassende WCAG 2.1-Richtlinien oder professionelle Accessibility-Audits. Die Anforderungen können je nach Kontext und Land variieren. Für rechtlich sichere Implementierung empfehlen wir, mit zertifizierten Accessibility-Spezialisten zu arbeiten.