Kontrast als Werkzeug

Kontrast ist das Grundwerkzeug jeder Gestaltung. Ohne Unterschiede gäbe es nichts zu sehen: kein Text auf dem Hintergrund, keine Überschrift über dem Absatz, keinen Knopf auf der Seite. Wenn im Alltag von Kontrast gesprochen wird, ist meist der Helligkeitsunterschied zwischen Schrift und Hintergrund gemeint, der für die Lesbarkeit entscheidend ist. In der Gestaltung ist der Begriff aber weiter gefasst: Kontrast ist jeder wahrnehmbare Unterschied zwischen Elementen – in Größe, Helligkeit, Farbe, Form, Richtung, Textur oder Bewegung.

Die vorigen Lektionen haben gezeigt, wie das Auge ordnet und wie Hierarchie entsteht. Kontrast ist das Mittel, mit dem beides umgesetzt wird. Ähnlichkeit bildet Gruppen, Kontrast trennt sie und hebt einzelne Elemente heraus. Wer Kontrast bewusst einsetzt, steuert, was gesehen wird.

1. Der Isolationseffekt

Der Isolationseffekt ist die wissenschaftliche Grundlage fast jeder Hervorhebung im Design. Probieren Sie es aus: In einer Reihe gleicher Elemente genügt ein einziger Unterschied, damit ein Element sofort auffällt.

Bemerkenswert ist, dass der Effekt nur funktioniert, wenn die Umgebung einheitlich ist. Hebt man in einer Reihe zwei, drei oder vier Elemente auf unterschiedliche Weise hervor, verliert jedes einzelne seine Wirkung. Das erklärt, warum ein einziger farbiger Knopf auf einer ruhigen Seite stärker wirkt als fünf bunte Knöpfe, die alle Aufmerksamkeit wollen.

2. Kontrastarten

Der Maler und Bauhaus-Lehrer Johannes Itten hat für Farben sieben Kontrastarten beschrieben, darunter den Hell-Dunkel-Kontrast, den Kalt-Warm-Kontrast und den Komplementärkontrast. Für die Gestaltung im Web ist eine etwas breitere Einteilung hilfreich, die auch Größe, Form und Stil umfasst.

Kontrastarten lassen sich kombinieren. Ein Hauptknopf ist oft größer, farbig und gefüllt, während ein Nebenknopf kleiner, neutral und nur umrandet ist. Diese Kombination aus mehreren Unterschieden macht die Rangordnung eindeutig. Wichtig ist die Richtung: Alle Unterschiede sollten dasselbe aussagen. Ein Nebenknopf, der zwar kleiner, aber in einer grelleren Farbe gestaltet ist, sendet widersprüchliche Signale.

3. Deutlich oder gar nicht

Eine der wichtigsten Regeln lautet: Kontrast muss deutlich sein. Kleine Unterschiede wirken nicht wie eine Absicht, sondern wie ein Fehler. Eine Überschrift, die nur minimal größer ist als der Text, eine Farbe, die sich kaum von einer anderen unterscheidet, ein Abstand, der nur ein wenig größer ist als der übliche – solche Nuancen irritieren, weil das Auge einen Unterschied spürt, aber nicht versteht, was er bedeutet. Der Typograf Robert Bringhurst und viele Gestaltungslehrer nach ihm raten deshalb: Wenn zwei Elemente verschieden sein sollen, dann richtig verschieden. Wenn nicht, dann gleich.

4. Zu viel und zu wenig

Seiten mit zu wenig Kontrast wirken langweilig und schwer lesbar. Alles sieht gleich aus, nichts führt den Blick, und Nutzer finden die wichtigen Informationen nicht. Oft ist das die Folge eines übervorsichtigen Minimalismus: hellgraue Schrift, dezente Knöpfe, zarte Linien. Das mag elegant aussehen, scheitert aber im Alltag – auf schlechten Bildschirmen, bei Sonnenlicht, bei älteren Nutzern. Hier verbinden sich Gestaltung und Barrierefreiheit: Die Mindestkontraste der WCAG sind keine Einschränkung guten Designs, sondern eine Untergrenze für funktionierendes Design.

Seiten mit zu viel Kontrast wirken laut und anstrengend. Viele Farben, viele Schriften, viele Größen, blinkende Elemente – das Auge findet keine Ruhe. Typisch ist das bei Seiten, die über Jahre gewachsen sind und bei denen jede neue Aktion noch ein wenig lauter sein musste als die vorige. Die Lösung ist fast immer Reduktion: weniger Farben, weniger Schriftgrößen, weniger hervorgehobene Elemente. Ein nützliches Werkzeug ist eine kleine Liste zulässiger Varianten, etwa zwei Schriften, fünf Schriftgrößen, eine Akzentfarbe und zwei Knopfarten. Alles, was darüber hinausgeht, muss begründet werden.

5. Kontrast im Arbeitsalltag

Für die tägliche Arbeit lassen sich die Einsichten dieser Lektion in einer Faustregel zusammenfassen: Pro Seite oder Bildschirm gibt es ein Element mit maximalem Kontrast – meist die Hauptaussage oder die wichtigste Handlung. Einige wenige Elemente haben mittleren Kontrast, alles andere bleibt ruhig. Wer eine neue Seite gestaltet oder beurteilt, fragt zuerst: Welches Element ist das eine? Dann: Hebt es sich deutlich genug ab? Und schließlich: Gibt es Elemente, die unnötig Aufmerksamkeit ziehen? Mit diesen drei Fragen lassen sich die meisten Gestaltungsprobleme schon im Entwurf erkennen, bevor sie teuer werden. Im nächsten Modul geht es um Typografie – das Feld, in dem Kontrast und Hierarchie im Detail umgesetzt werden.

Wie das konkret aussieht, zeigt ein kleines Beispiel. Ein Unternehmen setzte auf seiner Website für Hervorhebungen gleichzeitig fetten Text, farbigen Text, unterstrichenen Text, Großbuchstaben und farbige Hinterlegungen ein – je nachdem, wer den Text gerade bearbeitet hatte. Nutzer konnten nicht mehr erkennen, was ein Link war und was nur betont werden sollte. Die Lösung war eine einfache Regel: Links sind in der Akzentfarbe und unterstrichen, Betonungen im Fließtext nur fett und sparsam, alles andere entfällt. Innerhalb weniger Tage wirkten die Seiten ruhiger, und in der Webanalyse stieg die Zahl der Klicks auf die Links im Text, weil sie wieder als Links erkennbar waren.

Hilfreich ist auch ein Blick auf die Umgebung, in der eine Seite gesehen wird. Auf dem Smartphone fehlt oft der Platz für große Größenunterschiede, und Farben wirken je nach Bildschirm und Lichtverhältnissen anders. Kontraste sollten deshalb nicht nur auf dem großen Monitor im Büro geprüft werden, sondern auch auf einem durchschnittlichen Handy im Freien. Was dort noch klar erkennbar ist, funktioniert fast überall. Ebenso lohnt der Blick auf den dunklen Modus, den viele Geräte inzwischen anbieten: Eine Akzentfarbe, die auf Weiß kräftig wirkt, kann auf dunklem Grund grell oder zu schwach erscheinen. Für beide Varianten sollte deshalb bewusst entschieden werden, wie stark ein Element hervortreten soll.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.