4.9
(369)

Die 8 Farbkontraste

Bedeutung, Wirkungen & Praxis-Beispiele aus Print- & Webdesign

Was sind Farbkontraste?

Ein Farbton kommt quasi nie alleine zum Einsatz, sonst würde man ja nur eine einfarbige Fläche sehen. Schon Texte leben von dem Kontrast zwischen zwei Farbtönen (Schriftfarbe auf Hintergrundfarbe). Diesen Unterschied zwischen zwei Farbtönen nennt man Farbkontrast. Ein Farbkontrast ist also für die visuelle Wahrnehmung elementar.

Jeder Farbton hat seine ganz eigene Farb-Bedeutung. Wenn nun zwei oder mehrere Farben eingesetzt werden, stehen diese in einem Verhältnis zueinander, sie beeinflussen sich gegenseitig. Das bedeutet, dass nicht nur jede Farbe für sich wirkt, sondern sie zusammen eine ganz eigene Wirkung erzeugen, eventuell sogar eine ganz neue.

Wie entstehen Farbkontraste?

Ein Kontrast bedeutet Gegensatz – es stehen also zwei gegeneinander. Bei einem Bild meint man damit meistens den Unterschied zwischen hellen und dunklen Bereichen/Farben (siehe das rechte Bild). Bei den Farben meint der Kontrast den Unterschied zwischen den eingesetzten Farbtönen und die daraus entstehende Wirkung.

Je nach Umgebungsfarbe ist die Wahrnehmung einer Farbe in ihrem Farbton und ihrer Helligkeit unterschiedlich. So kann die Wirkung einer Farbe durch entsprechende Kontrastfarben gesteigert oder auch geschwächt werden. Man könnte also sagen, die Farbwahrnehmung ist relativ und einem stetigen Wandel unterzogen.

Der Schweizer Maler und Kunstpädagoge Johannes Itten beschäftigte sich viel mit Farben und ihren Wirkungen und entwickelte das Prinzip der sieben Farbkontraste. Diese sind nach wie vor von Bedeutung – auch im Webdesign und in der visuellen Kommunikation an sich.

Im folgenden lernst du die Farbkontraste ausführlich kennen mit vielen Praxisbeispielen!

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 1

Vor allem der Farbkontrast zwischen den beiden leuchteten Farbtönen macht dieses Bild so interessant.

Farbkontrast Schwarz Weiss

Das Bild lebt vom extremen Helligkeitskontrast zwischen Schwarz und Weiß.

 

Die 8 Farbkontraste im Überblick:

Komplementärkontrast

Farbe-an-sich-Kontrast

Hell-Dunkel-Kontrast

Kalt-Warm-Kontrast

Quantitätskontrast

Qualitätskontrast

Simultankontrast

Bunt-Unbunt-Kontrast

Komplementärfarben &
der Komplementärkontrast

Wohl der bekannteste Kontrast und eine spannende Methode, damit du dein Design wirksam und ansprechend gestalten kannst, bietet der Einsatz von Komplementärfarben.

Was ist der Komplementärkontrast?

„Komplementär“ steht für gegensätzliche, aber sich ergänzende Eigenschaften.

Komplementäre Farben liegen sich im Farbkreis als Gegensatz gegenüber. Man nennt sie auch Ergänzungsfarben. Sie ergeben den stärksten Kontrast und sind damit besonders aufmerksamkeitsstark.

Der Komplementärkontrast beschreibt den Kontrast, der sich bei der simultanen Verwendung zweier sich im Farbkreis gegenüberliegenden Farben ergibt.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 3
Der Farbkreis: Die Komplementärfarben liegen jeweils gegenüber.

Primärfarben und ihre Komplementärfarben

Das Konzept der Farbkreise ist im Design die Grundlage der Farbenlehre. Ein Farbkreis ist sozusagen ein Ordnungssystem, das uns dabei hilft, Farbtheorien abzuleiten. Je nachdem, welchen Farbkreis du zugrunde legst, ergeben sich unterschiedliche Komplementärfarben.

Möchte man die komplementäre Farbe zu einer Farbe des CMYK-Farbkreises ermitteln, so gilt folgender Grundsatz:
Die Komplementärfarbe zu einer Primärfarbe entsteht durch das Mischen zu gleichen Anteilen der beiden anderen Primärfarben.

 

Das Problem: es gibt nicht den einen Farbkreis, sondern unterschiedliche Ansätze. Die Farbkreis richten sich teils nach den technisch unterschiedlichen Möglichkeiten Farben zu erzeugen und teils nach der Farbwirkung. Die beiden bekanntesten sind die Farbkreise von Itten und Küppers, über die du hier mehr erfahren kannst.

Da wir uns vor allem um die Gestaltung interessiert, ist der Farbkreis von Johannes Itten am hilfreichsten. Ittens Farbkreis basiert auf den drei Grundfarben (Primärfarben) Gelb, Rot und Blau. Mischt man diese, so ergeben sich die Sekundärfarben Grün, Violett und Orange. Die Mischung einer Primär- mit einer Sekundärfarbe ergibt wiederum eine Tertiärfarbe wie Blaugrün, Blauviolett, Purpurrot, Orangerot, Dunkelgelb und Hellgrün.

Somit ergeben sich nach Ittens Farbkreis folgende Komplementärkontraste:

  • Gelb-Violett
  • Blau-Orange und
  • Rot-Grün
Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 4

Weitere Komplementärfarben

Betrachtet man neben den Primär- und Sekundärfarben auch die Tertiärfarben, so ergibt sich eine Vielzahl an Komplementären. Die große Vielfalt an Ergänzungsfarben steigert den Gestaltungsfreiraum für deine Designs enorm.

Werfen wir einen Blick auf den Farbkreis und die Tertiärfarben, so ergeben sich folgenden Komplementärkontraste:

  • Dunkelgelb und Blauviolett
  • Orangerot und Blaugrün
  • Magenta und Hellgrün
Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 5
Der Komplementärkontrast bei den Tertiärfarben

Komplementärfarben richtig einsetzen

Um wirksame Designs zu erstellen, ist es wichtig, den Komplementärkontrast richtig einzusetzen. Durch den simultanen Einsatz von zwei oder mehreren gegensätzlichen Farben fordern wir die Wahrnehmung des Betrachters heraus. Damit deine Designs nicht anstrengend und überfordernd wirken, ist folgender Grundsatz hilfreich:

Achte darauf, Komplementärfarben nicht zu gleichen Anteilen zu verwenden. Entscheide dich besser für eine dominante Farbe.

Für dein Webdesign oder Corporate Designs kannst du das recht einfach umsetzen, indem du die Hauptfarbe um ihren Komplementär als Akzentfarbe ergänzt. Bei der Gestaltung kannst du dann mit verschiedenen Proportionen spielen, um auffällige, aber harmonische Designs zu erzeugen.

Der Kontrast zwischen zwei komplementären Farben wirkt oft sehr bunt und lebhaft, bewegt. Er erzeugt aber oft auch einen ästhetisch ansprechenden und vollständigen Eindruck.

Dies kann man sich in Designs zunutze machen, um Motive, Designs oder Werbung noch eindrucksvoller wirken zu lassen, wie die Beispiele hier gut zeigen.

Komplementärkontrast-Assoziationen:

  • fordern sich gegenseitig
  • steigern sich zu höchster Leuchtkraft
  • verdichten sich in der Mischung zu Grau
Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 2

Komplementärfarben nebeneinander

Benutzen wir zwei Komplementärfarben nebeneinander, entsteht eine Art optische Täuschung: Die beiden Farben erscheinen heller und intensiver. Diesen Effekt bezeichnet man auch als Simultankontrast und er beschreibt das Phänomen, dass unser Auge gleichzeitig zu einer Farbe auch immer die dazugehörige Komplementärfarbe wahrnimmt. Das ist hilfreich, um nebeneinander liegende Farbflächen voneinander abzugrenzen und wirkt anregend und belebend.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 7

Komplementärfarben aufeinander

Komplementärfarben aufeinander zu verwenden, ist besonders hilfreich, um Text vom Hintergrund abzuheben. Hierbei ist es allerdings wichtig, den Hell-Dunkel-Kontrast zu beachten!
Während beispielsweise Gelb auf Violett (und umgekehrt) meistens funktioniert, sieht Rot auf Grün (und umgekehrt) meistens unlesbar aus.

Beispiele für Komplementärfarben im Grafik-Design

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 8

Komplementärkontraste lassen sich in Werbeanzeigen, wie auch im Corporate Design gut einsetzen.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 9

Markante Designs danke Komplementärkontrast.

Beispiele für Komplementärfarben im Webdesign

Der Komplementärkontrast im Webdesign

Gelb-orange und Blau bilden einen interessant-harmonischen Kalt-Warm-Kontrast auf der Website von Violetta Digital

Webdesign mit Komplementärfarben

Sehr markant: roter Stuhl auf grünem Hintergrund, toller Einsatz des Komplementärkontrastes.

Komplementärfarben für aufmerksamkeitsstarke und ästhetische Designs

Durch den starken Kontrast sind Komplementärfarben in sämtlichen Gestaltungsbereichen von Bedeutung. Sie verleihen den Designs eine gewisse Dynamik und wirken gleichzeitig natürlich, da sich die Farben gegenseitig ausgleichen. Mithilfe eines gezielten Einsatzes der gegensätzlichen Farben lassen sich wirkungsvolle und spannende Farbbilder kreieren, welche die Betrachter begeistern.

Logo mit Komplementärfarben

Auch in Logos wirkt der Komplementärkontrast ausdrucksstark.

Farbe-an-sich-Kontrast
(oder auch Buntkontrast)

Was ist der Farbe-an-sich-Kontrast?

Der Farbe-an-sich-Kontrast (manchmal auch Farbe-zu-Farbe-Kontrast, Buntkontrast oder Farbton-Kontrast genannt) entsteht, sobald mindestens zwei, drei reine, leuchtende Farben, die im Farbkreis relativ weit auseinander liegen, aufeinander treffen.

Der Farbe-an-sich-Kontrast beinhaltet an sich alle Unterschiede, die es bei Farben geben kann: Farbton, Helligkeit und Sättigung. Gemeint ist hier aber vor allem der Farbton bzw. genauer: die Buntheit. Durch die Kombination mehrerer (bunter) Farbtöne wird eine kontrastreiche Wirkung erzielt. Durch den Einsatz von klar unterscheidbaren „bunten“ Farben entsteht eine laute, bunte, lebhafte, kraftvolle, vielseitige Wirkung. Dieser Kontrast ist vor allem interessant bei Themen, die für Kreativität, Vielseitigkeit oder Lebhaftigkeit stehen.

Der Farbe-an-sich-Kontrast ist einer der einfachsten Farbkontraste, da er leicht zu erkennen ist.

Farbe-an-sich-Kontrast-Assoziationen:

Positiv:
positiv, kraftvoll, fröhlich, unbekümmert, heiter, optimistisch, farbenfroh, bunt

Negativ:
naiv, schreiend, grell, laut, aufdringlich

DerFarbe-an-sich-Kontrast im Einsatz.

Der Farbe-an-sich-Kontrast im bewegten Einsatz bei einem Video-Banner als Werbung für ein Festival. Aufmerksamkeitsstark, aber auf die Dauer auch recht anstrengend.

 

Der Farbe-an-sich-Kontrast

Der Farbe-an-sich-Kontrast.

Der Farbe-an-sich-Kontrast in der Design-Praxis:

Der Farbe-an-sich-Kontrast ist sehr aufmerksamkeitsstark und wird daher gerne in der Werbung oder auf Plakaten eingesetzt. Aufgrund mehrerer intensiver Farbtöne ist dieser Kontrast markant und auffällig. Er steht auch gerne als Synonym für Lebendigkeit, Vielseitigkeit und Kreativität.

Solch eine Farbkombination kann aber eben auch schnell aufdringlich und „laut“ wirken und man kann sich schnell satt sehen. Um dies zu verhindern, kann die Helligkeit und/oder Sättigung einzelner Farbtöne verringert werden. Mit „sanfteren“ Farbtönen erscheint das Gesamtbild dann ruhiger und meistens angenehmer, da diese nicht mehr so intensiv wirken. Der Kontrast ist dann natürlich nicht mehr so markant wie bei reinen Farben.

Trennt man die kräftigen Farbflächen mit schwarzen oder weißen Linien, erhöhen sich die Farbeigenschaften und die Buntheit, da die einzelnen Farben hierdurch besser wahrgenommen werden können und so die gegenseitige Überstrahlung gebrochen wird. Jede Farbe erhält dadurch wieder ihre eigene ursprüngliche Wirkung zurück.

Bei diesem animierten Website-Case Study kommt der Farbe-an-sich-Kontrast voll zur Geltung.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 10

Markante, kräftige Farbtöne bei florianmarkl.com als Mittel der Navigation eingesetzt.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 11

Deutlich dezentere Farbtöne wie bei Collegium Helveticum lassen das Erscheinungsbild ruhiger, angenehmer und harmonischer wirken.

Hell-Dunkel-Kontrast
(oder auch Helligkeitskontrast)

Was ist der Hell-Dunkel-Kontrast?​

Der Hell-Dunkel-Kontrast ist eigentlich weniger ein Farbkontrast, sondern ein Helligkeitskontrast. Es stehen sich ein sehr heller und ein sehr dunkler Farbton gegenüber.

Schwarz und Weiß haben den stärksten Hell-Dunkel-Kontrast. Auch innerhalb der bunten Farben sind hellere (Gelb) und dunklere (Violett) Farben unterscheidbar. Ein Hell-Dunkel-Kontrast herrscht aber nur dann, wenn die Farben in ihrer Helligkeit (deutlich) unterschiedlich sind.

Neben dem Farbe-an-sich-Kontrast reagieren wir auf den Hell-Dunkel-Kontrast am stärksten, da er Licht und Dunkelheit widerspiegelt.

Hell-Dunkel-Kontrast-Assoziationen:

Positiv:
Licht und Schatten, Tag und Nacht, Extreme, Dramatik, Spannung

Negativ:
Licht und Schatten, Tag und Nacht, Extreme, düster, traurig, depressiv

Der Helll-Dunkel-Kontrast in einem schwarz-weiß-Bild

In der Schwarzweißfotografie ist es der (starke) Hell-Dunkel-Kontrast, der ein Motiv interessant macht und zur Räumlichkeit und Tiefenwirkung beiträgt.

Der Hell-Dunkel-Kontrast

Farbtöne, die einen Hell-Dunkel-Kontrast erzeugen.

Der Hell-Dunkel-Kontrast in der Design-Praxis:

In der Gestaltung ist der Hell-Dunkel-Kontrast von sehr großer Bedeutung. Diesen Text würdest du ohne ausreichende Helligkeitsunterschiede nicht lesen können. Texte arbeiten immer mit dem Hell-Dunkel-Kontrast. Ohne ihn wären keine Textdetails auf einem Hintergrund erkennbar.

Der Hell-Dunkel-Kontrast fällt vor allem dann auf, wenn er nicht ausreichend berücksichtigt wurde – schlechte Usability ist die Folge. Dies betrifft nicht allein Menschen, die eine Seh- oder Farbschwäche haben. Ein zu schwacher, aber auch zu starker Hell-Dunkel-Kontrast ist ermüdend für die Augen.

Bei Logos, Plakaten oder Icons ist ein starker Hell-Dunkel-Kontrast auffällig, gut lesbar und einprägsam. Am prägnantesten ist sicher schwarze Schrift auf weißem Hintergrund. Aber auch das Pendant, also helle Schrift auf dunklem Hintergrund wirkt auffällig.

Hell-Dunkel-Kontrast im Logo

Bei Logos, wie hier bei Firefox, kommen häufig der Farbe-an-sich- und der Hell-Dunkel-Kontrast zusammen.

Der Hell-Dunkel-Kontrast bei Text

Nebeneinander mögen diese Farbtöne mit recht ähnlichen Helligkeiten noch harmonieren. Aber als Schriftfarbe auf einer Hintergrundfarbe ist der Text kaum lesbar, da der Hell-Dunkel-Kontrast zu gering ist.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 12

Wenn zwei farbige Flächen zusammenkommen, sollten Farbtöne gewählt werden, deren Helligkeit sich ausreichend unterscheidet. Gelber Text auf (dunkel-)blauem Hintergrund kann so ein Kontrast sein.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 13

Eher unangenehm: Die Komplementärfarben Magenta und Grün weisen einen geringen Helligkeitsunterschied auf. Solche Farbkombinationen, die keinen ausreichenden Hell-Dunkel-Kontrast mit sich bringen, sind weniger gut für Texte geeignet.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 14

Auf der Website Komm in die Agentur ist der markante Hell-Dunkel-Kontrast zwischen schwarzem Text und weißem Hintergrund im Einsatz.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 15

Auf der Website Plop ist der Hell-Dunkel-Kontrast deutlich geringer.

Kalt-Warm-Kontrast

Was ist der Kalt-Warm-Kontrast​?​

Der Kalt-Warm-Kontrast gilt als der emotionalste und ausdrucksstärkste Farbkontrast. Unser Kälteempfinden hat seinen Ursprung in ganz elementaren Erlebnissen wie kalt = Wasser/Eis = Blau und heiß = Feuer = Rot.

Mit dem Kalt-Warm-Kontrast lassen sich nicht nur markante, anregende Kontraste erzeugen, sondern Bedeutungen und Hierarchien klar definieren. Kalte Farben wirken eher fern, warme eher nah, wie in der Natur. Mithilfe des Kalt-Warm-Kontrastes kann so eine räumliche Wahrnehmung erzeugt und können Elemente oder Funktionen in den Vordergrund gerückt werden.

Farben des Kalt-Warm-Kontrastes

Blau und Gelb-orange sind eine typische Farbkombination für den Kalt-Warm-Kontrast.

Kalt-Warm-Kontrast-Assoziationen:

kalt – warm
schattig – sonnig
durchsichtig – undurchsichtig
beruhigend – erregend
luftig – erdig
fern – nah
leicht – schwer
feucht – trocken

Der Kalt-Warm-Kontrast im Branding

Auch bei Corporate Designs hat der Kalt-Warm-Kontrast eine markante Wirkung wie hier bei hello world (oben) und maker projects(unten).

Der Kalt-Warm-Kontrast im Corporate Design

Der Kalt-Warm-Kontrast in der Design-Praxis:

Mit dem Kalt-Warm-Kontrast lassen sich nicht nur markante, anregende Kontraste erzeugen, sondern Bedeutungen und Hierarchien klar definieren. Kalte Farben wirken eher fern, warme eher nah, wie in der Natur. Mithilfe des Kalt-Warm-Kontrastes kann so eine räumliche Wahrnehmung erzeugt und können Elemente oder Funktionen in den Vordergrund gerückt werden.

Dazu wirkt dieser Kontrast sehr lebendig und auffällig. Logos und Screendesigns, die mit dem Kalt-Warm-Kontrast umgesetzt werden, sind entsprechend markant.

Logo mit Kalt-Warm-Kontrast

Bei Logos sorgt die Kombination aus kalten und warmen Farben für einen ausdrucksstarken Auftritt, wie hier bei Verticals.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 16

Gelb-orange und Blau bilden einen interessant-harmonischen Kalt-Warm-Kontrast auf der Website von Jacob Clement.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 17

Bei Michael Nagy ist viel Kalt und wenig Warm vorhanden, aber eben auch dieser Quantitätskontrast zusammen mit dem Kalt-Warm-Kontrast macht das Design so spannend.

Quantitätskontrast
(oder auch Flächenkontrast)

Was ist der Quantitätskontrast?

Farben kommen in der Natur wie in der Gestaltung selten im gleichen Ausmaß vor. Gerade durch unterschiedliche Mengen der Farbtöne entstehen Spannung und Lebendigkeit.

Das Verhältnis der Farbenmenge ist daher wichtig für die Wirkung des Designs. Wie beim Kalt-Warm-Kontrast gezeigt, dominieren warme und helle Farben gegenüber kalten und dunkleren. Durch größere Flächeninhalte der kalten Farben kann dies ausgeglichen werden.

Der Quantitätskontrast betrifft die Flächengröße von zwei oder mehreren Farbflächen neben- und zueinander als auch die Farbfläche in Bezug auf die gesamte Farbfläche der Gestaltung. Proportionskontrast wäre ebenfalls ein passender Name. „Viel“ und „wenig“ bzw. „groß“ und „klein“ wären passende Beschreibungen.

Quantitätskontrast-Assoziationen:

viel – wenig
groß – klein

Neben dem Farbton bestimmt die Flächengröße die Wirkungskraft einer Farbe. Ist die Verteilung der Farben in Menge und Intensität ungleichmäßig, entsteht ein Quantitätskontrast. Ist sie dagegen ausgewogen, kann die Gestaltung langweilig erscheinen.

Der Quantitätskontrast ist somit eigentlich weniger ein Farbkontrast, es geht mehr um die Größen- bzw. Flächenverhältnisse, in die Farben zueinander gesetzt werden.
Der Quantitätskontrast​

Der Quantitätskontrast: viel von einer (eher kalten) Farbe, wenig von einem (eher warmen) Farbton.

Der Quantitätskontrast in der Design-Praxis:

Warme, helle Farben wirken optisch präsenter als kalte und/oder dunkle Farbtöne.

Um zu einer ruhigen, ausgeglichenen Wirkung zu gelangen, sollten also warme Farben einen kleineren Flächenanteil bekommen, während kalte Farben mit weniger Leuchtkraft größeren Raum beanspruchen können.

 

Webdesign mit Komplementärfarben

Wenig warmes Rot und viel kälteres Grün sorgen für einen Quantitätskontrast, bei dem die Farbwirkung ausgeglichen erscheint.

Der Komplementärkontrast im Webdesign

Die gelbe Typo springt sofort ins Auge. Der Hintergrund ist großflächig violett – insgesamt ist die Farbwirkung dadurch ausgewogen auf der Website von Violetta Digital – ein gelungener Quantitätskontrast.

Der Quantitätskontrast​ im Webdesign

Die harmonische Website aus dem linken Beispiel genommen und die Farben einmal umgekehrt: Das Ergebnis ist grauenhaft. Der gelbe Hintergrund ist so groß markant und unangenehm leuchtend, die violette Schrift geht dagegen völlig unter. Die Farbwirkung ist nicht mehr gleichwertig – kein schöner Quantitätskontrast.

Qualitätskontrast
(oder auch Helligkeitskontrast)

Was ist der Qualitätskontrast?

Eine Farbe kann sehr rein, aber auch sehr getrübt sein. Die Farbqualität bezieht sich auf die Intensität einer Farbe zwischen Reinheit und Trübung, also den Reinheits- bzw. Sättigungsgrad. Daher wird dieser Kontrast teilweise auch Sättigungskontrast genannt.

Der Kontrast entsteht, wenn gesättigte, leuchtende Farben neben getrübten Farben stehen. Ein Farbton wirkt intensiver, wenn er von seinen eigenen hellen und/oder dunklen Tonwertstufen umgeben ist. Seine Bedeutung wird dadurch erhöht, ein Qualitätskontrast eben.

Eine Trübung der reinen Farbe, also die Verminderung ihrer Intensität, wird erreicht durch das Mischen mit Schwarz, Weiß oder Grau.

Qualitätskontrast-Assoziationen:

rein – trüb
leuchtend – stumpf
Der Qualitätskontrast​

Qualitätskontrast

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 18

Mehrere verschiedene Blautöne beim Webauftritt von netstream sorgen für einen interessanten Qualitätskontrast.

Der Qualitätskontrast in der Design-Praxis:

Der Qualitätskontrast ist hilfreich, wenn weitere Farben ergänzt werden sollen, man aber nicht auf neue (markante) Farbtöne setzen will, die das Design zu unruhig oder auffällig machen würden. Mit Abstufungen (Helligkeit oder Sättigung) einer schon vorhandenen Farbe wirkt das Erscheinungsbild dann einheitlicher und ruhiger. Gleichzeitig wird der Gestaltungsspielraum erhöht, da sich Fläche und Elemente mit dem neuen Farbton umsetzen lassen.

Die Gestaltung geht damit in die Richtung eines monochromen Farbschemas, das auf einen Farbton und verschiedene Abstufungen davon setzt.

App-Interface mit Qualitätskontrast

In diesem App-Interface sorgen unterschiedliche Grüntöne für einen Qualitätskontrast.

Simultankontrast

Was ist der Simultankontrast?

Wie bei den anderen Kontrasten schon gesehen, werden Farben grundsätzlich relativ zur Umgebung wahrgenommen. Die Umgebungsfarbe bzw. -farben beeinflussen den wahrgenommenen Farbton und die Helligkeit. Nebeneinanderliegende Farbflächen besitzen also eine Wechselwirkung bezüglich des Farbkontrastes zueinander.

Derselbe Farbton wirkt vor einem dunklen Hintergrund heller und vor einem hellen Hintergrund dunkler:
Ein heller Hintergrund lässt eine Farbe in den Vordergrund rücken, ein dunkler Hintergrund nimmt sie zurück. Ein Hintergrund in einer warmen Farbe lässt einen Farbton kühler wirken, ein kühler Hintergrund lässt den gleichen Farbton wärmer wirken.

Der Simultankontrast wirkt sich dabei ausschließlich auf das subjektive Farbempfinden aus. Unser Auge bildet zu jeder Farbe automatisch die Komplementärfarbe, wenn diese nicht im Bild vorhanden ist.

 

Der Simultankontrast​

Beispiel eines Simultankontrastes: Die mittleren grauen Kästen sind eigentlich gleich hell. Im rechten Beispiel wirkt der graue Kasten allerdings heller.
Gleichzeitig wirkt der mittlere graue Kasten im linken Beispiel dominanter, da sich der helle Hintergrund zurücknimmt. Im rechten Beispiel dominiert der dunkle Hintergrund.

Simultankontrast mit Komplementärfarben​

Beispiel eines Simultankontrastes:
Die grauen Kästen leuchten in der sie umgebenden Farbe.

Der Simultankontrast in der Design-Praxis:

Beim Gestalten von Websites, Interfaces oder Printsachen mag der Simultankontrast weniger von Bedeutung sein. Wichtig ist aber zu wissen und zu bedenken, dass jede Hintergrundfarbe und jede Farbfläche Einfluss auf die platzierten Elemente nimmt. Das ist sowohl im Screendesign interessant, als auch bspw. bei Logos, die auf einer farbigen Fläche platziert werden sollen.

Simultankontrast beim Logo​

Je nach Farbton des Hintergrundes wirken die Farben des Logos (leicht) anders.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 19

Bei Fibelmusik beeinflusst die große pinke Fläche die Wahrnehmung der grauen Illustrationen.

Bunt-Unbunt-Kontrast​

Was ist der Bunt-Unbunt-Kontrast?

Als achten Kontrast kann man noch den Bunt-Unbunt-Kontrast als Mittel der Farbgestaltung ansehen. Dieser Kontrast entsteht zwischen bunten und unbunten, neutralen Farben (Schwarz, Weiß, Grau). Das ist eine sehr beliebte Kombination, gerade in Screendesigns und zusammen mit dem Quantitätskontrast sehr effektiv einzusetzen.

Bunt-Unbunt-Kontrast-Assoziationen:

laut – leise
leuchtend – stumpf
markant – unauffällig

Bunt-Unbunt-Kontrast​

Farbtöne im Bunt-Unbunt-Kontrast.

Der Bunt-Unbunt-Kontrast in der Design-Praxis:

Grau und ein markanter Farbton sind eine sehr beliebte Kombination, gerade in Screendesigns – und zusammen mit dem Quantitätskontrast sehr effektiv einzusetzen.

Große unbunte Flächen nehmen sich zurück, ohne unterzugehen. Und die bunte Farbe kann gut und gezielt Aufmerksamkeit erzeugen und lenken.

Bunt-Unbunt-Kontrast​ im Logo

Auch bei Logos macht sich der Bunt-Unbunt-Kontrast oft gut:
Ein dezenter Grauton und ein farbiger Highlight-Farbton.

Webdesign Grau

Viel Grau, dazu ein markanter, gezielt eingesetzter Rotton sorgen auf der Website von Kusser für einen gelungenen Bunt-Unbunt-Kontrast.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 20

Auf dieser Portfolio-Website lässt der graue Hintergrund die farbigen Referenzbilder schön zur Geltung kommen.

Häufige Fragen zu Farbkontrasten:

Man unterscheidet 7 + 1 Farbkontraste:

  • Farbe-an-sich-Kontrast (oder auch Buntkontrast)
  • Hell-Dunkel-Kontrast (oder auch Helligkeitskontrast)
  • Kalt-Warm-Kontrast
  • Komplementärkontrast
  • Quantitätskontrast (oder auch Flächenkontrast)
  • Qualitätskontrast (oder auch Helligkeitskontrast)
  • Simultankontrast
  • Bunt-Unbunt-Kontrast​ (kein „richtiger“ Farbkontrast, wird aber auch gerne mit angegeben)

Ein Farbton kommt selten  alleine zum Einsatz, sonst würde man ja nur eine einfarbige Fläche sehen. Schon Texte leben von dem Kontrast zwischen zwei Farbtönen (Schriftfarbe auf Hintergrundfarbe). Diesen Unterschied zwischen zwei Farbtönen nennt man Farbkontrast.

Wenn also im Vergleich zwischen zwei oder mehreren nebeneinanderliegenden Farben deutlich erkennbare Unterschiede bestehen, ist ein Farbkontrast wahrnehmbar.

Farben erzeugen eine enorme psychologische Wirkung und sollten daher in Designs bewusst und gezielt eingesetzt werden.

Da Farbtöne selten alleine zum Einsatz kommen, ist es wichtig, die Wirkung von Farbkombinationen und Farbkontrasten zu kennen.

Der Schweizer Maler und Kunstpädagoge Johannes Itten beschäftigte sich viel mit Farben und ihren Wirkungen und entwickelte das Prinzip der sieben Farbkontraste. Diese sind nach wie vor von Bedeutung – auch im Webdesign und in der visuellen Kommunikation an sich.

Kommentare zum Artikel

1 Kommentar zu „Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele“

  1. hi, ich finde ihre Informationen mega. ich würde sie gerne als Quelle für meine Facharbeit nehmen. Könnten sie mir die Quellenangaben geben?
    Liebe Grüße

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Die 8 Farbkontraste – Ihre Bedeutungen und Beispiele 25

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa.
Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.

Mehr über diese Website
und den Autor erfahren   →

Bewertungsergebnis: 4.9 / 5. | Anzahl der Bewertungen: 369

Scroll to Top