# Farbkontrast: WCAG-Kontrastverhältnis einfach erklärt Source: https://allyway.ai/de/glossary/farbkontrast Farbkontrast ist der Helligkeitsunterschied zwischen Text oder Bedienelementen und ihrem Hintergrund, angegeben als Verhältnis von 1:1 bis 21:1. Die WCAG verlangen mindestens 4,5:1 für normalen und 3:1 für großen Text. Farbkontrast beschreibt, wie stark sich Text und Bedienelemente von ihrem Hintergrund abheben. Die WCAG messen ihn als Kontrastverhältnis von 1:1 (kein Unterschied, etwa Weiß auf Weiß) bis 21:1 (Schwarz auf Weiß). Je höher der Wert, desto leichter ist der Text zu lesen. ## Was es bedeutet Zu geringer Kontrast gehört zu den häufigsten Barrierefreiheitsfehlern im Web. Hellgrauer Text auf weißem Grund wirkt auf einem hochwertigen Bildschirm vielleicht elegant. Auf einem günstigen Laptop, in der Sonne oder für Menschen mit Sehschwäche ist er aber kaum oder gar nicht lesbar. [WCAG 1.4.3 Kontrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) ist eine Anforderung der Stufe AA von [WCAG 2.2](https://allyway.ai/de/regulations/wcag-2-2) – genau die Stufe, die Gesetze wie der [European Accessibility Act](https://allyway.ai/de/regulations/eaa) über die [EN 301 549](https://allyway.ai/de/regulations/en-301-549) verlangen. Sie legt diese Mindestwerte fest: | Was | Mindestverhältnis | |---|---| | **Normaler Text** | 4,5:1 | | **Großer Text** – ab 24 px oder ab 18,66 px fett | 3:1 | | **Logos und Markennamen** | Keine Vorgabe | | **Deaktivierte Buttons und rein dekorativer Text** | Keine Vorgabe | Die strengere Stufe AAA (WCAG 1.4.6) verlangt 7:1 für normalen und 4,5:1 für großen Text. Für Icons, Rahmen von Formularfeldern und Fokus-Markierungen schreibt WCAG 1.4.11 mindestens 3:1 gegenüber den angrenzenden Farben vor. > **Note:** > **Entscheidend ist die Helligkeit, nicht der Farbton** > Rot und Grün sehen sehr unterschiedlich aus, können aber fast gleich hell sein – und damit ein sehr niedriges Kontrastverhältnis haben. Messen Sie deshalb immer, statt sich auf Ihr Auge zu verlassen. ## Praxisbeispiele Ein typischer Grenzfall: `#767676` auf Weiß erreicht 4,54:1 und besteht. Das etwas hellere `#777777` kommt nur auf 4,48:1 und fällt durch. ```html title="Beispiel"

Gratis Versand ab 50 €

Gratis Versand ab 50 €

``` **Do:** Do Dunkelgrauer Fließtext (`#333333` auf Weiß, 12,6:1) und Platzhaltertext, der ebenfalls 4,5:1 erreicht. Bei Text auf Fotos eine dunkle Fläche hinter den Text legen. **Don't:** Don't Hellgrauer Platzhaltertext, weißer Text direkt auf einem hellen Foto oder Markenfarben für kleinen Text, ohne das Verhältnis vorher zu prüfen. ## So prüfen Sie den Farbkontrast 1. **Jedes Farbpaar messen** – Text- und Hintergrundfarbe in einen Kontrastchecker eingeben. 2. **Alle Zustände prüfen** – auch Hover, Fokus, Fehlermeldungen und Platzhaltertext zählen. 3. **Text auf Bildern prüfen** – gegen die hellste Stelle des Bildes hinter dem Text messen. 4. **An der Quelle korrigieren** – Farben im Designsystem oder in den CSS-Variablen ändern, dann profitieren alle Seiten auf einmal. ## Häufige Fragen Q: Welches Kontrastverhältnis fordern die WCAG? A: Auf Stufe AA braucht normaler Text mindestens 4,5:1, großer Text (ab 24 px oder 18,66 px fett) mindestens 3:1. Icons, Rahmen von Eingabefeldern und Fokus-Markierungen brauchen 3:1. Q: Braucht Platzhaltertext genug Kontrast? A: Ja. Platzhaltertext ist Text und muss daher 4,5:1 erreichen. Viele Standard-Styles von Browsern und Themes erfüllen das nicht. Q: Müssen Logos die Kontrastvorgaben erfüllen? A: Nein. Text, der Teil eines Logos oder Markennamens ist, ist von WCAG 1.4.3 ausgenommen. Q: Wie prüfe ich die Farben meiner Website am schnellsten? A: Geben Sie Text- und Hintergrundfarbe in den [kostenlosen allyWay-Kontrastchecker](https://allyway.ai/de/free-wcag-contrast-checker) ein. Sie sehen sofort das Verhältnis und ob es AA und AAA besteht. Um kontrastarmen Text auf Ihrer Startseite zu finden, nutzen Sie den [kostenlosen WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites). Q: Kann allyWay Kontrastprobleme automatisch beheben? A: Ja. allyWay findet Text mit zu geringem Kontrast und [korrigiert die Farben automatisch](https://allyway.ai/de/automatic-accessibility-fixes-for-website) – passend zu Ihrem Markenstil. Da Farben eine sichtbare Änderung sind, gehen die Korrekturen erst nach Ihrer Freigabe live – Ihr Code oder Theme muss dafür nicht angepasst werden. [Kostenlos starten](https://app.allyway.ai/register) und sehen, welche Kontrastprobleme allyWay auf Ihrer Website beheben kann.