Das Wichtigste in Kürze:
- Johannes Itten definierte 7 Farbkontraste – vom Buntkontrast bis zum Quantitätskontrast
- Warme Farben (Rot, Orange, Gelb) aktivieren – kalte Farben (Blau, Grün) beruhigen
- WCAG-Standard: Mindestkontrast 4,5:1 für normalen Text (AA-Stufe)
- Seit Juni 2025: BFSG macht Barrierefreiheit in Deutschland zur Pflicht
- Tools wie WebAIM Contrast Checker und Adobe Color helfen bei der Umsetzung
Der Farbkreis nach Itten – Dein Fundament
Bevor wir in die einzelnen Kontraste eintauchen, müssen wir kurz über das Werkzeug sprechen, auf dem alles basiert: den 12-teiligen Farbkreis nach Johannes Itten.
Johannes Itten (1888–1967) war ein Schweizer Maler und Kunstpädagoge, der am legendären Bauhaus in Weimar lehrte und dort seinen berühmten Vorkurs entwickelte. Sein Hauptwerk Kunst der Farbe – ein Klassiker der Farbenlehre – veröffentlichte er 1961, und es ist bis heute weltweit ein Standardwerk der Gestaltungslehre. Die englische Übersetzung The Art of Color erschien 1973 und verbreitete seine Ideen global.
Sein Farbkreis funktioniert so: Im Zentrum steht ein gleichseitiges Dreieck mit den drei Primärfarben – Rot (#FF0000), Gelb (#FFFF00) und Blau (#0000FF). Das sind die Farben, die du nicht aus anderen mischen kannst. Aus der Mischung je zweier Primärfarben entstehen die drei Sekundärfarben: Orange (Rot + Gelb), Grün (Gelb + Blau) und Violett (Blau + Rot). Und zwischen je einer Primär- und einer Sekundärfarbe liegen die sechs Tertiärfarben – zum Beispiel Gelborange, Rotorange, Blauviolett oder Blaugrün.
Farben, die sich auf dem Kreis diametral gegenüberliegen, heißen Komplementärfarben – und die spielen bei den Farbkontrasten eine riesige Rolle. Dazu gleich mehr.
Ittens System basiert auf dem RYB-Farbmodell (Rot-Gelb-Blau) für die Pigmentmischung. Das ist nicht dasselbe wie das digitale RGB- oder das Druckfarben-CMY-Modell. Die Hex-Codes, die ich dir hier gebe, sind also Annäherungen für die Bildschirmdarstellung – aber sie funktionieren wunderbar, um die Prinzipien zu verstehen und direkt anzuwenden.
Die 7 Farbkontraste nach Johannes Itten
Jetzt wird’s spannend! Itten hat sieben grundlegende Kontrastarten definiert, die bis heute die Basis jeder Farbtheorie bilden. Die verschiedenen Farbkontraste decken dabei alle Aspekte der Farbwahrnehmung ab. Ich erkläre dir jeden einzelnen davon – mit Wirkung, Praxis-Beispielen und den passenden Hex-Codes zum Ausprobieren.
Farbe-an-sich-Kontrast (Buntkontrast)
Der einfachste aller Farbkontraste – und gleichzeitig der lauteste. Er entsteht, wenn mindestens zwei reine, ungemischte, gesättigte und leuchtende Farben nebeneinandergesetzt werden, die auf dem Farbkreis weit auseinanderliegen. Je größer der Abstand auf dem Kreis, desto stärker der Kontrast.
Die stärkste Wirkung erzielt das Dreieck der drei Primärfarben: Rot (#FF0000), Gelb (#FFFF00) und Blau (#0000FF). Auch die Sekundärfarben-Triade Orange-Grün-Violett wirkt kraftvoll, wenn auch etwas schwächer.
Sobald du die Farben Schwarz und Weiß oder Grau beimischst, schwächt sich der Kontrast ab. Pastelltöne erzeugen nur noch einen leisen Buntkontrast.
Die psychologische Wirkung? Bunt, fröhlich, festlich, laut und entschieden – kann aber auch naiv oder grell wirken. In der Praxis findest du ihn auf Verkehrsschildern, Flaggen, in der Volkskunst und bei Kinderprodukten. Marken wie LEGO, Fanta oder IKEA nutzen den Buntkontrast ganz bewusst für eine jugendliche, energiegeladene Ausstrahlung.
Berühmtes Kunstbeispiel: Piet Mondrians Komposition mit Rot, Blau und Gelb (1930) ist der reinste Ausdruck dieses Kontrastes – ausschließlich die drei Primärfarben, getrennt durch schwarze Linien auf weißem Grund. Weitere Beispiele: Henri Matisses Le Bonheur de Vivre (1905–06) und Franz Marcs Die großen blauen Pferde (1911) nutzen den Farbe-an-sich-Kontrast intensiv.
Wichtig: Dieser Farbkontrast ist rein farblich-emotional – du kannst ihn nicht mit einer Formel berechnen wie den WCAG-Kontrast (dazu kommen wir später).
Hell-Dunkel-Kontrast (Helligkeitskontrast)
Jetzt geht’s ums Licht! Dieser Kontrast basiert auf Unterschieden in der Helligkeit zwischen Farben oder Tonwerten. Der extremste Fall ist Schwarz (#000000) neben Weiß (#FFFFFF) – das ergibt ein maximales Kontrastverhältnis von 21:1. Unter den bunten Farben bilden Gelb (hellste Buntfarbe) und Violett (dunkelste Buntfarbe) den stärksten Hell-Dunkel-Kontrast.
Der Helligkeitskontrast ist das wichtigste Werkzeug zur Erzeugung von Tiefe und Räumlichkeit. Helle und dunkle Farben verhalten sich dabei völlig unterschiedlich: Helle Farben scheinen nach vorne zu treten, dunkle weichen in den Hintergrund zurück. Dieses Prinzip kennt man in der Malerei als Chiaroscuro (Hell-Dunkel-Malerei) – und Rembrandt und Caravaggio haben es perfektioniert, um Gesichter regelrecht aus dunklen Hintergründen leuchten zu lassen.
In der Praxis ist der Hell-Dunkel-Kontrast extrem vielseitig einsetzbar. In Logos und Piktogrammen garantiert er maximale Lesbarkeit. In der Schwarz-Weiß-Fotografie ist er sogar das einzige Gestaltungsmittel. Und im Webdesign ist er die absolute Grundlage für Textlesbarkeit – dunkler Text auf hellem Grund oder umgekehrt. Kein Wunder also, dass genau dieser Kontrast die Basis für die WCAG-Berechnung ist.
Beispiel-Hex-Codes: Dunkelblau (#000080) kombiniert mit einem hellen Cremeweiß (#FFFFE0) – probier das mal aus!
Kalt-Warm-Kontrast (Temperaturkontrast)
Hier wird’s emotional! Beim Kalt-Warm-Kontrast entsteht der Effekt, wenn du warme und kalte Farben einander gegenüberstellst. Die Polarachse verläuft zwischen den beiden Extremen: Rotorange (#FF4500) als wärmste Farbe und Blaugrün/Cyan (#008B8B) als kälteste.
Itten wählte dabei bewusst ein mittelhelles Blaugrün, damit der Kalt-Warm-Kontrast nicht mit dem Hell-Dunkel-Kontrast vermischt wird. Alle anderen Farben ordnen sich relativ zwischen diesen Polen ein. Spannend dabei: Die Zuordnung ist kontextabhängig! Grün kann neben Blau warm wirken – und neben Gelb kalt. Nur die beiden Pole sind eindeutig.
Warme Farben assoziieren wir mit Feuer und Sonne, kalte mit Wasser und Eis. Und das ist nicht nur Einbildung: Experimente zeigen, dass ein rot gestrichener Raum bis zu 3 °C wärmer empfunden wird als ein blauer Raum bei gleicher Temperatur!
Für die räumliche Wirkung ist der Kalt-Warm-Kontrast entscheidend: Warme Farben treten nach vorne, kalte weichen zurück. Dieses Prinzip nutzt die Landschaftsmalerei seit der Renaissance – warme, erdige Töne im Vordergrund, kühle Blautöne am Horizont. Man nennt das Luft- und Farbperspektive.
Kunstbeispiel: Claude Monets Heuhaufen-Serie (1890–91) zeigt perfekt, wie sich der Kalt-Warm-Kontrast im Tagesverlauf verschiebt – warmes Orange-Gold der Abendsonne gegen kühle Blau-Violett-Schatten, ganz ohne Schwarz.
Beispiel-Hex-Codes: Cyan (#00FFFF) vs. leuchtendes Orange (#FFA500).
Komplementärkontrast
Das ist der König unter den Farbkontrasten! Komplementäre Farben (Komplementärfarben) liegen sich auf dem Farbkreis diametral gegenüber – und erzeugen den intensivsten gegenseitigen Verstärkungseffekt. Stellt man solche Farben gegenüber, steigern sie ihre Leuchtkraft auf das Maximum. Gemischt neutralisieren sie sich dagegen zu einem (theoretischen) Grau.
Die drei primären Komplementärpaare nach Itten:
| Paar | Hex-Codes (ca.) | Besonderheit |
|---|---|---|
| Rot ↔ Grün | #FF0000 ↔ #00FF00 | Ähnliche Helligkeit, daher reiner Farbkontrast ohne Hell-Dunkel-Unterschied |
| Blau ↔ Orange | #0000FF ↔ #FFA500 | Kombiniert Komplementär- mit starkem Kalt-Warm- und Hell-Dunkel-Kontrast |
| Gelb ↔ Violett | #FFFF00 ↔ #800080 | Maximaler Hell-Dunkel-Kontrast unter den Komplementärpaaren |
Die Wirkung auf den Betrachter ist aktiv, kraftvoll, vibrierend – kann aber auch aggressiv und aufdringlich sein. Bei gleicher Helligkeit beider Farben entsteht an der Grenze sogar ein „Flimmern“ durch optische Reizüberflutung.
Wo du den Komplementärkontrast im Alltag siehst? Öfter, als du denkst! Fleisch wird auf grünem Hintergrund präsentiert, weil es so frischer wirkt. Waschmittel enthält blaue Partikel, um die Gelbfärbung weißer Wäsche optisch zu neutralisieren. Und der berühmte „Teal and Orange“-Look im Film (denk an Mad Max: Fury Road, Transformers oder Avatar) nutzt genau diesen Komplementärkontrast, um Hauttöne vor blaugrünen Hintergründen leuchten zu lassen.
Das bekannteste Kunstbeispiel: Vincent van Gogh war ein absoluter Meister des Komplementärkontrastes. In seinem Nachtcafé (1888) schrieb er an seinen Bruder Theo: Er habe versucht, die schrecklichen Leidenschaften der Menschheit durch Rot und Grün auszudrücken. Seine Sternennacht lebt vom Gelb-Blau-Kontrast, die Caféterrasse bei Nacht vom Orange-Blau-Kontrast des warmgelben Lichts gegen den ultramarinblauen Himmel.
Simultankontrast
Jetzt wird’s ein bisschen verrückt – denn der Simultan-Kontrast (Simultankontrast) ist eigentlich eine optische Täuschung! Unser Auge sucht zu einer Farbe automatisch die Komplementärfarbe. Fehlt diese, „erzeugt“ unser Gehirn sie gleichzeitig (simultan) im Hintergrund.
Was heißt das konkret? Jede Farbe wirkt anders je nach Umgebung. Ein neutrales graues Quadrat (#808080) auf einer roten Fläche wirkt leicht grünlich. Dasselbe graue Quadrat auf einer grünen Farbfläche wirkt plötzlich rötlich – obwohl die Farbe technisch identisch ist! Farben verändern sich also je nach Umgebungsfarbe.
Die wissenschaftliche Grundlage dafür lieferte der französische Chemiker Michel-Eugène Chevreul schon 1839. Er wurde zur Gobelins-Manufaktur in Paris gerufen, weil teure Tapisseriegarne „trüb“ wirkten – und entdeckte, dass nicht die Farbstoffe fehlerhaft waren, sondern die Platzierung der Farben nebeneinander die visuelle Wahrnehmung und deren Erscheinung veränderte. Sein Gesetz: Benachbarte Farben erscheinen so unterschiedlich wie möglich – sowohl in ihrem Farbton als auch in ihrer Helligkeit.
Josef Albers vertiefte die Forschung in seinem Werk Interaction of Color (1963) mit über 1.000 Gemälden der Serie Homage to the Square, die zeigen, wie verschachtelte Farbquadrate ihre gegenseitige Wahrnehmung verändern.
Qualitätskontrast (Intensitätskontrast)
Beim Qualitätskontrast geht es um den Gegensatz zwischen reinen, leuchtenden Farben und getrübten, stumpfen Farben – also um Unterschiede in der Farbqualität und Farbsättigung. Eine reine, einfarbig leuchtende Farbe neben ihrer getrübten Version wirkt noch intensiver. Die getrübte Farbe tritt zurück und dient quasi als Bühne – leuchtende Farben neben getrübten erzeugen dabei besonders wirkungsvolle Kontraste.
Es gibt vier Wege, eine Farbe zu trüben: mit Weiß mischen (ergibt einen helleren, kühleren Pastellton), mit Schwarz mischen (dunklerer, gedämpfter Ton), mit Grau mischen (neutraler Ton) oder mit der Komplementärfarbe mischen (gebrochener Ton Richtung Graubraun).
Die Wirkung ist ruhig und raffiniert. Stell dir ein Webdesign vor, das komplett in gedeckten Erdtönen gehalten ist – und dann sticht ein Call-to-Action-Button in einem reinen, knalligen Rot (#FF0000) heraus. Das ist Qualitätskontrast in Reinform! Oder denk an mittelalterliche Glasfenster, bei denen die reinen Glasfarben zwischen den dunklen Bleirahmen besonders intensiv leuchten.
Dieser Kontrast ist der Geheimtipp für elegante Designs. Statt überall knallige Farben einzusetzen, halte deine Basis in gedeckten, getrübten Farbtönen und setze nur dort reine Farben ein, wo du die Aufmerksamkeit haben willst.
Quantitätskontrast (Flächenkontrast)
Beim letzten der sieben Farbkontraste geht es nicht um die Farbeigenschaft selbst, sondern um das Mengenverhältnis der Farbflächen zueinander. Goethe (und später Itten) fanden heraus, dass verschiedene Farben unterschiedliche „Lichtwerte“ haben. Gelb ist extrem hell und aggressiv, Violett sehr dunkel.
Für eine harmonische Wirkung müssen die Flächengrößen angepasst werden. Itten übernahm Goethes Lichtwerte als Grundlage:
| Farbe | Lichtwert | Harmonischer Flächenanteil |
|---|---|---|
| Gelb | 9 | 3 Teile |
| Orange | 8 | 4 Teile |
| Rot | 6 | 6 Teile |
| Grün | 6 | 6 Teile |
| Blau | 4 | 8 Teile |
| Violett | 3 | 9 Teile |
Für ein harmonisches Gleichgewicht werden die Lichtwerte umgekehrt als Flächenverhältnisse eingesetzt: Gelb und Violett = 1 : 3 (also ¼ Gelb und ¾ Violett), Orange : Blau = 1 : 2 (⅓ Orange und ⅔ Blau), Rot : Grün = 1 : 1 (gleiche Flächen).
Was heißt das praktisch? Ein Plakat sollte nicht zu 50 % aus leuchtendem Gelb und 50 % aus Violett bestehen – das Gelb würde das Violett regelrecht „erschlagen“. Ein kleiner gelber Stern auf einem großen violetten Himmel wirkt hingegen harmonisch.
Harmonische, ausgewogene Proportionen wirken ruhig und stabil. Bewusst umgekehrte Proportionen erzeugen dagegen Spannung, Dynamik und Drama. Ein kleiner leuchtender Farbakzent gegen eine große gedämpfte Fläche wird zum „Signaleffekt“ – und genau das nutzen Landingpages, die mit wenigen kontrastreichen Conversion-Elementen auf neutralen Flächen arbeiten.
Kunstbeispiel: Joan Mirós Bleu II nutzt extremen Quantitätskontrast – eine riesige blaue Fläche mit winzigen roten und schwarzen Akzenten, die sofort den Blick auf sich ziehen.
Warme und kalte Farben in der Praxis
Jetzt wo du mit den sieben Farbkontrasten vertraut bist, lass uns tiefer in ein Thema eintauchen, das in fast allen Bereichen der Gestaltung eine Rolle spielt: die Farbtemperatur.
Welche Farben sind warm, welche kalt?
Die Einteilung folgt unserer natürlichen Erfahrung: Sonne und Feuer gleich warm, Wasser und Eis gleich kalt.
Warme Farben
Rot – #FF0000
Korallrot – #FF6F61
Rotorange – #FF4500
Orange – #FF7F00
Bernstein – #FFBF00
Gelb – #FFFF00
Senfgelb – #E1AD01
Gold – #FFD700
Terrakotta – #CC4E00
Ocker – #CC7722
Warmbraun – #8B4513
Kalte Farben
Blau – #0000FF
Cyan/Blaugrün – #008B8B
Teal – #008080
Türkis – #40E0D0
Himmelblau – #87CEEB
Marineblau – #000080
Blauviolett – #8A2BE2
Violett – #7F00FF
Chamäleon-Farben – Grün und Violett wechseln je nach Kontext die Seite!
Gelbgrün – #9ACD32 (wirkt warm)
Blaugrün – #008080 (wirkt kalt)
Rotviolett – #C71585 (wirkt wärmer)
Blauviolett – #8A2BE2 (wirkt kälter)
Psychologische Wirkung warmer und kalter Farben
Warme Farben (Rot, Orange, Gelb) aktivieren — sie erhöhen Herzfrequenz und Blutdruck, stimulieren den Appetit und erzeugen Dringlichkeit. Kalte Farben (Blau, Grün, Violett) beruhigen — sie senken den Puls und erzeugen Vertrauen. Der Kalt-Warm-Kontrast nutzt genau diese gegensätzliche Wirkung als Gestaltungswerkzeug.
Raumgestaltung und Farbtemperatur
Wenn du Räume gestaltest, spielt die Himmelsrichtung eine entscheidende Rolle. Nordzimmer bekommen kühles, grau-blaues Tageslicht – warme Farbtöne wie Beige, Pfirsich oder Terrakotta gleichen das aus. In Südzimmern mit warmem, goldenem Licht harmonieren dagegen kühle Farben wie Hellblau oder Salbeigrün, weil rein warme Töne dort schnell überladen wirken.
Hier eine Übersicht, die dir bei der Raumgestaltung hilft:
| Raum | Empfohlene Farben | Hex-Beispiele | Begründung |
|---|---|---|---|
| Wohnzimmer | Warme Neutraltöne, Ocker | #F5E6CC, #CC7A4D | Gemütlich, einladend, sozial |
| Schlafzimmer | Sanftes Blau, Lavendel, Salbeigrün | #B0C4DE, #D8BFD8 | Beruhigend, schlaffördernd |
| Homeoffice | Grün, Blaugrün | #5F9EA0, #6B8E6B | Konzentration, Produktivität |
| Küche | Gelb, warmes Weiß, Orangeakzente | #FFFACD, #FFE4B5 | Appetitanregend, fröhlich |
| Bad | Blau, Aqua, Teal | #ADD8E6, #E0FFFF | Frische, Sauberkeit, Spa-Atmosphäre |
Für die Beleuchtung gilt die Kelvin-Skala: Warmweiß (2.700–3.300 K) für Wohn- und Schlafzimmer, Neutralweiß (3.300–5.300 K) für Küche und Büro, Tageslichtweiß (>5.300 K) für Werkstätten und Ateliers.
Fotografie und Film
In der Fotografie ist die Golden Hour (ca. 2.500–3.500 K, etwa eine Stunde nach Sonnenaufgang oder vor Sonnenuntergang) der Inbegriff warmen Lichts: goldene, weiche Strahlen mit langen Schatten, ideal für Porträts und Landschaften. Die Blue Hour (ca. 9.000–12.000 K, 20–30 Minuten vor Sonnenaufgang oder nach Sonnenuntergang) liefert tiefes Blau mit minimalen Schatten – perfekt für Stadtlandschaften und Architektur.
Der Teal-and-Orange-Look dominiert seit den frühen 2000ern die Hollywood-Farbgebung. Er nutzt den Komplementärkontrast zwischen Blaugrün (~#008080) und Orange (~#FF8C00), damit Hauttöne im Orangespektrum vor blaugrünen Hintergründen leuchten. Das Ergebnis: Die Darsteller werden optisch sofort hervorgehoben. Zu sehen in unzähligen Blockbustern.
Farbkontraste in der Kunstgeschichte
Farbkontraste sind nicht einfach graue Theorie – sie sind der Motor einiger der berühmtesten Kunstwerke der Welt. Hier ein kleiner Streifzug durch die Geschichte.
Impressionismus: Die Revolution der Farbe
Die Impressionisten brachen radikal mit der Tradition: Sie eliminierten Schwarz aus den Schatten und ersetzten es durch Komplementär- und Kaltfarben. Claude Monet malte in seiner Heuhaufen-Serie Schatten ausschließlich in Blau, Grün und Violett – warm-orangefarbenes Licht gegen kühle Schatten, ein reiner Kalt-Warm-Kontrast ohne ein Gramm Schwarz. Sein Impression, Sonnenaufgang (1872) – das Bild, das der gesamten Bewegung ihren Namen gab – lebt vom Komplementärkontrast einer orangeroten Sonne gegen blau-violettes Hafenwasser.
Van Gogh: Meister des Komplementärkontrastes
Vincent van Gogh studierte Farbtheorie über Charles Blancs Grammaire des arts du dessin und wandte sie ganz bewusst an. In seinen Briefen an seinen Bruder Theo betonte er, dass die Frage der Komplementärfarben und des simultanen Kontrastes die wichtigste überhaupt sei. Seine Schlüsselwerke nutzen systematisch alle drei primären Komplementärpaare: Gelb und Blau in der Sternennacht (1889), Orange und Blau in der Caféterrasse bei Nacht (1888), Rot und Grün im Nachtcafé (1888).
De Stijl, Expressionismus und Fauvismus
Piet Mondrian reduzierte die Malerei auf den reinen Farbe-an-sich-Kontrast: nur die drei Primärfarben plus die unbunten Farben Schwarz, Weiß und Grau. Seine Kompositionen demonstrieren gleichzeitig den Quantitätskontrast – kleine Farbflächen gegen große weiße Flächen.
Die Expressionisten nutzten Farbe als emotionales Ausdrucksmittel. Franz Marc entwickelte sogar ein symbolisches Farbsystem: Blau steht für das geistige Prinzip, Gelb für das sinnliche, Rot für die Materie – und die Kombination von Rot und Blau erzeugt besondere Spannung. Emil Nolde und Ernst Ludwig Kirchner setzten auf aggressive Buntkontraste und Komplementärkontraste für maximale emotionale Intensität.
Und die Fauves – „die Wilden“ – angeführt von Henri Matisse, befreiten die Farbe komplett von der Gegenstandstreue. In La Danse (1910) tanzen rote Figuren auf grünem Grund – reiner Komplementärkontrast, der nichts mit der Realität zu tun hat und trotzdem (oder gerade deswegen) eine unglaubliche Kraft entfaltet.
Mark Rothko: Kontrast als Meditation
Rothko ging den umgekehrten Weg – er arbeitete mit subtilen Kontrasten: große, schwebende Farbblöcke mit weichen Kanten. Sein No. 14 (1960) zeigt sattes Blau neben leuchtendem Orange, ein Komplementärkontrast, der durch transparente Farbschichten eine fast spirituelle Tiefe erreicht. Die Rothko Chapel-Gemälde reduzieren den Kontrast auf minimale Variationen zwischen Tiefschwarz und dunklem Kastanienbraun – extremer Qualitätskontrast an der Grenze der Wahrnehmung.
Farbkontraste im Webdesign und die WCAG-Standards
Jetzt kommen wir zu dem Teil, der für alle Webdesigner, Entwickler und Content Creator richtig relevant ist. Denn hier liegt ein fundamentaler Unterschied, den jeder verstehen muss:
Ittens sieben Farbkontraste sind subjektiv, emotional und mehrdimensional – sie umfassen Farbton, Temperatur, Sättigung, Proportion und Simultanwahrnehmung. Der WCAG-Kontrast hingegen misst ausschließlich die Leuchtdichte (Luminanz) – einen einzigen, mathematisch berechenbaren Wert.
Und das hat eine überraschende Konsequenz: Ein Design kann hohen künstlerischen Kontrast haben und trotzdem bei der WCAG durchfallen. Rot (#FF0000) auf Grün (#00FF00) erzeugt starken Komplementärkontrast, Kalt-Warm-Kontrast und Buntkontrast – aber beide Farben haben ähnliche Leuchtdichte, weshalb der WCAG-Kontrast zu gering für Textlesbarkeit ist. Umgekehrt hat Dunkelgrau (#333333) auf Weiß (#FFFFFF) ein Kontrastverhältnis von ~12,6:1 (exzellent nach WCAG), aber keinerlei Buntkontrast.
Die WCAG-Kontrastverhältnisse: Die Zahlen
Die Web Content Accessibility Guidelines (WCAG 2.2, veröffentlicht im Oktober 2023) definieren drei Erfolgskriterien:
| Kriterium | Stufe | Anforderung |
|---|---|---|
| 1.4.3 Kontrast (Minimum) | AA | Normaltext: 4,5:1 / Großer Text: 3:1 |
| 1.4.6 Kontrast (Erhöht) | AAA | Normaltext: 7:1 / Großer Text: 4,5:1 |
| 1.4.11 Nicht-Text-Kontrast | AA | UI-Komponenten und grafische Objekte: 3:1 |
„Großer Text“ ist dabei definiert als 18pt (24px) oder größer bei normaler Stärke, oder 14pt (~18,66px) oder größer bei Fettschrift (font-weight ≥ 700). Ausnahmen gelten für Logos, dekorativen Text und deaktivierte UI-Elemente. Und Achtung: WCAG erlaubt kein Runden – ein Verhältnis von 4,499:1 gilt als nicht bestanden!
Wie wird der Kontrast berechnet?
Der technische Kontrast wird aus der relativen Leuchtdichte beider Farben berechnet:
Kontrastverhältnis = (L₁ + 0,05) / (L₂ + 0,05)
Dabei ist L₁ die Leuchtdichte der helleren Farbe und L₂ die der dunkleren. Das Ergebnis reicht von 1:1 (identische Farben, kein Kontrast) bis 21:1 (Schwarz auf Weiß, maximaler Kontrast). Die relative Leuchtdichte wird aus den RGB-Werten in drei Schritten berechnet: Normalisierung, Linearisierung (Gamma-Korrektur rückgängig machen) und gewichtete Summe nach der Formel L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Die Gewichtung spiegelt die Empfindlichkeit des menschlichen Auges wider – am empfindlichsten für Grün, am wenigsten für Blau.
Klingt ganz schön kompliziert? Keine Sorge – du musst das nicht von Hand berechnen! Dafür gibt es Tools (die stelle ich dir gleich vor).
Gute und schlechte Kontraste auf Weiß (#FFFFFF)
Damit du ein Gefühl bekommst, welche Farben als Text auf weißem Hintergrund funktionieren, hier eine Übersicht:
| Textfarbe | Hex | Verhältnis | AA normal | AA groß | AAA normal |
|---|---|---|---|---|---|
| Schwarz | #000000 | 21:1 | ✅ | ✅ | ✅ |
| Dunkelgrau | #333333 | ~12,6:1 | ✅ | ✅ | ✅ |
| Dunkelblau | #0066CC | ~7,0:1 | ✅ | ✅ | ✅ |
| Grenze AA | #767676 | 4,54:1 | ✅ | ✅ | ❌ |
| Knapp daneben | #777777 | 4,47:1 | ❌ | ✅ | ❌ |
| Hellgrau (Klassiker-Fehler!) | #999999 | ~2,8:1 | ❌ | ❌ | ❌ |
| Reinrot | #FF0000 | ~4,0:1 | ❌ | ✅ | ❌ |
| Reinblau | #0000FF | ~8,6:1 | ✅ | ✅ | ✅ |
Das BFSG: Barrierefreiheit wird Pflicht
Spätestens jetzt sollte also jeder, der Websites oder Apps baut, den Kontrastcheck als festen Bestandteil seines Workflows etablieren.
Und das ist auch sinnvoll, wenn du mal die Zahlen betrachtest: Weltweit leben laut WHO über 2,2 Milliarden Menschen mit einer Sehbeeinträchtigung. Gute Kontraste sind also nicht nur rechtlich geboten – sie machen dein Design einfach für mehr Menschen zugänglich und nutzbar.
Kontrastfarben finden: Methoden und Tools
Okay, genug Theorie – jetzt geht’s ans Eingemachte! Wie findest du die richtigen Kontrastfarben für dein Projekt?
Kontrastfarben über Farbharmonien finden
Der Farbkreis bietet dir systematische Methoden, um kontrastierende Farben zu finden — vom Komplementärkontrast über Split-Komplementär bis hin zu triadischen Schemata. Die 60-30-10-Regel hilft dir dabei, diese Kontraste ausgewogen einzusetzen: 60 % neutrale Hauptfarbe, 30 % Sekundärfarbe und nur 10 % für deine kontrastreichste Akzentfarbe. Eine Schritt-für-Schritt-Anleitung zu allen Farbharmonien und wie du sie konkret anwendest, findest du in unserem Guide zum Farbpalette erstellen.
Die wichtigsten Tools
Hier die Tools, die ich dir empfehle – und die ich teilweise selbst regelmäßig nutze:
| Tool | URL | Stärke |
|---|---|---|
| WebAIM Contrast Checker | webaim.org/resources/contrastchecker | Schnellste Prüfung, Industriestandard |
| Coolors Contrast Checker | coolors.co/contrast-checker | Schöne UI, „Click to Fix“-Vorschläge |
| Adobe Color | color.adobe.com | Farbrad mit 6 Harmonien + Barrierefreiheitsprüfung |
| Colour Contrast Analyser (CCA) | tpgi.com/color-contrast-checker | Desktop-App mit Pipette für jede Anwendung |
| Stark Plugin | getstark.co | Direkt in Figma/Sketch integriert |
| Paletton | paletton.com | Fortgeschrittenes Farbrad mit Web-Mockup-Vorschau |
| kontrastrechner.de | kontrastrechner.de | Deutschsprachiger WCAG-Rechner |
Starte mit Adobe Color, wenn du eine Farbpalette von Grund auf erstellen willst – du gibst eine Basisfarbe ein, wählst die Harmonie-Regel (Komplementär, Split-Komplementär, Triade etc.) und bekommst automatisch die passenden Farben berechnet. Danach prüfst du die Kombination mit dem WebAIM Contrast Checker auf Barrierefreiheit. Der Workflow dauert keine zwei Minuten und gibt dir die Sicherheit, dass deine Farben sowohl ästhetisch als auch technisch funktionieren.
Wenn du in Figma arbeitest, ist das Stark Plugin Gold wert – es überprüft deine Entwürfe direkt während des UI-Designs, ohne dass du die Farben manuell in einen externen Checker eingeben musst.
Farbpsychologie im Marketing: Kontrast als Conversion-Hebel
Farbkontraste wirken nicht nur ästhetisch — sie steuern gezielt das Verhalten deiner Nutzer. Der wichtigste Praxis-Tipp: Dein CTA-Button sollte die Komplementärfarbe der dominanten Seitenfarbe sein, um maximalen visuellen Kontrast zu erzeugen. Ein berühmter A/B-Test von HubSpot zeigte, dass ein roter Button einen grünen um 21 % übertraf — auf einer grünen Seite war Rot schlicht der Komplementärkontrast.
Welche Farbe welche Emotion auslöst und wie du Farbpsychologie strategisch für Branding und Conversion Optimierung nutzt, erfährst du ausführlich in unserem Farbpsychologie-Artikel.
Fazit: Zwei Kontrastsprachen, ein Gestaltungsziel
Ittens sieben Farbkontraste und der WCAG-Standard sind keine Gegensätze – sie sind komplementäre Werkzeuge (passendes Wort, oder?) für unterschiedliche Aspekte derselben Gestaltungsaufgabe.
Itten lehrt uns, wie Farben emotional wirken, Räumlichkeit erzeugen und den Blick lenken. Die WCAG stellt sicher, dass diese Wirkung auch für die über 2,2 Milliarden Menschen weltweit mit Sehbeeinträchtigungen zugänglich bleibt.
Die größte Erkenntnis für die Praxis: Farbton-Kontrast (Buntkontrast, Komplementärkontrast, Kalt-Warm-Kontrast) und Leuchtdichte-Kontrast (WCAG) sind unabhängige Dimensionen. Ein Design braucht beides – künstlerischen Kontrast für Wirkung und messbaren Kontrast für Lesbarkeit.
Meine Empfehlung: Gestalte mit Ittens Prinzipien für die ästhetische Komposition und prüfe anschließend mit dem WebAIM Contrast Checker, ob deine Kombination auch die technische Hürde nimmt. Nutze den AAA-Standard (7:1) als Ziel, nicht nur den AA-Standard – denn WCAG ist der Boden, nicht die Decke guter Gestaltung.
Wenn du dich tiefer in das Thema einarbeiten möchtest, empfehle ich dir auch meinen Guide zum perfekten Farbschema für deine Website.
Und jetzt: Geh raus und spiel mit Farben! Öffne Adobe Color, probiere verschiedene Harmonien aus und check sie auf Barrierefreiheit. Du wirst erstaunt sein, wie schnell du ein Auge dafür entwickelst, was funktioniert – und was nicht.
Viel Spaß beim Gestalten!
Häufig gestellte Fragen
Was sind die 7 Farbkontraste nach Itten?
Johannes Itten definierte sieben grundlegende Farbkontraste: Farbe-an-sich-Kontrast (Buntkontrast), Hell-Dunkel-Kontrast, Kalt-Warm-Kontrast, Komplementärkontrast, Simultankontrast, Qualitätskontrast (Sättigungskontrast) und Quantitätskontrast (Flächenkontrast). Jeder dieser Kontraste beschreibt eine andere Art, wie Farben miteinander interagieren und wirken.
Was ist der Unterschied zwischen WCAG-Kontrast und Ittens Farbkontrasten?
Ittens Farbkontraste sind subjektiv und emotional – sie beschreiben, wie Farben auf uns wirken (warm/kalt, leuchtend/gedämpft, etc.). Der WCAG-Kontrast hingegen ist ein rein technischer Wert, der nur die Leuchtdichte (Helligkeit) zweier Farben vergleicht. Ein Design kann hohen künstlerischen Kontrast haben (z.B. Rot auf Grün) und trotzdem bei der WCAG-Prüfung durchfallen, weil beide Farben ähnliche Helligkeit haben.
Welches Kontrastverhältnis brauche ich für barrierefreien Text?
Nach WCAG 2.2 benötigt normaler Text mindestens ein Kontrastverhältnis von 4,5:1 für die AA-Stufe. Großer Text (ab 18pt oder 14pt fett) braucht nur 3:1. Für die strengere AAA-Stufe gelten 7:1 für Normaltext und 4,5:1 für großen Text. UI-Komponenten und grafische Objekte benötigen mindestens 3:1.
Was sind Komplementärfarben und wie finde ich sie?
Komplementärfarben liegen sich auf dem Farbkreis diametral gegenüber. Die drei primären Komplementärpaare sind: Rot-Grün, Blau-Orange und Gelb-Violett. Nebeneinandergelegt verstärken sie sich gegenseitig maximal. Du findest Komplementärfarben am einfachsten mit Tools wie Adobe Color – dort wählst du einfach die „Komplementär“-Harmonie und gibst deine Ausgangsfarbe ein.
Welche Farben sind warm und welche kalt?
Warme Farben sind Rot, Orange, Gelb und deren Abstufungen – sie assoziieren wir mit Feuer und Sonne. Kalte Farben sind Blau, Cyan, Türkis und kühle Violetttöne – sie erinnern an Wasser und Eis. Die wärmste Farbe ist Rotorange (#FF4500), die kälteste Blaugrün/Cyan (#008B8B). Grün und Violett sind Chamäleon-Farben: Je nach Kontext können sie warm oder kalt wirken.
Was bedeutet das BFSG für meine Website?
Das Barrierefreiheitsstärkungsgesetz (BFSG) macht die WCAG-Anforderungen in Deutschland seit Juni 2025 rechtlich verbindlich. Verstöße können mit Bußgeldern bis zu 100.000 € geahndet werden. Das betrifft viele Unternehmen, die digitale Produkte oder Dienstleistungen anbieten. Konkret bedeutet das: Deine Texte müssen mindestens ein Kontrastverhältnis von 4,5:1 zum Hintergrund haben.
Welche Tools kann ich nutzen, um Farbkontraste zu prüfen?
Der WebAIM Contrast Checker ist der Industriestandard für schnelle Kontrastprüfungen. Adobe Color bietet ein Farbrad mit verschiedenen Harmonien plus integrierte Barrierefreiheitsprüfung. Coolors hat eine schöne Oberfläche mit „Click to Fix“-Vorschlägen. Für Figma gibt es das Stark Plugin, das direkt im Design prüft. Der deutsche kontrastrechner.de ist ebenfalls hilfreich.
