Barrierefreie Farben und Farbkontraste im UI Design 2025

Stell dir vor, ein wichtiger Button in deiner Anwendung existiert für 8% deiner männlichen Nutzer nicht.

Nicht aufgrund eines Bugs, sondern weil sie den Button nicht sehen können. Sie können die Farbe des Buttons beispielsweise nicht vom Hintergrund unterscheiden oder die Schrift darauf nicht lesen.

Obwohl von der echten Farbenblindheit (Achromasie) nur etwa 2.700 Menschen in Deutschland betroffen sind, leben etwa 8% aller Männer und 0,4% aller Frauen mit einer Farbsehschwäche, die das Farbsehen beeinflusst (Quelle). 

Und trotzdem machen wir das:

• Fehler = rot

• Erfolg = grün

• Info = blau

Für Millionen Nutzer verschwimmen diese Signale zu einem unlesbaren Grauschleier.

Das perfekt gestaltete Interface. Funktioniert nicht. Es ist nicht barrierefrei.

Farbe kann Nutzerentscheidungen beeinflussen. Aber nur, wenn sie wahrgenommen wird.. Das passiert nur mit ausreichendem Kontrast. 

In diesem Artikel zeige ich dir, wie du Farbkontraste so gestaltest, dass dein Produkt wirklich bei allen ankommt. Ohne Redesign. Ohne Verlust deiner Markenidentität. Aber mit klar messbarem Einfluss auf Lesbarkeit, UX und Conversion.

Wer auf barrierefreie Farbkontraste angewiesen ist. 

Viele Menschen haben Schwierigkeiten, Inhalte auf Webseiten und in Apps zu erfassen. Gründe sind häufig schwache Kontraste und Farbkombinationen. Und das betrifft nicht nur Menschen mit offizieller Behinderung sonder Millionen von Menschen weltweit. 

• Farbfehlsichtigkeit: Rot-Grün-Schwäche, Blaublindheit oder totale Farbfehlsichtig führen dazu, dass farbcodierte Zustände – etwa Fehlermeldungen, Interaktionen oder Statusanzeigen – nicht mehr unterscheidbar sind.

• Kontrastsensitivität: Ab etwa 60 Jahren wird das Erkennen feiner Helligkeitsunterschiede schwächer. Farbabstufungen, Light Themes oder schwache Schriftfarben verschwimmen.

• Kognitive oder neurologische Besonderheiten: Menschen mit ADHS, Autismus oder hoher Reizempfindlichkeit profitieren von klaren visuellen Unterscheidungen. Guter Kontrast hilft, Inhalte schneller zu erfassen. 

• Motorische Einschränkungen & assistive Technologien: Wer mit Tastatur oder Screenreader navigiert, ist auf deutlich sichtbare Fokuszustände angewiesen. Farbwechsel allein reichen hier nicht aus – es braucht Outline, Form oder Position.

Aber auch temporäre Einschränkungen sind alltäglich: 

• Blendung durch Sonnenlicht

• schlechte Displays

• eine vergessene Brille

• visuelle Erschöpfung nach einem langen Tag

Guter Kontrast hilft  in all diesen Fällen. Und mehr noch: Er steigert auch die perceived performance (Quelle) – also die gefühlte Geschwindigkeit, Klarheit und Reaktionsfähigkeit deiner Anwendung. Nutzer:innen empfinden dein Produkt als intuitiver, hochwertiger und verlässlicher, wenn Inhalte sofort erfassbar sind.

Du erinnerst dich vielleicht an den Curb-Cut-Effekt, den ich im Artikel zur inklusiven UX beschrieben habe: Was ursprünglich für Menschen mit Einschränkungen entwickelt wurde, verbessert das Erlebnis für alle. Für dein Produkt heißt das: weniger Supporttickets, höhere Task Completion Rates, bessere Conversion. UX beginnt mit Sichtbarkeit – und genau da macht der Kontrast den Unterschied.

Warum Helligkeit wichtiger ist als der Farbton

Unser Gehirn fragt nicht "Welche Farbe ist das?" sondern "Was ist heller?"

Diese Helligkeit nennt man Luminanz (Lightness). Der Helligkeitsunterschied zwischen Text und Hintergrund ist der Kontrast.

Großer Unterschied = gut lesbar.
Kleiner Unterschied = alles verschwimmt.

Und jetzt kommt das Spannende:
Auch wenn zwei Farben ganz unterschiedlich wirken – z. B. Rot und Grün – können sie gleich hell sein.

Die drei Bestandteile von Farbe

• Hue (Farbton): rot, blau, grün

• Saturation (Sättigung): wie intensiv die Farbe wirkt

• Lightness (Helligkeit): wie hell oder dunkel sie erscheint

Für Branding spielen alle drei Rollen. Für Lesbarkeit zählt fast nur die Lightness.

Deshalb reicht es nicht, zwei Farben „unterschiedlich genug“ zu wählen – man muss sie kontrastreich genug kombinieren. Wie du das konkret misst und welche Standards dabei gelten, schauen wir uns jetzt an.

Modelle und Tools für „guten Farbkontrast“ im Überblick.

WCAG 2.1: Die aktuelle Basis für die Rechtslage

Die Web Content Accessibility Guidelines (WCAG) bilden die Grundlage für viele internationale Gesetze zur digitalen Barrierefreiheit.

Die deutsche BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) verweist direkt auf die WCAG 2.1, Level AA. Damit ist sie mit dem Barrierefreiheitsstärkungsgesetz (BFSG) für deutsche Anbieter rechtlich relevant.

Die wichtigsten Grenzwerte für Level AA WCAG Konformität:

• 4.5:1 für normalen Text (<18.5px (bold) oder 24px (regular))

• 3:1 für großen Text (18.5px (bold) oder 24px (regular) oder größer) (Quelle)

Was bedeutet das konkret?

Erreicht deine Website oder dein Produkt diese Werte nicht, verstößt du gegen gesetzliche Vorgaben. Noch schlimmer: Wichtige Inhalte werden für viele Nutzer unzugänglich.

Randnotiz: Dekorativer Text ist ausgeschlossen.

Warum WCAG konformer Farbkontrast nicht unbedingt „lesbar“ ist.

Das Problem: Die WCAG 2.x-Formel stammt aus den 2005/2008 (Quelle) – und bildet damit sowohl einige Fälle von modernen UIs als auch Entwicklungen der Bildschirmtechnologien nicht ab:

• helle Farben auf dunklem Hintergrund (Dark Mode)

• stark gesättigte Farben mit ähnlicher Helligkeit

• visuelle Effekte wie Schatten oder Blur

• Mobiltelefon-  & Tablet Interfaces 

Ergebnis: Eine Farbkombination kann formal den Test bestehen – ist aber in der Praxis kaum lesbar.

APCA: Ein neuer Weg zur echten Lesbarkeit

Deshalb wird aktuell ein neuer Standard entwickelt: APCA (Accessible Perceptual Contrast Algorithm). Im Gegensatz zur alten Formel berücksichtigt APCA, wie Menschen Helligkeit wahrnehmen – inklusive Schriftschnitt, Größe und Darstellung auf unterschiedlichen Displays.

APCA wird in die kommende WCAG 3.0 einfließen – du kannst es aber schon jetzt in Tools wie Stark oder im Web testen.

Die häufigsten Kontrastprobleme in SaaS-Produkten und Apps.

Viele Kontrastprobleme entstehen in UI-Details, die oft übersehen – aber ständig genutzt werden.

Diese Stellen gehen im Alltag oft unter – sind aber kritisch:

Placeholder-Texte: Hellgrau auf Weiß sieht modern aus, ist aber für viele unlesbar – gerade auf mobilen Geräten oder bei schwachem Licht.

Hover- und Focus-Zustände: Wenn sich nur die Farbe ändert, kann das bei Farbsehschwäche komplett „unsichtbar" bleiben.

Disabled States: Deaktivierte Felder oder Buttons sehen oft wie aktive aus – oder umgekehrt. Das führt zu Frustration und Irritation. Wichtig: bei disabled states gilt der Kontrastwert natürlich nicht, da es relevanter ist, eine Unterscheidbarkeit zu den aktiven States zu gewährleisten.

Farbkodierte Diagramme: Rot-Grün-Kombis ohne Labels oder Symbole sind für viele Menschen nicht unterscheidbar.

Tastaturnavigation: Fokus-Indikatoren, die nur farblich gesetzt sind, können schnell untergehen.

Das Problem: Besonders bei SaaS-Tools verwenden wir oft subtile Farbunterschiede für komplexe Informationsarchitekturen. Status-Badges, Prioritäten, Kategorien – alles farbcodiert. Für 8% deiner männlichen Nutzer ist das wie ein Interface ohne Beschriftung.

Profi-Tipp: Den perfekten Kontrast nutzt nichts, wenn die Schrift selbst nicht barrierefrei ist. In meinem Artikel zu barrierefreien Schriften erfährst du alles über lesbare Typografie – von Schriftarten bis zur optimalen Größe.

Was du testen solltest – systematisch vorgehen

Gerade bei skalierenden Produkten lohnt sich ein einmaliger Audit der zentralen Farb- und Komponenten-Logik:

Lege Farbrollen/-variablen fest, z. B.:

• text/onPrimary

• text/onAccent

• border/focus

• background/error

Prüfe jede dieser Rollen einmal nach WCAG / APCA – und dokumentiere die Ergebnisse.

Integriere die Kontrastverhältnisse direkt in deinen Style Guide oder Storybook. Das spart dir im Alltag Diskussionen – und hilft, Accessibility dauerhaft mitzudenken.

Tools und Tipps für den Kontrast-Check

Du brauchst kein Entwicklerteam, um den Kontrast von Farben zu prüfen. Diese Tools reichen für einen ersten Überblick:

Barrierefreie Farbe mit Figma testen (ohne Plugin)

Markiere ein Textfeld oder die jeweilige Hintergrundfläche. Wenn du jetzt auf die Farbauswahl rechts im Edit-Bereich klickst, siehst du in der rechten Ecke des Dialogfensters ein Icon für “Kontrast”. Wenn du es durch einen Klick aktivierst, wird dir eine Linie innerhalb der Farbvorschau angezeigt. Der Bereich, der dem Kontrastwert entspricht, erkennst du daran, dass er keine Rasterung hat. Nun siehst du, dass alles im gerasterten Bereich

Stark Plugin für Figma

Suche in den Plugins nach dem “Stark - Contrast and Accessbility checker”. Starte das Plugin und wähle den Menu-Punkt “Kontrast”. Wenn du nun ein Objekt anklickst, wird dir direkt angezeigt für welche Art von Text der Kontrast ausreichend für die WGAG-Kriterien ist. Vorteil ist hier: Du kannst zwischen den Modellen WCAG und APCA wechseln. 

Chrome DevTools (Websites prüfen)

Wenn du bereits umgesetzte Seiten testen möchtest, kannst du das ganz easy ohne weitere Installationen im Dev-Modus im Chrome (auch für brave oder Arc verfügbar). Rechtsklick → „Untersuchen“ → Element auswählen. Im Dialog siehst du neben den Farbwerten, ob das Kontrastverhältnis ausreicht. 

Nutze diese Tools nicht nur für Text – prüfe auch Labels, Placeholder, Button-Text, Charts und Fokuszustände. Gerade dort verstecken sich viele Barrieren. Dazu gibt’s noch mehr Infos im nächsten Abschnitt.

HSL-Farbsystem zur schnellen Optimierung deiner Farbschemata

Gerade bei der Optimierung deines Designsystems ist HSL besonders hilfreich: Du kannst gezielt nur die Helligkeit (L) oder Sättigung (S) anpassen, ohne den Farbton (H) zu verändern – z. B. um eine CI-Farbe lesbarer zu machen, ohne das Branding zu brechen. Stelle in figma im Farb-Dialog das Modell auf HSL um und erhöhe mit den Pfeiltasten deiner Tastatur oder die Eingabe eines numerischen Werts nur den L (Lightness)-Bereich.

Fazit & nächste Schritte: Kontrast ist kein Detail – sondern Voraussetzung

Kontrast entscheidet, ob dein Produkt nutzbar ist. Nicht für eine Randgruppe – sondern für alle.

Wenn Nutzer:innen Texte nicht lesen, Zustände nicht erkennen oder Buttons übersehen, liegt das oft nicht am UI selbst – sondern an fehlendem Luminanzkontrast.
Gerade im SaaS-Umfeld, wo Onboarding, Interaktionen und Conversion-Pfade entscheidend sind, wird das zur echten Business-Bremse.

Und das Beste:
Du brauchst kein Redesign, um das zu beheben. Du brauchst System, Tools – und die Bereitschaft, Farbe nicht nur als Branding-Element zu sehen, sondern als Funktion.

Guter Kontrast ist kein Kompromiss, sondern ein Wettbewerbsvorteil:

• für Conversion

• für Customer Experience

• für langfristige UX-Reife
  
  

Was du jetzt tun kannst:

Lass dein UI Design oder Designsystem auf Barrierefreiheit & Kontrast prüfen. Wir zeigen dir, wo du mit minimalem Aufwand maximale Wirkung erzielst. Und das ohne Bruch im Branding, dafür mit messbaren Erfolgen.

Nimm Kontakt auf

Häufig gestellte Fragen zu barrierefreien Farben

Welches Kontrastverhältnis brauche ich für WCAG-Konformität?

• 4,5:1 für normalen Text (unter 24px bzw. 18,5px bold)

• 3:1 für großen Text (ab 24px bzw. 18,5px bold)

• 3:1 für UI-Elemente wie Buttons, Icons und Formulare

Welche Farben sind barrierefrei?

Es gibt keine "barrierefreien" oder "nicht-barrierefreien" Farben. Entscheidend ist das Kontrastverhältnis zwischen Text und Hintergrund. Selbst helle Pastellfarben können barrierefrei sein, wenn sie richtig kombiniert werden.

Was ist der Unterschied zwischen WCAG und APCA?

• WCAG 2.1: Aktueller Standard (seit 2008), rechtlich bindend

• WCAG 2.2: Neuster Standard (seit Dezember 2024) noch nicht rechtlich bindend

• APCA: Neuer Algorithmus für WCAG 3.0, berücksichtigt menschliche Wahrnehmung besser

• Empfehlung: WCAG für Compliance nutzen, APCA als zusätzlicher Check

Darf ich Rot und Grün zusammen verwenden?

Ja, aber nicht als einziges Unterscheidungsmerkmal. Ergänze immer durch:

• Symbole oder Icons

• Textlabels

• Verschiedene Formen

• Muster oder Texturen

Was sind die häufigsten Kontrastfehler?

1. Placeholder-Text: Oft zu hell auf weißem Hintergrund

2. Disabled States: Schwer von aktiven Zuständen unterscheidbar

3. Hover-Effekte: Nur Farbwechsel ohne weitere Indikatoren

4. Charts ohne Labels: Reine Farbkodierung ohne Text

5. Fokus-Indikatoren: Zu schwach oder nur farblich

Wie erkenne ich Farbfehlsichtigkeit in meinem Design?

Tools für Simulation:

• Figma: Stark Plugin mit Farbblindheits-Simulator

• Chrome: DevTools → Rendering → "Emulate vision deficiencies"

• Online: Coblis Color Blindness Simulator

• Tipp: Graustufenansicht zeigt schnell Kontrastprobleme

Muss ich mein Corporate Design ändern?

Nicht unbedingt. Alternativen:

• Farbe abdunkeln/aufhellen (HSL-Modell nutzen)

• Zusätzliche Elemente ergänzen (Rahmen, Icons, Pattern)

• Kontextuelle Anpassung (CI-Farbe für Dekoration, neutrale Farben für Text)

• Systematische Palette entwickeln mit verschiedenen Helligkeitsstufen

Was passiert bei Verstößen gegen BFSG 2025?

• Rechtliche Konsequenzen: Abmahnungen und Klagen möglich

• Geschäftliche Risiken: Verlust von 8-15% der Nutzer

• Reputationsschäden: Negative Bewertungen und PR

• SEO-Impact: Google berücksichtigt Accessibility-Signale

Welche Tools sind am besten für Kontrast-Checks?

Für Designer:

• Stark (Figma): Sehr gute Workflow-Integration

• Figma nativ: Schnell für einzelne Checks

Für Entwickler:

• Chrome DevTools: Direkter Website-Test

• WebAIM Contrast Checker: Online-Standard

Dark Mode vs. Light Mode: Was ist barrierefreier?

Eine der häufigsten Fragen: Soll ich Dark Mode oder Light Mode als Standard wählen?

Die Antwort: Beides kann barrierefrei sein – oder eben nicht.

Dark Mode-Herausforderungen:

• Helle Farben auf Schwarz können "bleeding" verursachen (Lichthöfe)

• Astigmatismus wird oft verstärkt

• WCAG 2.1 wurde primär für Light Mode entwickelt

Light Mode-Herausforderungen:

• Blendung bei hoher Helligkeit

• Ermüdung bei langen Sessions

• Probleme bei schlechten Lichtverhältnissen

Best Practice: Biete beide Modi an und lass Nutzer wählen. Wichtiger als die Wahl des Modus ist, dass beide Modi die WCAG-Kontrastwerte erfüllen.