Zum Inhalt springen

Hell-Dunkel-Kontrast

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 11.11.2026

Der Hell-Dunkel-Kontrast entsteht, wenn helle und dunkle Farben gegeneinanderstehen. Seine stärkste Form ist laut Johannes Itten Weiß gegen Schwarz, dazwischen liegen unzählige Grautöne. Er wirkt aber genauso zwischen bunten Farben, etwa Hellgelb gegen Dunkelviolett.

Hell-Dunkel-Kontrast

Der Kontrast zwischen hellen und dunklen Farben, am stärksten zwischen Weiß und Schwarz.
Beispiel: „Dunkelblaue Schrift auf weißem Grund hat einen starken Hell-Dunkel-Kontrast und ist gut lesbar.“

Auch: Helligkeitskontrast, englisch light-dark contrast.

Einer der sieben Farbkontraste nach Itten.

Der Hell-Dunkel-Kontrast bei Itten

Itten ließ seine Schüler eine Grauskala in zwölf gleichmäßigen Stufen von Weiß bis Schwarz malen. Laut dem Lehrmaterial der Hamburg Open Online University verstärkt der Kontrast Räumlichkeit und Plastizität; Caravaggio und Rembrandt nutzten ihn für ihre Lichtführung. Was für den Farbe-an-sich-Kontrast Gelb, Rot und Blau sind, ist für den Hell-Dunkel-Kontrast Schwarz und Weiß.

Sieben quadratische Kacheln nebeneinander, jede mit einem Beispiel: Gelb, Rot und Blau; Hellgelb und Dunkelviolett; Blaugrün und Rotorange; Orange und Blau; ein graues Feld auf Orange; kräftiges und stumpfes Rot; ein kleines gelbes Feld auf großer violetter Fläche.
Die zweite Kachel zeigt den Hell-Dunkel-Kontrast: Hellgelb gegen Dunkelviolett.

Hell-Dunkel-Kontrast und Barrierefreiheit

Die Kontrastformel der WCAG misst im Kern genau diesen Kontrast: Sie vergleicht die relative Leuchtdichte zweier Farben, der Farbton spielt keine Rolle. Das Kontrastverhältnis reicht von 1 zu 1 bis 21 zu 1; normaler Text braucht mindestens 4,5 zu 1, Bedienelemente 3 zu 1. Deshalb fällt reines Rot auf Grau durch, obwohl die Farben sehr verschieden aussehen: Sie sind fast gleich hell.

Den Hell-Dunkel-Kontrast prüfen

Ob er reicht, zeigen Kontrastrechner, die das Verhältnis nach der WCAG-Formel ausgeben. Ein schneller Test für ganze Entwürfe: das Bild in Graustufen umwandeln, ganz im Sinne von Ittens Grauskala. Was dann verschwimmt, unterscheidet sich nur im Farbton und ist für viele Menschen schwer zu trennen.

Siehe auch:

Die sieben Farbkontraste nach Itten

Sieben Arten, wie Farben sich voneinander abheben, beschrieben von Johannes Itten in Kunst der Farbe (1961).

#Gestaltungsgrundlagen

Kontrastverhältnis

Messwert für den Helligkeitsunterschied zwischen Text und Hintergrund.

#Barrierefreiheit (Accessibility) #Gestaltungsgrundlagen #Benutzererfahrung (UX)

Farbe-an-sich-Kontrast

Der Kontrast reiner, ungetrübter Farben in voller Leuchtkraft nebeneinander, am stärksten bei Gelb, Rot und Blau.

#Gestaltungsgrundlagen

Helligkeit (Brightness)

Das Maß dafür, wie hell eine Farbe erscheint, also wie viel Licht eine Fläche abzugeben scheint.

#Gestaltungsgrundlagen

WCAG (Web Content Accessibility Guidelines)

Internationale Richtlinien des W3C für barrierefreie Webinhalte.

#Barrierefreiheit (Accessibility)