Zum Inhalt springen
InsideUX Design

UX-Glossar · engl. Contrast Ratio

Kontrastverhältnis

Das Kontrastverhältnis beschreibt, wie stark sich zwei Farben in ihrer Helligkeit unterscheiden, etwa Text und Hintergrund. Die WCAG fordern für normalen Text mindestens 4,5:1.

Stell dir vor, du stehst an einem sonnigen Tag an der Bushaltestelle und willst auf dem Smartphone schnell nachsehen, wann der nächste Bus kommt. Die App zeigt die Abfahrtszeiten in hellem Grau auf weißem Grund. Du kneifst die Augen zusammen, drehst das Display, hältst die Hand darüber. Der Bus ist weg, bevor du die Zahl lesen kannst.

Das Problem ist nicht die Schriftgröße. Es ist das Kontrastverhältnis.

Einfach erklärt

Das Kontrastverhältnis gibt an, wie stark sich zwei Farben in ihrer Helligkeit unterscheiden, meist Text und Hintergrund. Gemessen wird nicht der Farbton, sondern die sogenannte relative Leuchtdichte, also wie hell eine Farbe für das menschliche Auge wirkt. Daraus ergibt sich ein Wert zwischen 1:1 (kein Unterschied, etwa Weiß auf Weiß) und 21:1 (Schwarz auf Weiß).

Ein Vergleich aus dem Alltag: Ein mit Kreide beschriebenes Schild ist auf einer dunklen Tafel gut lesbar. Dieselbe Kreide auf einer hellgrauen Betonwand verschwindet fast. Die Schrift ist gleich, nur der Helligkeitsunterschied fehlt.

Die wichtigsten Grenzwerte

Die WCAG legen feste Mindestwerte fest:

  • 1.4.3 Kontrast (Minimum), Stufe AA: Normaler Text braucht mindestens 4,5:1. Großer Text (ab 18 Punkt, fett ab 14 Punkt, das sind etwa 24 bzw. 18,5 CSS-Pixel) braucht mindestens 3:1.
  • 1.4.6 Kontrast (erhöht), Stufe AAA: 7:1 für normalen und 4,5:1 für großen Text.
  • 1.4.11 Nicht-Text-Kontrast, Stufe AA: Bedienelemente und wichtige Grafiken brauchen mindestens 3:1 zur Umgebung, etwa der Rahmen eines Eingabefelds oder ein Fokusrahmen.

Die Werte sind harte Schwellen. Ein Ergebnis von 4,49:1 wird nicht aufgerundet und erfüllt 4,5:1 nicht. Ausgenommen sind unter anderem Logos, rein dekorative Elemente und deaktivierte Bedienelemente.

Ein Beispiel

Ein Beispiel: Ein Onlineformular nutzt für Hilfetexte das Grau #999999 auf Weiß. Das ergibt etwa 2,8:1 und fällt bei normaler Schriftgröße durch. Die Rahmen der Eingabefelder sind in #DDDDDD gehalten, rund 1,4:1. Viele erkennen kaum, wo sie klicken sollen.

Nach der Überarbeitung bekommen die Hilfetexte #767676 (etwa 4,5:1, knapp AA) und die Feldrahmen ein mittleres Grau mit mehr als 3:1. Das Design wirkt immer noch ruhig, ist aber für deutlich mehr Menschen lesbar.

Warum das wichtig ist

Zu schwacher Kontrast ist der häufigste automatisch erkannte Fehler im Web. Laut „WebAIM Million“ hatten 2026 rund 83,9 Prozent der untersuchten Startseiten Text unter den WCAG-AA-Grenzwerten. Betroffen sind nicht nur Menschen mit Sehbeeinträchtigung, sondern alle, die bei Sonnenlicht, auf alten Displays oder mit müden Augen lesen. Warum Kontrast trotzdem nur ein Baustein ist, zeigt der Artikel Warum Barrierefreiheit mehr als Kontrast und Größe ist.

In der Praxis

  • Miss, statt zu schätzen. Das Auge täuscht. Der WebAIM Contrast Checker zeigt dir für zwei Farbwerte sofort Verhältnis und Ergebnis für AA und AAA.
  • Leg geprüfte Farbpaare fest. Halte zulässige Kombinationen aus Text- und Hintergrundfarbe direkt im Design System fest, dann muss niemand jedes Mal neu rechnen.
  • Vergiss die Zustände nicht. Prüfe auch Platzhalter, Fehlermeldungen, Fokusrahmen und Text auf Bildern. Dort fallen schwache Kontraste am häufigsten durch.

Verwandte Begriffe

Barrierefreiheit, WCAG, Farbsehschwäche, Design System

Quellen

Weitere Begriffe

Ganzes Glossar