Farben sind auf einer Website viel mehr als nur Geschmackssache. Sie bestimmen, ob eine Seite freundlich wirkt, modern aussieht oder zur Marke passt. Aber Farben haben noch eine andere Aufgabe, die oft unterschätzt wird: Sie müssen Inhalte lesbar und bedienbar machen.
Eine Website kann optisch sehr schön sein und trotzdem für viele Menschen schwer nutzbar. Der häufigste Grund ist ein schlechter Kontrast. Hellgraue Schrift auf weißem Hintergrund, weiße Schrift auf einem unruhigen Bild, pastellfarbene Buttons oder kaum sichtbare Links sehen vielleicht elegant aus, sind aber im Alltag oft problematisch.
Barrierefreie Farben bedeuten deshalb nicht, dass deine Website langweilig aussehen muss. Es geht darum, Farben so einzusetzen, dass Menschen Inhalte gut erkennen können.
Was bedeutet Kontrast auf einer Website?
Kontrast beschreibt den Unterschied zwischen Vordergrund und Hintergrund.
Bei Text geht es meistens um die Frage: Hebt sich die Schrift deutlich genug vom Hintergrund ab?
Also zum Beispiel:
Dunkelblauer Text auf weißem Hintergrund ist gut lesbar.
Hellgrauer Text auf weißem Hintergrund ist oft schwer lesbar.
Weiße Schrift auf einem hellen Foto kann problematisch sein.
Grüne Schrift auf blauem Hintergrund kann je nach Farbton schwierig sein.
Kontrast betrifft aber nicht nur Texte. Auch Buttons, Formularfelder, Icons, Rahmen, Fokusmarkierungen und Fehlermeldungen müssen erkennbar sein.
Wenn Nutzer nicht sehen können, wo sie klicken sollen, welches Feld aktiv ist oder welcher Button wichtig ist, entsteht eine Barriere.
Warum schlechter Kontrast so häufig vorkommt
Schlechter Kontrast entsteht meistens nicht absichtlich. Oft passiert es beim Design.
Viele moderne Layouts arbeiten mit sehr hellen Grautönen, weichen Hintergründen und dezenten Akzentfarben. Das sieht im Entwurf sauber und hochwertig aus. Auf echten Geräten sieht es aber oft anders aus.
Ein Design wird am großen Monitor erstellt. Der Besucher sieht es später auf einem älteren Laptop, auf einem günstigen Smartphone, draußen in der Sonne oder mit aktivierter Display-Helligkeit auf 40 Prozent.
Was im Designprogramm noch gut aussah, ist dann plötzlich schwer zu lesen.
Besonders häufig sind diese Probleme:
hellgraue Fließtexte,
zu dezente Linkfarben,
Buttons mit wenig Unterschied zum Hintergrund,
weiße Schrift auf Bildern,
Text auf Farbverläufen,
Fehlermeldungen nur in Rot,
Formularrahmen in sehr hellem Grau,
Footer-Texte mit schwachem Kontrast.
Welche Kontrastwerte sind wichtig?
Für Websitebetreiber reicht meistens eine einfache Orientierung.
Normaler Text sollte mindestens ein Kontrastverhältnis von 4,5:1 zum Hintergrund haben.
Großer Text darf etwas weniger Kontrast haben. Hier reichen meist 3:1. Als großer Text gelten grob gesagt sehr große Schrift oder größere fette Schrift.
Für besonders hohe Anforderungen, also Level AAA, gelten strengere Werte: 7:1 für normalen Text und 4,5:1 für großen Text.
Außerdem wichtig: Nicht nur Text zählt. Auch wichtige Bedienelemente und grafische Informationen sollten erkennbar sein. Dazu gehören zum Beispiel Button-Rahmen, Eingabefelder, Icons, Diagramme oder Fokusmarkierungen. Hier ist häufig ein Mindestkontrast von 3:1 relevant.
Für die Praxis heißt das: Wenn du dich an 4,5:1 für normalen Text hältst, bist du bei vielen typischen Website-Texten auf einem guten Weg.
Was ist normaler Text und was ist großer Text?
Viele fragen sich: Wann zählt Text als groß?
Als einfache Faustregel kannst du sagen:
Fließtext, kleine Hinweise, Menütexte, Formularlabels, Footer-Texte und normale Buttontexte solltest du wie normalen Text behandeln. Dafür solltest du mindestens 4,5:1 anstreben.
Großer Text sind eher sehr große Überschriften oder deutlich größer gesetzte, fette Texte. Hier kann 3:1 ausreichen.
Aber mein praktischer Rat wäre: Nutze die niedrigeren Werte nicht als Ausrede. Wenn eine Überschrift zwar formal groß genug ist, aber auf einem hellen Bild kaum lesbar wirkt, bringt dir der rechnerische Mindestwert wenig.
Lesbarkeit sollte immer vor Designtricks kommen.
Farbe allein darf keine Information sein
Ein wichtiger Punkt bei barrierefreien Farben: Farbe darf nicht die einzige Möglichkeit sein, eine Information zu erkennen.
Ein Beispiel aus einem Formular:
Ein Feld ist falsch ausgefüllt und wird nur rot umrandet. Mehr passiert nicht.
Das ist ungünstig. Manche Menschen erkennen Farben nicht zuverlässig. Andere sehen den roten Rahmen vielleicht nicht gut genug. Besser ist zusätzlich eine klare Fehlermeldung:
„Bitte geben Sie eine gültige E-Mail-Adresse ein.“
Das Gleiche gilt für Diagramme, Statusanzeigen, Preislabels oder Verfügbarkeiten.
Schlecht:
Rot bedeutet nicht verfügbar, grün bedeutet verfügbar.
Besser:
Rot plus Text „nicht verfügbar“
Grün plus Text „verfügbar“
Farbe kann unterstützen. Aber sie sollte nie die einzige Information sein.
Links müssen erkennbar sein
Links sind ein gutes Beispiel für Kontrast und Gestaltung.
Viele Websites färben Links nur minimal anders als normalen Text. Das sieht ruhig aus, ist aber oft schwer zu erkennen. Besonders problematisch wird es, wenn Links nur durch Farbe unterscheidbar sind.
Ein Link sollte klar erkennbar sein. Das kann durch Farbe, Unterstreichung, stärkere Schrift oder eine andere deutliche Gestaltung passieren.
Im Fließtext ist eine Unterstreichung oft die einfachste und verständlichste Lösung. Gerade bei längeren Artikeln hilft sie sehr.
Wichtig ist auch der Kontrast zwischen Linkfarbe und Hintergrund. Ein hellblauer Link auf weißem Hintergrund kann zu schwach sein, auch wenn er optisch zur Marke passt.
Buttons brauchen mehr als schöne Farbe
Buttons sind auf vielen Websites entscheidend. Sie führen zu Kontakt, Kauf, Buchung, Download oder Anfrage.
Ein Button muss deshalb klar erkennbar sein.
Prüfe:
Hebt sich der Button vom Hintergrund ab?
Ist der Text auf dem Button gut lesbar?
Ist der Button auch im Hover- und Fokuszustand sichtbar?
Ist ein deaktivierter Button eindeutig als deaktiviert erkennbar?
Ist der wichtigste Button deutlich stärker als unwichtige Nebenbuttons?
Ein häufiger Fehler sind helle Buttons mit weißer Schrift. Das kann schnell zu wenig Kontrast haben.
Auch transparente Buttons mit dünnem Rahmen sind oft schwierig. Wenn der Rahmen kaum sichtbar ist, erkennt man nicht sofort, dass es ein Button ist.
Formularfelder müssen sichtbar sein
Formulare sind besonders wichtig. Kontaktformular, Checkout, Newsletter, Login, Buchung – überall müssen Nutzer sehen, was sie ausfüllen sollen.
Viele moderne Formulare nutzen sehr helle graue Linien. Das sieht minimalistisch aus, kann aber schlecht erkennbar sein.
Prüfe:
Sind Eingabefelder klar sichtbar?
Heben sie sich vom Hintergrund ab?
Ist das aktive Feld deutlich markiert?
Sind Labels gut lesbar?
Sind Fehlermeldungen klar erkennbar?
Sind Pflichtfelder nicht nur farblich markiert?
Ein Formularfeld ohne klaren Rahmen oder Hintergrund kann schnell wie normaler Textbereich wirken. Nutzer sollten nicht raten müssen, wo sie klicken oder tippen sollen.
Fokusmarkierungen brauchen Kontrast
Wenn Nutzer eine Website mit der Tastatur bedienen, zeigt der Fokus, welches Element gerade aktiv ist. Das kann ein Link, Button, Formularfeld oder Menüpunkt sein.
Diese Fokusmarkierung muss deutlich sichtbar sein.
Leider wird sie oft entfernt oder so dezent gestaltet, dass sie kaum auffällt. Das ist ein echtes Problem.
Ein guter Fokus kann zum Beispiel ein klarer Rahmen, ein Schatten, eine Unterstreichung oder eine farbliche Hervorhebung sein. Wichtig ist, dass er sich deutlich vom normalen Zustand unterscheidet.
Teste deine Website mit der Tab-Taste. Wenn du nicht sofort erkennst, wo du gerade bist, ist der Fokus zu schwach.
Text auf Bildern ist oft problematisch
Viele Websites nutzen große Hero-Bilder mit Text darüber. Das sieht modern aus, ist aber bei Kontrast oft schwierig.
Warum?
Ein Bild hat helle und dunkle Bereiche. Der Text liegt vielleicht über einem hellen Fenster, einer weißen Wand oder einem Himmel. Schon ist die Schrift schlecht lesbar.
Mögliche Lösungen:
einen dunklen Overlay über das Bild legen,
Text auf eine einfarbige Fläche setzen,
Bildbereiche bewusst abdunkeln,
stärkere Schriftfarbe nutzen,
Text nicht direkt ins Bild legen,
auf ruhige Bildmotive achten.
Wichtig: Prüfe nicht nur das eine Bild im Design. Prüfe alle Bilder, die später im Slider oder Header verwendet werden. Ein Bildwechsel kann den Kontrast komplett verändern.
Farbverläufe können täuschen
Farbverläufe sehen oft gut aus. Aber sie machen Kontrastprüfungen schwieriger.
Wenn Text auf einem Verlauf liegt, kann der Kontrast an einer Stelle gut und an einer anderen schlecht sein. Der Text muss dort lesbar sein, wo der Kontrast am schwächsten ist.
Prüfe deshalb nicht nur den durchschnittlichen Eindruck. Schau dir die hellste oder ungünstigste Stelle unter dem Text an.
Wenn du unsicher bist, nutze lieber eine feste Hintergrundfläche hinter dem Text.
Dark Mode und helle Designs separat prüfen
Viele Websites oder Apps bieten inzwischen Dark Mode oder dunkle Abschnitte. Auch hier muss Kontrast geprüft werden.
Dunkler Hintergrund mit weißem Text ist nicht automatisch perfekt. Zu grelles Weiß auf tiefem Schwarz kann für manche Nutzer anstrengend sein. Sehr dunkles Grau mit mittelgrauer Schrift kann wiederum zu schwach sein.
Prüfe beide Richtungen:
heller Hintergrund mit dunklem Text,
dunkler Hintergrund mit hellem Text.
Wenn deine Website verschiedene Farbmodi hat, musst du beide testen.
Markenfarben sind nicht immer barrierefrei
Viele Unternehmen haben feste Markenfarben. Das ist wichtig für Wiedererkennung. Aber nicht jede Markenfarbe eignet sich für jeden Zweck.
Eine helle Akzentfarbe kann als Fläche gut aussehen, aber für weißen Buttontext ungeeignet sein. Ein kräftiges Orange kann auf Weiß funktionieren, aber mit weißem Text zu schwach sein. Ein helles Türkis kann als Icon schön sein, aber als Linkfarbe schwer lesbar.
Die Lösung ist nicht, die Marke aufzugeben. Besser ist ein Farbsystem:
eine Hauptfarbe,
eine dunklere Variante für Text und Buttons,
eine hellere Variante für Hintergründe,
eine Kontrastfarbe für Fokus und Hinweise,
neutrale Farben für Text, Rahmen und Flächen.
So bleibt die Marke erhalten, aber die Website wird besser nutzbar.
Wie prüft man Kontrast richtig?
Du musst Kontrast nicht nach Gefühl beurteilen. Es gibt Tools, in die du Vordergrund- und Hintergrundfarbe einträgst. Dann bekommst du ein Verhältnis wie 3,2:1 oder 5,8:1.
Wichtig ist, dass du die tatsächlichen Farben prüfst.
Also nicht nur „unser Blau“, sondern genau das Blau, das im Button verwendet wird. Und genau den Hintergrund, auf dem der Button steht.
Bei Text auf Bildern ist es schwieriger. Hier solltest du den kritischsten Hintergrundbereich auswählen oder besser das Design so ändern, dass der Text auf einer einfarbigen Fläche liegt.
Welche Bereiche solltest du zuerst prüfen?
Wenn du nicht die komplette Website auf einmal prüfen möchtest, starte mit den wichtigsten Stellen.
Prüfe zuerst:
Fließtexte,
Überschriften,
Buttons,
Links,
Menü,
Footer,
Kontaktformular,
Fehlermeldungen,
Cookie-Banner,
Warenkorb und Checkout,
Terminbuchung,
mobile Ansicht.
Gerade bei Formularen, Shop und Buchung ist Kontrast besonders wichtig. Dort müssen Nutzer aktiv handeln. Wenn dort etwas schlecht erkennbar ist, entstehen schnell Abbrüche.
Kontrast auf dem Smartphone testen
Viele Kontrastprobleme fallen erst mobil auf.
Auf dem Smartphone sind Texte kleiner, Buttons enger und Hintergründe oft anders zugeschnitten. Ein Bild, das am Desktop dunkel genug war, zeigt mobil vielleicht einen hellen Ausschnitt. Schon ist der Text schlecht lesbar.
Prüfe deshalb:
Startseite mobil,
Menü mobil,
Buttons mobil,
Formulare mobil,
Checkout mobil,
Popups mobil,
Cookie-Banner mobil.
Teste möglichst nicht nur im Browser-Preview, sondern auf einem echten Gerät.
Hover, Fokus und aktive Zustände nicht vergessen
Viele prüfen nur den normalen Zustand eines Buttons oder Links. Aber interaktive Elemente haben mehrere Zustände.
Zum Beispiel:
normal,
hover,
focus,
active,
disabled,
selected,
error.
Alle wichtigen Zustände sollten erkennbar sein.
Ein Filter in einem Shop muss zeigen, welche Option aktiv ist. Ein Formularfeld muss zeigen, dass es gerade ausgewählt ist. Ein Button muss auch beim Fokus gut sichtbar bleiben.
Gerade aktive und deaktivierte Zustände sind häufig zu schwach.
Kontrast bei Icons und Grafiken
Kontrast betrifft nicht nur Text.
Auch Icons, Diagramme, Linien, Rahmen und wichtige grafische Elemente müssen erkennbar sein.
Beispiele:
Warenkorb-Icon,
Suchsymbol,
Menü-Icon,
Pfeile in Slidern,
Formularrahmen,
Checkboxen,
Radio-Buttons,
Diagrammlinien,
Statussymbole,
Fokusrahmen.
Wenn ein Icon eine Funktion hat, muss es klar sichtbar sein. Ein hellgraues Suchsymbol auf weißem Hintergrund ist schnell zu schwach.
Typische Fehler bei Farben
Die häufigsten Farbprobleme sind ziemlich leicht zu erkennen, wenn man weiß, worauf man achten muss.
Typische Fehler:
hellgrauer Text auf weißem Hintergrund,
weiße Schrift auf hellem Bild,
farbige Buttons mit zu heller Schrift,
Links nur minimal anders als Text,
Fehler nur durch rote Farbe,
aktive Filter nur durch Farbe markiert,
Formularrahmen kaum sichtbar,
Fokusmarkierung zu schwach,
Icons ohne ausreichenden Kontrast,
Text auf unruhigen Verläufen.
Viele dieser Fehler lassen sich ohne kompletten Relaunch verbessern.
Praktische Tipps für bessere Farben
Wenn du deine Website verbessern möchtest, helfen diese einfachen Regeln:
Nutze für Fließtext lieber dunkle, klare Farben.
Verwende helle Farben eher als Hintergrund, nicht als Text.
Lege Text auf Bilder nur mit Overlay oder fester Fläche.
Nutze Unterstreichungen für Links im Fließtext.
Gestalte Buttons mit deutlichem Hintergrund und gut lesbarem Text.
Markiere Fehler mit Text und Symbol, nicht nur mit Farbe.
Prüfe mobile Ansichten separat.
Teste Fokuszustände mit der Tastatur.
Lege ein kleines Farbsystem für deine Website fest.
Je konsequenter du Farben einsetzt, desto ruhiger und verständlicher wirkt die Website.
Barrierefreie Farben und Design schließen sich nicht aus
Manche Designer befürchten, dass barrierefreie Farben das Design zerstören. Das Gegenteil ist oft der Fall.
Guter Kontrast macht Inhalte klarer. Klare Buttons wirken professioneller. Lesbare Texte fühlen sich hochwertiger an. Eine Website, die man ohne Anstrengung lesen kann, bleibt eher im Kopf.
Barrierefreiheit bedeutet nicht, alles schwarz-weiß zu machen. Es bedeutet, Farben bewusster einzusetzen.
Ein modernes Design darf weich, freundlich und individuell sein. Es sollte nur nicht auf Kosten der Lesbarkeit gehen.
Kurze Checkliste für den Kontrast-Test
Prüfe deine Website mit diesen Fragen:
Ist Fließtext gut lesbar?
Erreichen normale Texte mindestens 4,5:1?
Sind große Überschriften ausreichend kontrastreich?
Sind Links klar erkennbar?
Sind Buttons gut sichtbar?
Ist Buttontext lesbar?
Sind Formularfelder erkennbar?
Sind Fehlermeldungen nicht nur farbig?
Ist der Tastaturfokus sichtbar?
Sind Icons und grafische Elemente erkennbar?
Funktioniert Text auf Bildern zuverlässig?
Sind mobile Ansichten geprüft?
Sind Hover-, Fokus- und aktive Zustände klar?
Werden Informationen nicht nur über Farbe vermittelt?
Wenn du hier mehrere Schwächen findest, lohnt sich eine Farbüberarbeitung.
Fazit: Kontrast ist kein Detail, sondern Grundlage
Barrierefreie Farben beginnen mit einer einfachen Frage: Können Menschen deine Inhalte gut erkennen?
Wenn Texte, Buttons, Links oder Formularfelder schlecht sichtbar sind, wird eine Website unnötig schwer nutzbar. Das betrifft Menschen mit Sehbehinderung, ältere Nutzer, mobile Besucher und alle, die nicht unter perfekten Bedingungen surfen.
Kontrast richtig zu prüfen ist deshalb einer der einfachsten und wichtigsten Schritte zu einer besseren Website.
Mein praktischer Rat: Verlasse dich nicht nur auf dein Auge. Nutze Kontrast-Tools, teste echte Website-Bereiche und prüfe besonders die Stellen, an denen Nutzer handeln müssen: Formulare, Buttons, Navigation, Checkout und Buchung.
Barrierefreie Farben machen deine Website nicht weniger schön. Sie machen sie klarer, verständlicher und für mehr Menschen nutzbar.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.