Heller, eleganter Text auf einem zarten Pastellhintergrund sieht im Entwurf oft toll aus – und wird auf einem Laptop in der Sonne oder von Menschen mit Sehschwäche schlicht nicht mehr gelesen. Genau hier setzt der Begriff Farbkontrast an. Er ist kein Geschmacksthema, sondern eine messbare Größe, die darüber entscheidet, ob deine Inhalte für alle zugänglich sind. Dieser Artikel erklärt, wie Kontrast berechnet wird, was die WCAG-Stufen AA und AAA bedeuten und wie du sie zuverlässig erreichst.
Was ist Farbkontrast eigentlich?
Der Kontrast beschreibt den Helligkeitsunterschied zwischen zwei Farben – typischerweise Text und Hintergrund. Maßgeblich ist nicht der Farbton selbst, sondern die sogenannte relative Luminanz, also wie hell eine Farbe vom menschlichen Auge wahrgenommen wird. Zwei Farben können sich kräftig unterscheiden (etwa Rot und Grün) und trotzdem einen schlechten Kontrast haben, weil sie ähnlich hell sind.
Das Ergebnis wird als Kontrastverhältnis ausgedrückt, von 1:1 (identische Farben, kein Kontrast) bis 21:1 (reines Schwarz auf reinem Weiß). Je höher der Wert, desto besser lesbar.
Wie wird das Kontrastverhältnis berechnet?
Die Web Content Accessibility Guidelines (WCAG) definieren eine klare Formel. Vereinfacht läuft sie so ab: Für beide Farben wird die relative Luminanz bestimmt, indem die RGB-Werte gamma-korrigiert und gewichtet zusammengezählt werden (Grün zählt am stärksten, weil das Auge dafür am empfindlichsten ist). Anschließend gilt:
Kontrast = (L_hell + 0,05) / (L_dunkel + 0,05)
Dabei ist L_hell die Luminanz der helleren und L_dunkel die der dunkleren Farbe. Das Schöne daran: Du musst diese Formel nicht selbst rechnen. Mit dem Farbkontrast Checker gibst du einfach Text- und Hintergrundfarbe ein und siehst das Verhältnis sofort, inklusive AA- und AAA-Badge. So weißt du in Sekunden, ob deine Farbkombination die Anforderungen erfüllt.
Die WCAG-Stufen AA und AAA
Die WCAG kennt zwei relevante Konformitätsstufen für Kontrast. Welche du erfüllen musst, hängt von der Textgröße und deinem Anspruch ab.
- AA (Mindeststandard): Normaler Text braucht ein Verhältnis von mindestens 4,5:1. Großer Text (ab etwa 18 pt bzw. 14 pt fett) genügt schon mit 3:1. AA ist in vielen Ländern die rechtliche Vorgabe für öffentliche und gewerbliche Websites.
- AAA (erhöht): Hier sind 7:1 für normalen und 4,5:1 für großen Text gefordert. AAA ist anspruchsvoll und nicht für jede gestalterische Situation realistisch, bietet aber maximale Lesbarkeit.
Für die meisten Projekte ist AA das sinnvolle Ziel – es schließt eine breite Nutzergruppe ein, ohne das Design zu stark einzuschränken. AAA lohnt sich besonders bei Fließtext, der lange gelesen wird, etwa in Artikeln oder Dokumentationen.
Warum Kontrast über Ästhetik hinausgeht
Etwa jeder zwölfte Mann und jede zweihundertste Frau hat eine Form von Farbsehschwäche. Dazu kommen Menschen mit altersbedingt nachlassender Sehkraft, grauem Star oder einfach ungünstigen Lichtverhältnissen. Guter Kontrast hilft ihnen allen – und ganz nebenbei auch jedem, der dein Angebot bei Sonnenlicht auf dem Smartphone öffnet. Barrierefreiheit ist hier kein Nischenthema, sondern verbessert die Nutzererfahrung für alle.
Seit der EU-Richtlinie zur Barrierefreiheit (umgesetzt im Barrierefreiheitsstärkungsgesetz) wird ausreichender Kontrast für viele kommerzielle Anbieter zudem zur Pflicht. Es lohnt sich also doppelt, früh im Designprozess darauf zu achten.
Praktische Tipps
- Prüfe Kontraste nicht erst am Ende, sondern schon bei der Festlegung deiner Farbpalette.
- Verlasse dich nicht allein auf Farbe, um Informationen zu vermitteln – ergänze Symbole, Unterstreichungen oder Text.
- Achte auch auf Hover- und Fokuszustände von Buttons und Links, nicht nur auf den Normalzustand.
- Teste graue Texte besonders kritisch: Hellgrau auf Weiß ist der häufigste Kontrastfehler.
Verwandte Werkzeuge
Wenn du eine passende Ausgangsfarbe suchst oder zwischen Formaten wechseln musst, hilft dir der Farb-Konverter, um HEX, RGB und HSL ineinander umzurechnen. Eine komplette Farbreihe baust du mit dem Farbpalette Generator. Weitere Helfer rund um Webdesign findest du in den kotsch.tech Webtools.
Häufige Fragen
Gilt der Kontrast auch für große Überschriften?
Ja, aber mit gelockerten Schwellen. Großer Text (ab 18 pt oder 14 pt fett) muss nur 3:1 für AA bzw. 4,5:1 für AAA erreichen, weil dicke Buchstaben auch bei geringerem Kontrast gut lesbar bleiben.
Brauche ich AAA für meine Website?
In der Regel nicht. AA ist der übliche rechtliche und praktische Mindeststandard. AAA ist ein freiwilliges, höheres Ziel, das du gezielt für besonders leseintensive Bereiche anstreben kannst.
Zählt Kontrast auch für Icons und Grafiken?
Für rein dekorative Elemente nicht, aber für bedeutungstragende grafische Objekte und Bedienelemente verlangt die WCAG 2.1 ein Verhältnis von mindestens 3:1 gegenüber dem Hintergrund.