So nutzt du: Kontrast-Checker
- Gib die Textfarbe und die Hintergrundfarbe ein (HEX, rgb(), hsl(), oklch() oder ein CSS-Name) oder nutze die Farbauswahl.
- Lies das Kontrastverhältnis und die AA/AAA-Ergebnisse für normalen Text, großen Text und UI-Komponenten ab.
- Prüfe die Live-Vorschau: Überschriften, Fließtext, Kleingedrucktes, einen Button und einen Eingabefeld-Rahmen.
- Wenn eine Stufe nicht erreicht wird, klicke bei der nächsten passenden Farbe auf Verwenden, und kopiere dann den neuen HEX-Wert in dein CSS.
Was ist ein Farbkontrastverhältnis?
Das Kontrastverhältnis vergleicht die relative Luminanz zweier Farben auf einer Skala von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß). Die Web Content Accessibility Guidelines (WCAG) nutzen es, um festzulegen, ob Text für Menschen mit eingeschränktem Sehvermögen oder Farbfehlsichtigkeit lesbar ist, und auch für alle, die ihr Smartphone bei hellem Licht nutzen. Außerdem ist es ein rechtlicher Maßstab: Barrierefreiheitsgesetze wie der European Accessibility Act und der ADA werden üblicherweise anhand der WCAG 2.x Stufe AA bewertet.
Kontrastanforderungen nach WCAG 2.2
| Kriterium | Stufe | Normaler Text | Großer Text |
|---|---|---|---|
| 1.4.3 Kontrast (Minimum) | AA | 4,5:1 | 3:1 |
| 1.4.6 Kontrast (verbessert) | AAA | 7:1 | 4,5:1 |
| 1.4.11 Kontrast Nicht-Text | AA | 3:1 für Ränder von UI-Komponenten, Fokus-Indikatoren und aussagekräftige Icons/Grafiken | |
Großer Text bedeutet mindestens 18 pt (24 px) regulär oder 14 pt (≈18,66 px) fett. Logos, rein dekorativer Text und der Text deaktivierter Bedienelemente sind ausgenommen.
So wird das Verhältnis berechnet
Jeder sRGB-Kanal wird linearisiert (Werte ≤ 0,04045 werden durch 12,92 geteilt, alle anderen nutzen ((c + 0,055) / 1,055)2,4) und anschließend zur relativen Luminanz kombiniert: L = 0,2126 R + 0,7152 G + 0,0722 B. Das Verhältnis ist (Lheller + 0,05) / (Ldunkler + 0,05). Die Grenzwerte sind streng: #777777 auf Weiß ergibt 4,47:1 und fällt bei AA durch, während #767676 mit 4,54:1 besteht. Deshalb schneidet dieser Checker das angezeigte Verhältnis ab, statt es zu runden. Halbtransparenter Text wird zuerst mit dem Hintergrund vermischt, genau so, wie der Browser ihn darstellt.
Was ist APCA?
Der Accessible Perceptual Contrast Algorithm (APCA) ist die Kandidatenmethode für den Kontrast in der zukünftigen WCAG 3. Er liefert einen Helligkeitskontrastwert Lc von etwa 0 bis 106 (negativ bei hellem Text auf dunklem Hintergrund) und berücksichtigt die Polarität: Helle Schrift auf dunklem Grund und dunkle Schrift auf hellem Grund werden nicht gleich wahrgenommen. Als Richtwert gilt: Lc 90 wird für Fließtext bevorzugt, Lc 75 ist das Minimum für Fließtext und Lc 60 für sonstigen Inhaltstext. APCA ist noch ein Entwurf. Für die Konformität solltest du daher heute die WCAG 2.x erfüllen und APCA als zweite Meinung nutzen, besonders bei dunklen Themes.
Ein fehlschlagendes Paar korrigieren
Die Vorschlagstabelle sucht die nächstgelegene Farbe, die besteht, indem sie nur die HSL-Helligkeit von Text oder Hintergrund verändert. So bleibt dein Markenfarbton erhalten. Für dunklere oder hellere Varianten einer Markenfarbe erstellst du mit dem Color Converter eine komplette Tint- und Shade-Skala und testest die Paare hier. In Webflow simuliert die Vision-Vorschau im Designer Farbfehlsichtigkeiten, zeigt aber kein Verhältnis an. Prüfe deshalb die exakten Werte hier, bevor du veröffentlichst.
Auch gesucht als: wcag kontrast, kontrastverhältnis, farbkontrast prüfen, barrierefreiheit farben, a11y kontrast, apca kontrast, textkontrast prüfen, wcag farbkontrast.
Passende Tools zu: Kontrast-Checker
- CSS Verlauf Generator — Gestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten.
- Alt-Text-Checker — Prüfe alle Bilder einer Seite in einer Tabelle: Alt-Text-Status, Dateigröße, width/height-Attribute, Format und Lazy Loading – mit Filtern und CSV-Export.
- Box-Shadow-Generator — Stapel mehrere Schatten-Ebenen, passe Versatz, Weichzeichnung, Ausbreitung und Deckkraft auf einer Live-Karte an und kopiere das CSS für box-shadow oder text-shadow.
- HEX zu RGBA Konverter — Füge einen HEX-Code ein, zieh den Deckkraft-Regler und kopiere das genaue CSS, das du brauchst: klassisches rgba(), modernes rgb( / alpha) oder 8-stelliges HEX.