Farbkontrast im Webdesign: kleines Detail, grosse Wirkung

Farbkontrast ist eine dieser Stellschrauben, die im Designprozess oft beiläufig entschieden wird und am Ende grösseren Einfluss auf Lesbarkeit und Vertrauen hat als manche grossen Layoutfragen. Hellgraue Schrift auf weissem Hintergrund, dezente Buttons in Markenfarbe, Hinweise in Pastell: vieles davon sieht in der Designpräsentation elegant aus und wird im echten Alltag zu einem Hindernis.

Das gilt nicht nur für Menschen mit Sehbeeinträchtigung. Auch jemand, der bei Sonnenlicht auf das Display schaut, ein älteres Smartphone benutzt oder einfach nur müde ist, profitiert von ehrlichen Kontrasten. Schwacher Kontrast ist deshalb selten ein Stil-Argument, sondern fast immer eine Frage von Disziplin im Designsystem.

Was die WCAG konkret verlangen

Die WCAG geben für Text klare Mindestwerte vor. Für normalgrossen Fliesstext liegt der relevante Massstab auf Stufe AA bei einem Kontrastverhältnis von 4.5 zu 1 zwischen Text und Hintergrund. Für grossen Text reichen 3 zu 1, und auch grafische Bedienelemente und visuelle Statusinformationen müssen einen Mindestkontrast erfüllen.

Diese Werte sind keine Pose. Sie kommen aus Wahrnehmungsforschung und sind so gewählt, dass möglichst viele Menschen Inhalte ohne übermässige Anstrengung lesen können. Wer sie unterschreitet, schliesst Nutzer:innen aktiv aus, auch wenn das im Designtool nie sichtbar wird.

Wo Kontrast in der Praxis kippt

Im Alltag scheitern Websites selten am Headline-Kontrast. Sie scheitern an genau den Stellen, an denen Designentscheidungen aus dem System ausbrechen:

• Hinweistexte und Disclaimer in zu hellem Grau
• Platzhaltertexte in Formularen, die optisch kaum vom Hintergrund zu trennen sind
• Buttons in Markenfarbe mit weisser Schrift, die zu wenig Kontrast bietet
• Links, die nur durch Farbe markiert sind und zusätzlich schwach kontrastieren
• Icons, die als Bedienelement funktionieren sollen, aber visuell zurückhaltend bleiben
• Hover- und Fokus-Zustände, die kaum sichtbar sind

Diese Punkte sehen einzeln klein aus, summieren sich aber schnell zu einem System, das insgesamt schwer zu nutzen ist.

Markenfarben sind kein Freifahrtschein

Eine der häufigsten Diskussionen im Designprozess dreht sich um Markenfarben. Ein bestimmter Gelbton ist Teil der Identität, ein bestimmtes helles Blau prägt das Kommunikationsdesign. Die Frage ist nicht, ob man diese Farben verwendet, sondern wo.

Markenfarben gehören in viele Bereiche, aber nicht zwingend dorthin, wo Lesbarkeit entscheidend ist. Eine starke Akzentfarbe kann auf Buttons funktionieren, wenn die Schriftfarbe darauf bewusst gewählt wird. Sie funktioniert oft schlecht als reiner Fliesstextton. Saubere Designsysteme regeln das, indem sie Markenfarben in eine Skala übersetzen und für jede Anwendung definierte Tokens vergeben.

Wer sich frühzeitig mit einem strukturierten Farbsystem für Websites beschäftigt, hat diese Diskussion in den meisten Projekten bereits geführt, bevor sie inhaltlich zum Problem wird.

Hover, Fokus und Zustände nicht vergessen

Kontrast endet nicht beim Ruhezustand. Ein Button, der im Standard gut lesbar ist, kann im Hover-Zustand plötzlich zu hell werden. Ein Link, der sichtbar ist, kann im Fokus kaum noch erkennbar sein, weil der Fokusring schwach gestaltet ist.

Gerade Fokus-Zustände sind ein Bereich, in dem Design und Barrierefreiheit oft kollidieren. Wer den Fokusring entfernt oder bis zur Unsichtbarkeit schwächt, macht die Website für Tastaturnutzer:innen unbrauchbar. Stattdessen lohnt sich ein bewusst gestalteter Fokus-Stil, der zur Marke passt und trotzdem deutlich sichtbar ist.

Tools helfen, ersetzen aber kein Auge

Es gibt eine ganze Reihe an Tools, mit denen sich Kontraste messen lassen, von Browser-Erweiterungen bis zu integrierten Funktionen in Designwerkzeugen. Diese Tools sind hilfreich, ersetzen aber keine bewusste Beurteilung. Ein Wert kann formal die Anforderung erfüllen und trotzdem unangenehm zu lesen sein, etwa weil Schriftgrösse, Laufweite oder Hintergrundbild zusätzlich beanspruchen.

Sinnvoll ist eine Kombination:

• Tokens und Designsystem so anlegen, dass Mindestkontraste schon strukturell gesichert sind
• kritische Stellen wie Formulare, Buttons und Hinweistexte zusätzlich bewusst prüfen
• Tests auf realen Geräten und in unterschiedlichen Lichtsituationen
• regelmässige Kontrolle, wenn neue Komponenten oder Inhalte dazukommen

Kontrast ist auch ein Conversion-Thema

Der Effekt von gutem Kontrast geht über Barrierefreiheit hinaus. Klar lesbare Texte, deutlich sichtbare CTAs und unterscheidbare Bedienelemente führen messbar zu besseren Interaktionen. Wer die Lesbarkeit seiner Seite anhebt, verbessert nebenbei oft auch die Performance des Conversion-Funnels, ohne eine einzige Headline neu zu schreiben.

Ruhiger Schluss

Kontrast wirkt wie ein technisches Detail, ist aber eine der Stellen, an denen Marke, UX und Barrierefreiheit am direktesten zusammentreffen. Eine ruhig durchdachte Farb- und Kontraststrategie verbessert Zugänglichkeit, Lesbarkeit und Markeneindruck gleichzeitig.

Wenn du unsicher bist, wie deine aktuelle Website in dieser Hinsicht steht, lässt sich das in einer kurzen Bestandsaufnahme meist klar bewerten. Oft sind es einzelne, gut adressierbare Stellen, die einen grossen Teil der Wirkung tragen.