Zum Inhalt springen

Kontrastverhältnis

oder auch Contrast Ratio, Kontrastwert

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 16.10.2026

Das Kontrastverhältnis ist der Messwert für den Helligkeitsunterschied zwischen Text und Hintergrund. Es reicht von 1 zu 1 bei gleicher Helligkeit bis 21 zu 1 bei Schwarz auf Weiß und wird aus der relativen Leuchtdichte beider Farben berechnet.

Kontrastverhältnis

Messwert für den Helligkeitsunterschied zwischen Text und Hintergrund.
Beispiel: „Das Kontrastverhältnis von Grau auf Weiß liegt bei 4,5 zu 1 und reicht damit für Fließtext.“

Auch: Contrast Ratio oder Kontrastwert. Geschrieben wird er als Verhältnis, etwa 4,5 : 1.

Abgrenzung zum Farbkontrast in der Gestaltung: Dort geht es um Wirkung und Zusammenspiel von Farben. Hier geht es allein um Helligkeit, und der Farbton spielt keine Rolle.

Vier Zeilen desselben Beispieltextes in zunehmend dunklerem Grau, daneben die Kontrastwerte 1,9 : 1, 3,0 : 1, 4,5 : 1 und 7,0 : 1 sowie die Angabe, wofür der Wert jeweils reicht
Dieselbe Schrift in vier Graustufen, mit dem jeweils erreichten Wert.

Welche Werte gelten

Für Fließtext 4,5 zu 1. Für große Schrift genügen 3 zu 1, wobei groß ab 24 Pixeln beginnt oder ab 18,5 Pixeln, wenn fett gesetzt wird. Für die Umrisse von Bedienelementen und für bedeutungstragende Grafiken gelten ebenfalls 3 zu 1.

Festgelegt ist das im Erfolgskriterium Kontrast (Minimum) 1.4.3. Ausgenommen sind Logos und reine Dekoration, nicht aber Platzhaltertexte in Formularen.

Wie der Wert zustande kommt

Aus der relativen Leuchtdichte der beiden Farben, nicht aus dem Farbabstand. Deshalb kann ein kräftiges Orange auf Weiß durchfallen, während ein mittleres Grau besteht. Prüfwerkzeuge rechnen das aus; verlassen sollte man sich nicht auf den Augenschein.

Dasselbe gilt für Verläufe und Bilder hinter Text: Geprüft wird die ungünstigste Stelle. Wo der Hintergrund wechselt, hilft eine abdunkelnde Fläche zwischen Bild und Schrift.

Woran es in der Praxis scheitert

An der Markenfarbe. Viele Logofarben erreichen auf Weiß keine 4,5 zu 1 und taugen deshalb nicht für Text, wohl aber für Flächen mit weißer Schrift darauf. Es geht also um die Stelle, an der die Farbe steht, und nicht um die Farbe selbst.

Aus unserer Arbeit an über 2.500 Website-Projekten sind die drei häufigsten Fundstellen immer dieselben: hellgrauer Platzhaltertext in Formularfeldern, hellgraue Nebenangaben unter Überschriften und deaktivierte Schaltflächen, die kaum noch zu lesen sind.

Siehe auch:

Barrierefreiheit

Eigenschaft eines Angebots, von Menschen mit Behinderungen ohne fremde Hilfe genutzt werden zu können.

#Barrierefreiheit (Accessibility) #Benutzererfahrung (UX)

Dark Mode

Darstellung einer Oberfläche mit dunklem Hintergrund und hellem Text, als Alternative zur hellen Standarddarstellung.

#Webdesign-Grundlagen

Bedienelement

Element einer Oberfläche, über das Besucher etwas auslösen oder eingeben.

#Benutzererfahrung (UX)

Automatisierte Prüfwerkzeuge (Barrierefreiheit)

Programme, die eine Seite maschinell auf Barrierefreiheitsfehler prüfen.

#Barrierefreiheit (Accessibility)

Farbenblindheit

Eingeschränkte Unterscheidung von Farben, meist zwischen Rot und Grün.

#Barrierefreiheit (Accessibility)

Kontrast von Bedienelementen

Die Anforderung von 3:1 für Bedienelemente und für wichtige Teile von Grafiken.

#Barrierefreiheit (Accessibility)