Kontrastverhältnis mit WCAG-2.2-Ergebnissen AA und AAA für Text und UI Akzeptiert HEX, RGB, HSL, OKLCH und CSS-Farbnamen, dazu Farbwähler Transparente Farben werden wie im Browser gemischt Live-Vorschau mit Überschrift, Fließtext, Kleingedrucktem und Button Schlägt die nächstgelegene bestehende Farbe vor, nur die Helligkeit ändert sich

Farbkontrast-Checker - WCAG-AA- und AAA-Barrierefreiheitstest

Was ist Farbkontrast und warum ist er wichtig?

Das Kontrastverhältnis misst den Unterschied der wahrgenommenen Helligkeit zweier Farben, von 1:1 (gleich) bis 21:1 (Schwarz auf Weiß). Die WCAG 2.2 verlangen auf Stufe AA mindestens 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente, auf Stufe AAA 7:1 bzw. 4,5:1. Etwa jeder zwölfte Mann hat eine Farbsehschwäche und viele lesen am Handy in praller Sonne, kontrastarmer Text schließt also echte Nutzer aus. Gesetze wie der European Accessibility Act oder das BFSG verweisen auf WCAG AA, wodurch Kontrast für viele Websites zur Pflicht wird.

Funktionen

• Kontrastverhältnis mit WCAG-2.2-Ergebnissen AA und AAA für Text und UI
• Akzeptiert HEX, RGB, HSL, OKLCH und CSS-Farbnamen, dazu Farbwähler
• Transparente Farben werden wie im Browser gemischt
• Live-Vorschau mit Überschrift, Fließtext, Kleingedrucktem und Button
• Schlägt die nächstgelegene bestehende Farbe vor, nur die Helligkeit ändert sich

Sofort und privat

Alle Berechnungen laufen im Browser. Farben unveröffentlichter Designs werden nirgendwohin gesendet.

WCAG-2.2-Formel, 100 % clientseitig.

So verwenden Sie: Kontrast-Checker

1
Gib Text- und Hintergrundfarbe ein, als beliebige CSS-Farbe (#1e293b, rgb(), hsl(), oklch() oder Name) oder über die Farbwähler.
2
Lies das Kontrastverhältnis. Das Ergebnis wird abgeschnitten, nicht aufgerundet, 4,49:1 erscheint also nie als bestanden.
3
Prüfe die fünf WCAG-Ergebnisse: AA und AAA für normalen und großen Text sowie 3:1 für UI-Elemente wie Eingaberahmen, Icons und Fokusringe.
4
Fällt ein Test durch, nimm die vorgeschlagene Farbe mit gleichem Farbton und angepasster Helligkeit per Übernehmen, oder tausche die Farben für die Umkehrung.

Praxisbeispiele

Grauer Platzhaltertext

Tailwind gray-400 (#9ca3af) auf Weiß kommt nur auf 2,5:1 und fällt bei AA durch. gray-500 (#6b7280) erreicht 4,8:1 und taugt für Fließtext.

Markenfarbe auf Buttons

Ein helles Markenblau kann für große Button-Beschriftungen (3:1) reichen, für kleinen Text aber nicht. Prüfe beides oder dunkle den Button ab, bis weißer Text 4,5:1 erreicht.

Dark-Mode-Paletten

Reines Weiß auf reinem Schwarz (21:1) wirkt grell. Teste weichere Paare wie #e2e8f0 auf #0f172a, die mit etwa 14:1 immer noch AAA übertreffen.

Formularrahmen und Icons

WCAG 1.4.11 verlangt 3:1 für Eingaberahmen und bedeutungstragende Icons. Ein #e5e7eb-Rahmen auf Weiß liegt weit darunter, Felder sind schwer zu finden.

Häufige Fragen

Was gilt als großer Text?+

Laut WCAG mindestens 18 pt (24px) normal oder 14 pt (etwa 18,66px) fett. Großer Text braucht auf Stufe AA nur 3:1, weil dicke Striche leichter lesbar sind.

Brauche ich AA oder AAA?+

AA ist das übliche rechtliche Ziel für die meisten Websites und Apps. AAA ist strenger und empfehlenswert für lange Texte, Behördenangebote und Menschen mit Sehschwäche.

Gilt Kontrast für Logos und deaktivierte Buttons?+

Nein. WCAG nimmt Logos, Dekorbilder und inaktive (disabled) Bedienelemente aus. Platzhaltertext, Links und Fokusanzeigen gehören dazu.

Was ist mit APCA und WCAG 3?+

APCA ist ein neueres Kontrastmodell für das künftige WCAG 3. Es ist noch ein Entwurf, daher bleiben die WCAG-2.2-Verhältnisse die Anforderung in Gesetzen und Audits.