Barrierefreie Farben: Kontraste, die für alle funktionieren

Farbkontraste: Kleine Ursache, große Wirkung

Ein starker Kontrast zwischen Text und Hintergrund sorgt für gute Lesbarkeit – unabhängig vom Gerät, der Umgebung oder der individuellen Sehfähigkeit. Die WCAG-Richtlinien empfehlen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für große Schrift oder UI-Elemente.

Und trotzdem: Extrem viele Websites machen genau hier einen entscheidenden Fehler. Hellgrauer Text auf weißem Hintergrund? Zarte Farben ohne Tiefe? Sieht vielleicht edel aus – ist aber für viele schlicht unlesbar. Und das Krasse daran: Dieser Fehler ist super einfach zu vermeiden.

Einfache Regel:

• Normaler Text (unter 24px): 4,5:1 Kontrast
• Großer Text (ab 24px): 3:1 Kontrast
• Fetter Text (ab 19px): 3:1 Kontrast

Praktische Beispiele:

• 16px Text: 4,5:1
• 20px fett: 3:1
• 26px Text: 3:1

Wo Farbkontrast-Regeln nicht gelten

Nicht alle Inhalte auf einer Website müssen bestimmte Kontrastverhältnisse einhalten. Für folgende Fälle gelten keine Kontrast-Anforderungen:

• Logos
  Firmenlogos dürfen auch mit geringem Farbkontrast dargestellt werden – z. B. weiße Schrift auf gelbem Hintergrund.
• Markennamen
  Wenn ein Markenname grafisch als Teil eines Logos oder Designs erscheint, ist kein Mindestkontrast nötig.
• Rein dekorative Elemente
  Inhalte ohne Informationswert – z. B. Hintergrundgrafiken, Muster oder visuelle Spielereien – brauchen keinen hohen Kontrast.
• Icons ohne Bedeutung
  Wenn ein Icon nur zur Deko dient (z. B. Sternchen, Wellenlinien), ist der Kontrast egal.
• Inaktive Bedienelemente
  Buttons oder Formularelemente, die gerade deaktiviert sind, müssen keinen bestimmten Kontrast erfüllen.

Farben nie als alleinige Informationsquelle

Ein weiterer Klassiker: Grün bedeutet „erfolgreich“, Rot „Fehler“ – und das war’s. Das Problem? Viele Menschen mit Farbfehlsichtigkeit können Rot und Grün nicht unterscheiden. Wenn Farben die einzige Information sind, geht diese Information verloren.

Besser: Kombiniere Farbe immer mit Symbolen, Text oder Mustern. Ein „✓ Erfolgreich“ oder ein rotes Kreuz mit dem Wort „Fehler“ sind für alle verständlich – auch ohne Farbsehen.

So testest du deine Farbkontraste

Es gibt mehrere kostenlose Tools, mit denen du direkt prüfen kannst, ob deine Farben barrierefrei sind:

Silktide zeigt dir auch, wie deine Website für Menschen mit Farbenblindheit aussieht

Farbkontraste in Figma testen

Figma hat vor Kurzem selbst eine einfache Farbkontrastanzeige eingebaut. Sobald du Text auswählst und im rechten Panel die Farbe öffnest, siehst du direkt, ob der Kontrast zur Hintergrundfarbe den WCAG-Richtlinien entspricht – super hilfreich für schnelle Checks im Designprozess.

Noch genauer wird es mit dem kostenlosen Plugin Contrast. Das Plugin erkennt sogar, ob dein Text ausreichend Kontrast zu Hintergrundbildern hat – etwas, das die meisten anderen Tools gar nicht können. Damit lassen sich auch komplexe Layouts realitätsnah prüfen, bevor sie umgesetzt werden.

Deine Checkliste für barrierefreie Farben