Farbkontrast-Checker — WCAG-AA/AAA-Kontrastverhältnis und APCA
Prüfe Text- und Hintergrundfarben nach WCAG 2.x AA und AAA, sieh den APCA-Lc-Wert und erhalte die nächstgelegene Farbe, die besteht.
Großer Text, 24px (18pt) normal
Großer fetter Text, 18,67px (14pt) fett
Normaler Fließtext mit 16px. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Lange Absätze brauchen mehr Kontrast als Überschriften, weil dünne Striche in kleinen Größen verschwimmen.
Kleingedrucktes mit 13px, die Größe von Bildunterschriften und Fußzeilen.
Nächstgelegene Farben, die bestehen
Nur die Helligkeit ändert sich (in OKLCH), der Farbton bleibt also gleich. Übernimm eine oder kopiere sie.
#7676764.54:1#0606064.52:1#5959597.00:1Wird in deinem Browser berechnet. Nichts, was du eingibst, wird an uns gesendet oder gespeichert. Alle kostenlosen Tools ansehen.
Ein Problem gefunden oder etwas, das besser sein könnte? Wir lesen jede Nachricht und beheben Fehler schnell.
Dieser kostenlose Farbkontrast-Checker sagt dir, ob Text auf seinem Hintergrund nach WCAG 2.x lesbar ist – dem Standard hinter dem ADA, dem European Accessibility Act und den meisten Barrierefreiheitsprüfungen. Gib eine Textfarbe und eine Hintergrundfarbe ein, per Farbwähler, HEX-Code oder Bildschirmpipette, und er zeigt das Kontrastverhältnis mit Bestanden oder Nicht bestanden für AA und AAA bei normaler und großer Schrift sowie für UI-Komponenten wie Button-Rahmen und Icons.
Fällt ein Paar durch, schlägt der Checker die nächstgelegene Text- oder Hintergrundfarbe vor, die besteht, indem er in OKLCH nur die Helligkeit anpasst – dein Markenfarbton bleibt also gleich. Er zeigt außerdem den APCA-Lc-Wert, die neuere Methode aus dem WCAG-3-Arbeitsentwurf, die abbildet, wie Kontrast tatsächlich wahrgenommen wird, und Dark Mode sowie dünne Schriften besser beurteilt. WCAG 3 ist noch kein Standard; für die Konformität zählt daher das WCAG-2.x-Verhältnis, und die Seite erklärt, wo die beiden voneinander abweichen.
So funktioniert’s
- Gib die Textfarbe und die Hintergrundfarbe ein: über die Farbwähler, als HEX-Code (#777 oder #777777) oder per Klick auf das Augen-Symbol, um ein beliebiges Pixel auf dem Bildschirm aufzunehmen (Chrome und Edge).
- Lies das Kontrastverhältnis und die fünf Bewertungen ab. Fließtext braucht AA normal (4,5:1); Überschriften mit 24px oder 18,66px fett brauchen AA groß (3:1).
- Schau in der Vorschau, wie das Paar in Fließtext-, Groß- und Bildunterschriftgröße tatsächlich aussieht.
- Fällt eine Prüfung durch, übernimm eine vorgeschlagene Farbe aus Nächste bestehende Farben; dabei ändert sich nur die Helligkeit.
- Teste mit Tauschen die Umkehrung (zum Beispiel eine Dark-Mode-Variante) und kopiere dann das Ergebnis oder das CSS.
Häufige Fragen
Welches Kontrastverhältnis verlangt WCAG?
WCAG 2.1 und 2.2 verlangen auf Stufe AA mindestens 4,5:1 für normalen Text und 3:1 für großen Text (Erfolgskriterium 1.4.3) sowie 3:1 für Bedienelemente und bedeutungstragende Grafiken wie Eingaberahmen, Fokusringe und Icons (1.4.11). Stufe AAA hebt die Werte für Text auf 7:1 für normalen und 4,5:1 für großen Text an (1.4.6). Logos sowie rein dekorative oder deaktivierte Elemente sind ausgenommen.
Was gilt in WCAG als großer Text?
Mindestens 18 Punkt normal oder 14 Punkt fett. In CSS-Pixeln sind das 24px normal oder etwa 18,66px fett, weil ein Punkt 1,333 Pixel entspricht. Eine 16px große fette Überschrift ist kein großer Text, 20px normal ebenfalls nicht. Dünne oder dekorative Schriften können in der Praxis selbst in diesen Größen zu schwach sein – eines der Probleme, die APCA angehen soll.
Ist #777777 auf Weiß barrierefrei?
Nicht für Fließtext. #777777 auf #ffffff hat ein Kontrastverhältnis von 4,48:1, knapp unter der AA-Schwelle von 4,5:1; es fällt also bei AA für normalen Text durch und besteht nur für großen Text und UI-Komponenten. WCAG erlaubt kein Aufrunden, 4,48 ist also nicht bestanden. Das hellste Grau, das auf Weiß AA besteht, ist #767676 (4,54:1); für AAA #595959 (7,00:1).
Was ist APCA, und sollte ich es statt WCAG 2 verwenden?
APCA (Accessible Perceptual Contrast Algorithm) ist die für WCAG 3 vorgeschlagene Kontrastmethode. Statt eines Verhältnisses liefert sie einen Helligkeitskontrastwert Lc von etwa -108 bis 106, wobei das Vorzeichen die Polarität angibt (negativ heißt heller Text auf dunklem Hintergrund). Sie berücksichtigt, dass dasselbe Verhältnis je nach Polarität und Dunkelheit der Farben unterschiedlich gut lesbar ist – deshalb überbewertet WCAG 2 Dunkel-auf-dunkel-Paare und unterbewertet manche Weiß-auf-Farbe-Kombinationen. Nutze APCA für bessere Designentscheidungen, gib für die Konformität aber WCAG 2.x an: WCAG 3 ist ein Arbeitsentwurf, und seine Kontrastmethode kann sich noch ändern.
Wie wird das Kontrastverhältnis berechnet?
Die relative Leuchtdichte jeder Farbe wird berechnet, indem ihre sRGB-Kanäle in lineares Licht umgerechnet und mit 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau gewichtet werden – der Empfindlichkeit des Auges für jede Farbe. Das Verhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist. Es reicht von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß). Der Term 0,05 bildet Umgebungslicht ab, das vom Bildschirm reflektiert wird.
Wie korrigiere ich eine Farbe, die beim Kontrast durchfällt?
Ändere die Helligkeit, nicht den Farbton. Dunkle den Text ab oder hell den Hintergrund auf (im Dark Mode umgekehrt), bis das Verhältnis besteht. Die Vorschläge auf dieser Seite tun genau das im OKLCH-Farbraum, sodass aus einem durchgefallenen Markenblau ein dunkleres Blau wird statt einer anderen Farbe. Kann keine der beiden Richtungen das Ziel erreichen – das passiert, wenn die andere Farbe ein mittlerer Ton ist –, ändere stattdessen die andere Farbe: Mittelgraue Hintergründe erreichen mit keiner Textfarbe 7:1.
WCAG-2.x-Kontrastanforderungen auf einen Blick
• Normaler Text, AA (1.4.3): 4,5:1. Gilt für Fließtext, Beschriftungen, Links, Platzhaltertext, der Informationen vermittelt, und Text in Bildern.
• Großer Text, AA (1.4.3): 3:1. Text mit mindestens 24px normal oder 18,66px fett.
• UI-Komponenten und Grafiken, AA (1.4.11): 3:1 gegenüber angrenzenden Farben. Eingaberahmen, Checkbox-Konturen, Fokusindikatoren, bedeutungstragende Icons, Diagrammlinien.
• Normaler Text, AAA (1.4.6): 7:1. Großer Text, AAA: 4,5:1. Nur wenige Websites erfüllen AAA überall; anstrebenswert ist es bei langen Lesetexten und für ältere Zielgruppen.
• Ausgenommen: Logos und Markennamen, deaktivierte Bedienelemente, rein dekorative Elemente und beiläufiger Text (zum Beispiel als Teil eines Fotos).
Zwei Fehler tauchen in fast jedem Audit auf. Platzhaltertext in Formularfeldern ist meist hellgrau und verfehlt 4,5:1, und da er oft die einzige Beschriftung ist, zählt er. Und Buttons in Markenfarbe mit weißem Text landen oft zwischen 3 und 4,5 und bestehen damit nur für großen Text, während die Button-Beschriftung 14 oder 16px groß ist.
Wo WCAG 2 und APCA voneinander abweichen
Die WCAG-2-Formel behandelt Kontrast als symmetrisch und linear in der Leuchtdichte – so funktioniert Sehen aber nicht. Zwei Folgen zeigen sich in der Praxis ständig.
Dark Mode: Hellgrauer Text auf fast schwarzem Hintergrund besteht WCAG 2 oft bequem, wirkt aber grell oder verschwommen, während manche mitteldunklen Paare bestehen und schwer zu lesen sind. APCA behandelt Hell-auf-dunkel separat (ein negativer Lc-Wert) und ist am dunklen Ende strenger.
Gesättigte Farben: Weißer Text auf Orange (#ff7a00) liegt nach WCAG 2 bei etwa 2,6:1 und fällt durch, schwarzer Text auf demselben Orange besteht – dabei empfinden viele Leser die weiße Variante als genauso gut lesbar. APCA bewertet solche Fälle näher an der Wahrnehmung.
APCA-Stufen als Faustregel: Lc 90 ist für Fließtext empfohlen, Lc 75 das Minimum für Fließtext, Lc 60 für anderen Inhaltstext, Lc 45 für große Überschriften, Lc 30 für Platzhalter- und deaktivierten Text und Lc 15 für Nicht-Text-Elemente wie Trennlinien. Die vollständigen Empfehlungen hängen außerdem von Schriftstärke und -größe ab. Betrachte APCA als Designhilfe neben WCAG 2, nicht als Ersatz für eine Konformitätsprüfung.
Ähnliche kostenlose Tools
- Farbpaletten-Generator — Drück die Leertaste für eine neue Palette, fixiere die Farben, die dir gefallen, wähle eine Harmonie oder hol dir die Palette aus einem Foto. Export als CSS, Tailwind, SCSS, JSON oder PNG.
- Farbwähler & Konverter — Nimm eine beliebige Farbe von irgendwo auf deinem Bildschirm auf oder rechne sofort zwischen HEX, RGB und HSL um.
- CSS-Gradient-Generator — Erstelle lineare, radiale und konische Farbverläufe mit verschiebbaren Farbstopps, Winkelrad und Vorlagen. Kopiere das CSS oder eine Tailwind-Klasse.
- Box-Shadow-Generator — Gestalte mehrschichtige box-shadow- und text-shadow-Effekte mit Live-Vorschau und Vorlagen für Elevation, Neumorphismus und Glow, und kopiere das CSS.