Hellgraue Schrift auf weißem Grund wirkt edel und aufgeräumt. Auf vielen Designs sieht das gut aus. Nur lesen können es manche Besucher kaum noch.
Farbkontrast ist eine messbare Größe. Wie gut sich Schrift vom Hintergrund abhebt, lässt sich in einer einzigen Zahl ausdrücken. Lesbarkeit ist dabei das erste der vier POUR-Prinzipien, an denen sich Barrierefreiheit insgesamt ausrichtet. Diese Zahl sagt Dir schon vor der Veröffentlichung, ob ein Text für alle lesbar bleibt.
Das Schöne daran: Du musst kein Designer werden, um den Unterschied zu sehen. Ein geprüfter Wert pro Farbpaar reicht, und Du weißt, woran Du bist.
Warum Kontrast über Lesbarkeit entscheidet
Wer perfekt sieht und auf einem guten Monitor sitzt, bemerkt schwachen Kontrast oft gar nicht. Genau das ist die Falle: Du beurteilst Dein Design unter Idealbedingungen, Deine Besucher tun das selten.
Viele Menschen sehen kontrastarme Schrift nur schwer. Eine Sehschwäche, eine Rot-Grün-Schwäche oder einfach das Älterwerden senken die Wahrnehmung feiner Helligkeitsunterschiede. Schon ab vierzig lässt die Kontrastempfindlichkeit messbar nach.
Dazu kommen die Bedingungen draußen. Ein Handy in der Sonne, ein billiges Display, ein hochgedrehter Energiesparmodus: All das frisst Kontrast. Eine Schrift, die im Büro gerade noch geht, verschwindet auf dem Bürgersteig komplett. Guter Kontrast hilft also allen, nicht bloß einer Randgruppe.
Genau deshalb lohnt sich der Blick über das eigene Gerät hinaus. Was auf Deinem kalibrierten Monitor sauber aussieht, kann auf dem Smartphone eines Kunden bereits an der Grenze liegen. Visuelle Wahrnehmung hat noch eine zweite Seite: Wie Du mit Bewegung und Animation umgehst, entscheidet ebenso über die Zugänglichkeit.
Was die Kontrast-Zahl bedeutet
Hinter dem Kontrast steckt ein einfaches Verhältnis: die Helligkeit der Schrift im Vergleich zur Helligkeit des Hintergrunds. Schwarz auf Weiß erreicht den Höchstwert von 21:1. Je näher sich zwei Farben in der Helligkeit kommen, desto kleiner wird die Zahl und desto schwerer die Lesbarkeit.
Du musst diese Zahl nie selbst ausrechnen, ein Tool nimmt Dir das ab. Wichtig ist, dass Du die Richtwerte kennst und sie als Bestellgröße an Deine Agentur weitergeben kannst. Wie sie ins größere Bild passen, ordnen die Grundlagen der Barrierefreiheit ein. Über das BFSG sind sie zugleich die rechtliche Pflicht für viele Webseiten:
- 4,5:1 für normalen Text: der Richtwert für Fließtext und kleine Schriftgrößen.
- 3:1 für große Schrift: ab etwa 24 Pixeln, oder ab 19 Pixeln bei fetter Schrift.
- 3:1 für Bedienelemente: Button-Ränder, Icons, Eingabefelder und Fokus-Markierungen.
Das Prinzip dahinter merkst Du Dir in einem Satz: Fließtext braucht mehr Kontrast als eine große Überschrift, und Bedienelemente dürfen nicht im Hintergrund verschwimmen. Kontrast ist dabei nur die halbe Miete, denn Lesbarkeit entsteht erst, wenn auch lesbare Schrift in der richtigen Größe und mit genug Zeilenabstand dazukommt.
Kontraste prüfen ohne Spezialwissen
Du brauchst kein teures Programm, um Kontrast zu messen. Zwei kostenlose Wege reichen für den Alltag völlig aus, und beide liefern Dir die Zahl per Knopfdruck.
Ein Online-Kontrast-Checker: Auf Seiten wie dem WebAIM Contrast Checker wählst Du die beiden Farben aus, also Schrift und Hintergrund. Sofort siehst Du das Verhältnis und ob es den Richtwert von 4,5:1 erreicht. Welche Farben Deine Seite verwendet, weiß Deine Agentur oder Dein Design-Programm.
Die Prüf-Werkzeuge im Browser: Chrome und Firefox zeigen den Kontrast direkt am Element an. Du klickst mit der rechten Maustaste auf einen Text, wählst „Untersuchen" und findest die Bewertung mit einem Häkchen oder einem Warnsymbol. So prüfst Du Deine echte Seite, nicht nur isolierte Farben.
Noch bequemer geht es mit einem Prüf-Dienst wie WAVE: Du gibst die Adresse Deiner Seite ein und bekommst alle Kontrast-Probleme auf einen Blick markiert. Mach den Test früh. Kontrast nachträglich zu reparieren bedeutet, ein fertiges Design wieder aufzureißen. Beim ersten Farbentwurf kostet die Prüfung Minuten.
Prüfe dabei jeden Zustand, nicht nur den Ruhezustand. Ein Link ändert beim Überfahren die Farbe, ein Button hat einen aktiven und einen abgeschalteten Stil. Gerade ausgegraute Elemente fallen oft unter den Richtwert, obwohl sie erkennbar bleiben müssen.
Die vier häufigsten Kontrast-Fehler
In der Praxis tauchen dieselben Stolpersteine immer wieder auf. Wer sie kennt, vermeidet die meisten Probleme schon im Entwurf.
Hellgraue Schrift auf Weiß. Der häufigste Fehler, weil zartes Grau modern wirkt. Sobald die Schrift heller als ein kräftiges Mittelgrau wird, fällt sie unter den Richtwert. Ein dunkleres Grau erzielt fast denselben Effekt und bleibt trotzdem lesbar.
Text direkt auf Bildern. Ein Foto hat helle und dunkle Stellen, der Kontrast schwankt über die Fläche. Weiße Schrift verschwindet im hellen Himmel. Eine halbtransparente Abdunklung hinter dem Text oder ein Schatten löst das zuverlässig.
Blasse Platzhalter in Formularen. Der graue Hinweistext in Eingabefeldern ist oft so hell, dass er kaum lesbar ist. Er zählt trotzdem als Text und muss den Richtwert erreichen. Wichtige Hinweise gehören ohnehin als sichtbares Label über das Feld, nicht nur in den Platzhalter.
Farbe als einzige Information. Ein roter Rahmen für „Fehler" hilft niemandem, der Rot nicht von Grün unterscheidet. Ergänze die Farbe immer um ein zweites Signal: ein Symbol, einen Text oder eine Linienform. Warum Farbe allein nie die Information tragen darf, zeigt ein eigener Beitrag. Genau hier hilft es, wenn Du Inhalte zusätzlich verständlich und klar formulierst.
Fazit
Farbkontrast ist Teil sauberer Gestaltung, kein nachträglicher Kompromiss. Ein einziger geprüfter Wert pro Farbpaar trennt eine Seite, die jeder liest, von einer, die viele anstrengt.
Der Aufwand ist gering. Zwei kostenlose Werkzeuge, vier bekannte Fehlerquellen, und der größte Teil ist erledigt. Lesbarkeit zahlt sich doppelt aus, denn klare Seiten halten Besucher länger und stärken Dich auch, wenn Du für Suchmaschinen optimierst.
Nimm Dir beim nächsten Design-Entwurf die zwei Minuten für den Kontrast-Check. Es ist die billigste Verbesserung, die Du Deiner Webseite geben kannst.