Farbe wirkt durch Unterschiede.
Farbkontraste nach Johannes Itten
Die Farbkontraste
Farbe-an-sich: reine, bunte Farbtöne nebeneinander
Hell-Dunkel: Unterschied in der Helligkeit
Kalt-Warm: Unterschied in der Farbtemperatur
Komplementär: Farben, die sich im Farbkreis gegenüberliegen
Qualität: gesättigt gegen gedämpft
Quantität: Unterschied in der Fläche
Bunt-Unbunt: Farbe gegen Grau, Schwarz und Weiß
Die Farbkontraste im Überblick
Farbe-an-sich-Kontrast
Reine Farbtöne nebeneinander: laut und plakativ
Dieselben Farbtöne, gedämpft: Der Kontrast wird schwächer
Gelb und Rot: zwei reine Farbtöne
dhl.de, Screenshot 2026
Der Kontrast als Fläche
vitra.de 2006, über web.archive.org
Hell-Dunkel-Kontrast
Gelb auf Weiß: kaum Helligkeitsunterschied
Gelb auf Dunkel: maximaler Hell-Dunkel-Kontrast
Hell-Dunkel ohne Farbe: Helligkeit allein trägt Form und Hierarchie
Dunkle Fläche, helle Schrift, einzelne helle Akzente
jetbrains.com, Screenshot 2026
Komplementärkontrast
Gelb und Violett, Orange und Blau: Gegenüber im Farbkreis
Ineinander gesetzt steigern sie sich zur höchsten Leuchtkraft
Komplementärkontrast im Screen
wodniack.dev, Screenshot aus dem Bestand
Qualitätskontrast
Dasselbe Orange, Schritt für Schritt gedämpft
Ein gesättigtes Element unter gedämpften: kräftig, ohne laut zu sein
Gedämpfte Fläche, leuchtende Akzente
Screenshot aus dem Bestand
Quantitätskontrast
Gelb und Violett zu gleichen Teilen: Gelb dominiert
Gelb zu Violett etwa 1 zu 3: im Gleichgewicht
Wenig Gelb in viel Violett: Der Blick findet sofort das Gelb
Gelb als kleiner Anteil auf viel Schwarz und Weiß
cat.com, Screenshot 2026
Bunt-Unbunt-Kontrast
Eine bunte Farbe zwischen unbunten: sofort sichtbar
Orange auf unbunter Fläche
th-koeln.de, Screenshot 2026
Fast alles unbunt, Grün markiert Marke und Hauptaktion
vuejs.org, Screenshot 2026
Analysieren Sie mit.
Welche Farbkontraste stecken in diesen Screens?
Welche Farbkontraste erkennen Sie?
netflix.com, Screenshot 2026
Hell-Dunkel (weiße Schrift auf fast schwarzem Grund), Bunt-Unbunt und Quantität (Rot nur für Logo und Hauptaktion)
netflix.com, Screenshot 2026
Welche Farbkontraste erkennen Sie?
lieferando.de, Screenshot 2026
Kalt-Warm (warmes Orange, kühles Blaugrau im Bild), Hell-Dunkel (dunkle Schrift und Button auf Orange), Farbe-an-sich im Foto
lieferando.de, Screenshot 2026
Welche Farbkontraste erkennen Sie?
airbnb.de, Screenshot 2026
Bunt-Unbunt und Quantität (Pink nur für Logo und Suchbutton), die Farbe kommt aus den Fotos
airbnb.de, Screenshot 2026
Welche Farbkontraste erkennen Sie?
duolingo.com, Screenshot 2026
Farbe-an-sich in der Illustration, Bunt-Unbunt (Grün auf viel Weiß), Hell-Dunkel beim Button
duolingo.com, Screenshot 2026
Und was fällt auf?
Fast alle Screens setzen auf Hell-Dunkel und Bunt-Unbunt. Die Farbe ist knapp, sie markiert Marke und Hauptaktion. Mehr Farbe kommt meist aus Fotos und Illustrationen.
Die dunkle Seite
Kontraste lenken. Auch weg von dem, was Nutzende wollen.
Zustimmen: bunt, groß, kontrastreich. Ablehnen: grau, klein, kaum sichtbar
Ablehnen grau und flach, OK in kräftigem Rot
otto.de, Screenshot 2026
Fair: beide Wege mit derselben Gestaltung
Wem nützt dieser Kontrast?
Die Frage für jeden Akzent, den Sie setzen.
Danke für's Mitmachen