Farbkontrast-Checker
Prüfe Text- und Hintergrundfarben gegen WCAG 2.2 AA und AAA – mit Live-Vorschau, sofortigen Bestanden/Durchgefallen-Badges, Korrekturvorschlägen per Klick, die deinen Farbton erhalten, und dem kommenden APCA-Wert als Bonus.
- AA normaler Text ✓
- AA großer Text ✓
- AAA normaler Text ✗
- AAA großer Text ✓
- UI-Komponenten (3:1) ✓
APCA (Beta): Lc 83.3|Lc| ≥ 60 ≈ Fließtext, ≥ 75 ist besser
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern – 16 px Fließtext.
Großer Text mit 24 px
Was das Kontrastverhältnis wirklich misst
Der WCAG-Kontrast vergleicht die relative Leuchtdichte zweier Farben – wie viel Licht sie für ein standardisiertes Auge abgeben – und drückt sie als Verhältnis von 1:1 (identisch) bis 21:1 (reines Schwarz auf reinem Weiß) aus. Berechnet wird die Leuchtdichte in linearem Licht, und genau deshalb versagt die Intuition oft: Zwei Farben, die „unterschiedlich aussehen“, landen trotzdem manchmal bei rund 2:1 – weit unterhalb des lesbaren Bereichs. Der Farbton spielt für die Formel kaum eine Rolle; fast alles hängt am Helligkeitsunterschied.
Die Schwellenwerte, auf die es ankommt
| Anforderung | Mindestverhältnis | Gilt für |
|---|---|---|
| AA, normaler Text | 4.5 : 1 | Fließtext unter 24 px (18.66 px bei Fettschrift) |
| AA, großer Text | 3 : 1 | Text ≥ 24 px oder ≥ 18.66 px fett |
| AA, Nicht-Text-Elemente | 3 : 1 | Rahmen von Eingabefeldern, Icons, Fokusringe (WCAG 1.4.11) |
| AAA, normaler Text | 7 : 1 | Strengere Lesbarkeitsstufe |
| AAA, großer Text | 4.5 : 1 | Strengere Lesbarkeitsstufe |
Platzhaltertexte, Hinweistexte und Text über Bildern sind die klassischen Schwachstellen – der Eleganz zuliebe werden sie aufgehellt, bis sie klammheimlich unter 4.5:1 rutschen. Deaktivierte Bedienelemente und Logos sind formal ausgenommen; alles, was Nutzer lesen müssen, um die Seite zu bedienen, ist es nicht.
So funktionieren die Korrekturvorschläge
Fällt ein Paar durch, wirft dir dieses Tool nicht irgendwelche dunkleren Farben hin. Es behält Farbton und Buntheit deiner Textfarbe bei und sucht – im wahrnehmungsgleichmäßigen OKLCH-Farbraum – in beide Richtungen nach der kleinsten Helligkeitsänderung, die das Zielverhältnis erreicht. Das Ergebnis wirkt weiterhin wie „deine“ Farbe: Aus einem durchgefallenen Markenblau wird ein etwas tieferes Markenblau, kein Marineblau. Besteht selbst reines Schwarz oder Weiß auf deinem Hintergrund nicht, ist der Hintergrund das eigentliche Problem – und das Tool sagt es dir.
Warum APCA gleich daneben steht
Die WCAG-2.x-Formel behandelt Hell-auf-Dunkel und Dunkel-auf-Hell symmetrisch – das menschliche Sehen tut das nicht: Heller Text auf dunklem Grund liest sich schlechter, als das Verhältnis vermuten lässt. APCA, das Kandidatenmodell für WCAG 3, behebt das mit einem polaritätsbewussten Lc-Wert (positiv für Dunkel-auf-Hell, negativ für Hell-auf-Dunkel). Bis WCAG 3 erscheint, gilt: Das 2.x-Verhältnis ist die Zahl für die Konformität, APCA der Plausibilitätscheck fürs Design – weichen beide stark voneinander ab, vertraue deinen Augen und teste mit echten Nutzern.
Praxistipps, um zu bestehen – ganz ohne Redesign
- Ändere die Helligkeit, nicht den Farbton – Kontrast ist fast ausschließlich eine Frage der Helligkeit, und genau die passen die Vorschläge oben an.
- Prüfe beide Designs: Ein Paar, das im hellen Modus besteht, fällt umgekehrt im dunklen Modus oft durch.
- Verlasse dich für Zustände nie auf Farbe allein – kombiniere Fehlerrot mit einem Icon oder mit Text, wegen des Kontrasts und wegen farbenblinder Nutzer.
- Prüfe Text über Fotos gegen die hellste Stelle, auf der er liegen kann – nicht gegen den Durchschnitt.
- Bei dünnen oder leichten Schriftschnitten ziele eine Stufe über das Minimum – 4.5:1 liest sich bei Schriftstärke 300 schlechter als bei 400.
Alles läuft lokal in deinem Browser; die Farben, die du prüfst, werden nie hochgeladen. Hol dir Farben direkt aus einem Screenshot mit dem Bild-Farbpicker, oder feile im Farb-Konverter zuerst an einem Farbton.
Häufige Fragen
Welches Kontrastverhältnis brauche ich für WCAG AA?
Text in normaler Größe braucht mindestens 4.5:1 gegen seinen Hintergrund. Großer Text – ab 24 px regulär oder etwa 18.7 px fett – braucht 3:1. Nicht-Text-Elemente der Oberfläche wie Rahmen von Eingabefeldern und Icons brauchen nach WCAG 1.4.11 ebenfalls 3:1.
Was ist der Unterschied zwischen AA und AAA?
AAA ist die strengere Stufe: 7:1 für normalen Text und 4.5:1 für großen Text. Die meisten gesetzlichen Vorgaben beziehen sich auf AA; AAA lohnt sich bei langen Lesetexten und bei einem Publikum mit eingeschränktem Sehvermögen.
Was gilt als „großer Text“?
WCAG definiert groß als mindestens 18 Punkt (24 px) in regulärer Stärke oder 14 Punkt (rund 18.66 px) fett. Alles Kleinere muss die Schwellenwerte für normalen Text erfüllen.
Müssen Logos und deaktivierte Buttons bestehen?
Nein. Wortmarken und rein dekorativer Text sind ausgenommen, und Text in inaktiven bzw. deaktivierten Bedienelementen unterliegt keiner Kontrastanforderung – ihn lesbar zu halten, ist trotzdem gute Praxis.
Was ist APCA und warum zeigt diese Seite es an?
APCA (Accessible Perceptual Contrast Algorithm) ist das Kandidatenmodell für WCAG 3. Es bewertet Kontrast als Lc-Wert, der der menschlichen Wahrnehmung besser folgt als das 2.x-Verhältnis – besonders auf dunklem Grund. Hier steht es als Beta-Referenz: Ob AA/AAA heute erfüllt ist, entscheidet weiterhin das WCAG-2.x-Verhältnis.
Wie werden die Korrekturvorschläge berechnet?
Das Tool behält Farbton und Sättigung deiner Textfarbe bei und sucht die kleinste Helligkeitsänderung (im wahrnehmungsbasierten OKLCH-Raum), die das Zielverhältnis erreicht – einen Kandidaten dunkler, einen heller. So sieht die korrigierte Farbe weiterhin nach deiner Farbe aus.