WCAG Contrast Checker
Understand WCAG Contrast Checker
Berechnet das Kontrastverhältnis zwischen einer Textfarbe und einer Hintergrundfarbe und meldet, ob es WCAG AA und AAA erfüllt.
How it works
Jede Farbe wird zuerst in relative Leuchtdichte umgerechnet. Die drei Kanäle werden auf 0–1 normiert und linearisiert – unterhalb der Schwelle 0,03928 durch 12,92 geteilt, andernfalls über ((c + 0,055) / 1,055)^2,4 – und dann mit 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau gewichtet, weil das Auge für Grün weit empfindlicher ist als für Blau. Das Verhältnis ist (L_heller + 0,05) / (L_dunkler + 0,05) und reicht von 1:1 bei identischen Farben bis 21:1 bei Schwarz auf Weiß. Der Term 0,05 steht für das Streulicht des Bildschirms und verhindert, dass die Formel bei reinem Schwarz durch null teilt.
When to use it
- Fließtext gegen seinen Hintergrund prüfen, bevor eine Farbe im Designsystem festgelegt wird
- Das dunkelste Grau finden, das auf Weiß noch besteht – #767676 liegt bei rund 4,54:1, und einen Ton heller fällt es durch AA
- Platzhaltertext, deaktivierte Zustände und Hilfetexte prüfen, wo sich Kontrastmängel meist verstecken
- Belege für eine Barrierefreiheitsprüfung nach WCAG 2.1, EN 301 549 oder Section 508 liefern
Watch out for
- Die Schwelle hängt vom Text ab, nicht von der Farbe. AA verlangt 4,5:1 für Fließtext, aber nur 3:1 für großen Text – 18pt (24px) oder 14pt (18,66px) in Fettschrift. Das Tool zeigt beides; Sie entscheiden, was gilt.
- Nicht-textliche Elemente haben ihre eigene Regel. Symbole, Fokusringe, Rahmen von Eingabefeldern und Diagrammsegmente brauchen nach WCAG 1.4.11 ein Verhältnis von 3:1, was leicht übersehen wird, wenn man nur Absätze prüft.
- Halbtransparente Farben lassen sich nicht direkt messen. Eine Farbe mit Alphakanal muss zuerst mit dem verrechnet werden, was tatsächlich dahinterliegt, und das Ergebnis hängt von diesem Hintergrund ab.
- Text über einem Foto oder einem Verlauf hat kein einzelnes Verhältnis. Prüfen Sie den ungünstigsten Bereich oder legen Sie eine deckende Abdunklung hinter den Text.
Not the right tool for: Zu belegen, dass eine Palette für Menschen mit Farbfehlsichtigkeit nutzbar ist. Das Kontrastverhältnis ist ein Maß für Leuchtdichte – zwei Farben können 7:1 erreichen und für eine deuteranope Person dennoch nicht unterscheidbar sein, kodieren Sie Bedeutung also niemals allein über den Farbton.
Frequently Asked Questions
Wie prüft man den Farbkontrast auf Barrierefreiheit?
Geben Sie Ihre Vordergrundfarbe (Text) und die Hintergrundfarbe als HEX oder RGB ein. Das Tool berechnet das Kontrastverhältnis mit der Formel für relative Leuchtdichte aus WCAG 2.1 und zeigt bestanden oder nicht bestanden für AA (4,5:1 bei normalem Text) und AAA (7:1). Passen Sie die Farben an, bis Sie bestehen.
Warum ist Farbkontrast für Barrierefreiheit wichtig?
Geringer Kontrast macht Text schwer lesbar für Menschen mit Sehbeeinträchtigung oder Farbfehlsichtigkeit sowie in heller Umgebung. Rund 8 % der Männer haben eine Form der Farbfehlsichtigkeit. Die Kontrastanforderungen der WCAG sorgen dafür, dass Inhalte über diese große Bandbreite an Sehfähigkeiten und Bedingungen hinweg lesbar bleiben.
Welches Kontrastverhältnis verlangt WCAG AA mindestens?
WCAG 2.1 AA verlangt 4,5:1 für normalen Text (unter 18pt oder 14pt fett) und 3:1 für großen Text (ab 18pt oder ab 14pt fett). Nicht-textliche UI-Bestandteile (Symbole, Rahmen von Eingabefeldern) brauchen 3:1. Stufe AAA hebt das auf 7:1 und 4,5:1 an. Die meisten gesetzlichen Standards zur Barrierefreiheit verlangen AA.
How to Use WCAG Contrast Checker
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.