Farben & Kontraste oder auch: Gestaltung, die alle sehen können

Farben steuern, wie wir Informationen wahrnehmen. Sie schaffen Orientierung, können aber auch für Verwirrung sorgen. Gutes Farbdesign im Web ist unaufgeregt und stimmig.

Silvia Meierhofer, 1. Dezember 2025

Eine Kollage auch verschiedenen Icons die mit Farbe zu tun haben umgeben ein Auge.

Barrierefreie Farbgestaltung bedeutet, dass Inhalte auch dann erfassbar bleiben, wenn Farben unterschiedlich wahrgenommen werden – durch eine Sehschwäche, schlechte Lichtverhältnisse oder weil jemand sein Handy draussen bei Sonnenschein benutzt.

Oder, um es wie Don Norman zu sagen:

«Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible.»
Donald Arthur Norman, Professor für Kognitionswissenschaften und Informatik

Wie Kontrast über Lesbarkeit entscheidet

Viele Designentscheidungen werden vermeintlich nach Bauchgefühl getroffen. Wir empfinden ein Blau als freundlich, ein Grau als elegant, ein Rot als mutig. Aber Farben tragen Bedeutungen – sogenannte Konnotationen. Sie erzeugen Eindrücke, noch bevor wir ein Wort gelesen haben: Rot steht für Fehler, Gefahr oder Leidenschaft, Blau für Vertrauen und Ruhe, Grün für Sicherheit oder Zustimmung. Doch entscheidend ist nicht das Gefühl, sondern die Physik – genauer gesagt: der Luminanzkontrast.

Wenn Text und Hintergrund zu wenig Helligkeitsunterschied haben, verschwimmen Formen und Buchstaben. Informationen werden unlesbar – und damit verliert das Design seine Funktion.

Warum ausgerechnet 4.5:1?

Die Zahl 4.5:1 basiert auf empirischen Lesbarkeitsstudien und wurde von der W3C Accessibility Initiative definiert, um sicherzustellen, dass Texte auch bei eingeschränktem Sehvermögen noch gut lesbar sind.

Der Kontrastwert «Zahl:Zahl» beschreibt das Verhältnis der Helligkeit zweier Farben – also wie stark sie sich voneinander abheben. Er reicht von «1:1» (kein Kontrast, z. B. weisser Text (1) auf Weiss (1)) bis «21:1» (maximaler Kontrast, z. B. schwarzer Text (21) auf Weiss (1)).

Warum also 4.5:1?
Das ist der Kontrastwert, bei welchem Forschende festgestellt haben, dass die Lesbarkeit auch für Personen mit mittleren Sehschwächen noch gegeben ist.
4.5:1 gilt für normalen Fliesstext. 3:1 für grössere Schriften, z. B. Headlines (ab ca. 24 px oder 19 px fett) und für UI-Elemente wie Buttons oder Icons.

Webdesign-Realität: Viele moderne Websites liegen mit einer hellgrauer Schrift auf weissem Hintergrund oft bei einem Kontrastwert von nur 2.8:1 – und sind damit für Millionen Nutzer:innen praktisch unsichtbar!

Wissenschaft x Design

Unsere Augen nehmen Helligkeit logarithmisch wahr. Das bedeutet: Eine Farbe, die etwas heller wirkt, kann in Wirklichkeit doppelt so hell sein. Deshalb wird der Kontrast nach einer speziellen Formel berechnet, die auf der Luminanz (Y) jeder Farbe basiert.

Je klarer die Abgrenzung zwischen Vorder- und Hintergrund, desto schneller kann das Gehirn Informationen verarbeiten.

Die höchsten Kontraste entstehen zwischen Reinweiss (#ffffff) und Tiefschwarz (#000000). Der Kontrastwert dieser zwei Farben ist 21:1. Das ist zwar perfekt lesbar, kann aber gerade am Bildschirm auch anstrengend für die Augen sein. Viele Designer:innen arbeiten deshalb mit leicht abgeschwächten Tönen um ein angenehmes Lesen zu ermöglichen.

Oder wie der Autor und Unternehmensberater Simon Sinek es ausdrückt:

«Clarity is not the same as simplicity. It’s about purpose.»

Barrierefreie Gestaltung bedeutet also, mit Absicht zu gestalten. Nicht weniger schön, sondern klarer.

Farbe alleine reicht nicht

Ein klassischer Fehler im Webdesign ist es, Fehlermeldungen nur rot oder Erfolgsmeldungen nur grün auszuzeichnen.Für Menschen mit Rot-Grün-Sehschwäche (rund 8 % der Männer, 0.5 % der Frauen) sind beide Meldungen gleich grau. Wenn Farbe die einzige Informationsträgerin ist, schliesst das Menschen also aus!

Die Lösung ist einfach: Redundanz. Kombiniere Farben mit Symbolen, Text oder Formen. Eine rote Warnmeldung wird durch ein Ausrufezeichen oder eine erläuternde Formulierung verständlich – auch ohne Farbe.

So wird Gestaltung vielseitig nutzbar – ohne langweilig zu wirken.

Praktische Tipps für Designer:innen

Mit ein paar einfachen Schritten kannst du schon viel erreichen:

  • Teste deine Farbpaare mit Tools wie dem WebAIM Contrast Checker oder direkt in Programmen wie Figma.
  • Plane Farben in Hierarchien. Definiere Primär-, Sekundär- Tertiär- und Neutralfarben mit klaren Kontrastabstufungen.
  • Teste dein Design. Überprüfe dein Design auf verschiedenen Geräten, im Sonnenlicht, im Dunkelmodus und auf Projektoren.
  • Nutze systematische Farbskalen. Frameworks wie Material Design 3 oder Tailwind Colors helfen, barrierefreie Paletten direkt zu integrieren. Bei Digital Barrierefrei arbeiten wir auch mit einem Framework und da ist das alternative Farbschema (Dunkelmodus) direkt mit dabei.

Ein weiterer Trick: Wenn du deine Farben in Graustufen umwandelst und sie dann immer noch unterscheidbar bleiben, ist dein Design auf dem richtigen Weg!

Design ist Verantwortung

Farben beeinflussen, wie wir Inhalte verstehen und erleben. Sie schaffen Atmosphäre, Emotion und Orientierung. Doch Farben können auch ausschliessen, wenn sie unüberlegt eingesetzt werden.

Barrierefreie Farbgestaltung ist deshalb nicht nur eine technische Anforderung, sondern eine Frage der Haltung. Sie macht visuelle Kommunikation zugänglicher, klarer – und letztlich menschlicher.

Oder, um Don Norman das Schlusswort zu überlassen:

«It’s not about making things simple. It’s about making things understandable.»
Donald Arthur Norman, Professor für Kognitionswissenschaften und Informatik

Referenzen

W3C: Web Content Accessibility Guidelines (WCAG) 2.2

WebAIM: Contrast and Color Accessibility

Don Norman: The Design of Everyday Things, MIT Press

Josef Albers: Interaction of Color, Yale University Press

Simon Sinek: Start With Why, Portfolio/Penguin

Material Design: Accessible Color & Contrast

Schon diese Artikel gelesen?

Wir glauben, dass da für jede:n was dabei ist: