Schöne Farben sind das eine, lesbare Farben das andere. Ein heller Grauton auf weißem Hintergrund mag elegant wirken, ist für viele Menschen aber kaum entzifferbar. Damit Texte für alle gut lesbar bleiben, gibt es klare Regeln zum Farbkontrast. Dieser Artikel erklärt, wie das Kontrastverhältnis berechnet wird, welche Grenzwerte gelten und wie du sie in der Praxis einhältst.
Was Farbkontrast bedeutet
Farbkontrast beschreibt, wie stark sich Vorder- und Hintergrundfarbe in ihrer Helligkeit unterscheiden. Entscheidend ist dabei nicht der Farbton selbst, sondern die relative Leuchtdichte – also wie hell oder dunkel eine Farbe vom menschlichen Auge wahrgenommen wird. Zwei Farben können sich kräftig im Farbton unterscheiden und trotzdem einen schlechten Kontrast haben, wenn sie ähnlich hell sind.
Genau deshalb reicht das bloße Augenmaß oft nicht. Was auf deinem kalibrierten Monitor klar aussieht, kann auf einem günstigen Display oder bei Sonnenlicht verschwinden. Eine objektive Zahl schafft hier Klarheit: das Kontrastverhältnis. Den konkreten Wert für eine Text- und Hintergrundfarbe ermittelst du am schnellsten mit dem Farbkontrast Checker, der die beiden Farben aufnimmt und das Verhältnis direkt ausgibt.
Das WCAG-Kontrastverhältnis
Die Web Content Accessibility Guidelines (WCAG) definieren den Kontrast als Verhältnis zwischen der helleren und der dunkleren Farbe. Es reicht von 1:1 (identische Farben, kein Kontrast) bis 21:1 (reines Schwarz auf reinem Weiß). Je höher die Zahl, desto besser die Lesbarkeit.
Berechnet wird das Verhältnis nach der Formel (L1 + 0,05) / (L2 + 0,05), wobei L1 die Leuchtdichte der helleren und L2 die der dunkleren Farbe ist. Die Leuchtdichte selbst wird aus den Rot-, Grün- und Blauanteilen gewichtet – Grün zählt am stärksten, Blau am schwächsten, weil das Auge so empfindet. Diese Rechnung von Hand zu machen ist mühsam, weshalb sich ein Tool lohnt.
Die Grenzwerte: AA und AAA
Die WCAG kennen zwei Konformitätsstufen mit unterschiedlichen Anforderungen:
- Stufe AA (Minimum): Normaler Text braucht mindestens 4,5:1, großer Text (ab etwa 18,7 px fett oder 24 px normal) mindestens 3:1.
- Stufe AAA (erhöht): Normaler Text mindestens 7:1, großer Text mindestens 4,5:1.
Für die meisten Websites ist AA der praktische Zielwert und in vielen Ländern auch rechtlich relevant – etwa durch die EU-Richtlinie zur Barrierefreiheit und das deutsche Barrierefreiheitsstärkungsgesetz, das ab 2025 viele Anbieter verpflichtet. Auch grafische Elemente und Bedienelemente wie Eingabefelder benötigen mindestens 3:1 gegenüber ihrer Umgebung.
Warum Kontrast so wichtig ist
Guter Kontrast hilft nicht nur Menschen mit Sehbehinderung. Rund jeder zwölfte Mann hat eine Form von Farbsehschwäche, ältere Menschen sehen Kontraste schwächer, und auch Menschen ohne Einschränkung profitieren bei Sonnenlicht, auf Mobilgeräten oder bei Müdigkeit. Ausreichender Kontrast ist damit kein Nischenthema, sondern verbessert die Lesbarkeit für praktisch alle Nutzer.
Ein häufiger Designfehler: hellgraue Platzhaltertexte, dünne Schrift auf farbigem Hintergrund oder Text über Fotos ohne Abdunklung. All das kann den Kontrast unter den kritischen Wert drücken. Bevor ein Farbschema festgezurrt wird, lohnt deshalb ein schneller Check mit dem Farbkontrast Checker.
Kontrast in der Praxis verbessern
Wenn ein Farbpaar durchfällt, gibt es mehrere Wege:
- Text abdunkeln oder Hintergrund aufhellen, bis der Wert die Schwelle überschreitet.
- Schriftgröße oder Schriftstärke erhöhen, um in die mildere Kategorie für großen Text zu fallen.
- Eine Overlay-Schicht über Bilder legen, damit der Text genug Abstand zum Hintergrund behält.
- Nicht allein auf Farbe verlassen: Wichtige Informationen sollten zusätzlich durch Form, Symbol oder Text gekennzeichnet sein.
Passende Werkzeuge im Workflow
Farbkontrast ist Teil eines größeren Themas: ein stimmiges, zugängliches Farbsystem. Wenn du von einer Basisfarbe ausgehst und harmonische Abstufungen brauchst, hilft ein Farbpalette Generator, mit dem du gleich mehrere lesbare Töne ableitest. Weitere Helfer für Design und Frontend findest du gebündelt in den kostenlosen Webtools.
Fazit
Farbkontrast ist messbar – und genau das macht ihn so handhabbar. Wer die WCAG-Schwellen von 4,5:1 für normalen und 3:1 für großen Text kennt, gestaltet Texte, die wirklich jeder lesen kann. Statt zu raten, prüfst du jedes Farbpaar am besten direkt mit dem Farbkontrast Checker und gehst auf Nummer sicher.