Kontrastrechner
Prüfe WCAG-2.1- und APCA-Kontrast für zwei Farben — oder lege einen Screenshot ab und sieh genau, wo dünne Striche den Text schwer lesbar machen. Alles lokal, ohne Upload.
So bekommst du belastbares Material
Browserzoom erhöht die Auflösung nicht, und Snipping-Tools nehmen auf HiDPI-Displays oft in logischen statt physischen Pixeln auf. Nutze Chrome DevTools → Elements-Panel → Rechtsklick auf das Element → „Capture node screenshot", oder in Firefox den Rechtsklick-Screenshot — beide nehmen in Geräteauflösung auf.
| # | Häufigkeit | Strichstärke | WCAG nominell → effektiv | APCA nominell → effektiv |
|---|
Hinweis — die Analyse läuft vollständig lokal in deinem Browser; der Screenshot verlässt dein Gerät nicht. Klick auf eine Tabellenzeile blättert in der Lupe durch die Fundstellen der Gruppe.
Warum ein bestandener WCAG-Wert trotzdem schwer lesbar sein kann
Jeder Kontrastrechner im Netz nimmt zwei Farbwerte entgegen und liefert eine Ratio zurück. Diese Zahl ist ehrlich, was die Farben angeht — und blind für alles andere. Ein Farbpaar mit 4,5:1, das WCAG AA locker besteht, kann real schwer lesbar sein, wenn die Schrift in einem dünnen Schnitt und kleiner Größe steht. Denn beim Auge kommt nicht die nominelle Textfarbe an, sondern die vom Rasterizer tatsächlich gezeichnete Anti-Aliasing-Mischung aus Text und Hintergrund. Je dünner der Strich, desto größer der Anteil dieser ausgewaschenen Randpixel an jedem Buchstaben — und der effektive Kontrast sinkt leise unter das, was die beiden Hex-Werte versprochen haben.
Genau diese Lücke schließt dieses Tool. Neben der klassischen Zwei-Farben-Prüfung nimmt es einen Screenshot deiner echten Oberfläche entgegen und misst, was wirklich gerendert wurde — wo die Striche am dünnsten sind und welcher effektive Kontrast genau an diesen Stellen herrscht. Ein Design, das auf dem Papier besteht und auf dem Bildschirm scheitert, wird sofort sichtbar: mit Koordinaten, Strichstärken in Pixeln und dem gemessenen Kontrast jeder kritischen Stelle.
WCAG 2.1 und APCA — was die beiden Zahlen bedeuten
Die WCAG-2.1-Ratio ist der etablierte rechtliche Maßstab: 4,5:1 für normalen Text (AA), 3:1 für großen Text, 7:1 für AAA. Sie behandelt ein Dunkel-auf-Hell-Paar und seine Hell-auf-Dunkel-Umkehrung als identisch — das menschliche Sehen tut das nicht: Heller Text auf dunklem Grund liest sich bei gleicher Ratio schlechter. APCA (Accessible Perceptual Contrast Algorithm), das Kandidatenmodell für WCAG 3, korrigiert das mit einem wahrnehmungsbasierten Wert namens Lc, der die Polarität berücksichtigt und auf die reale Kontrastempfindlichkeit abgestimmt ist. Als Faustregel passt Lc 90 für Fließtext, Lc 75 ist das Ziel für normalen Lesetext, Lc 60 reicht für großen oder fetten Text, und unter Lc 45 sollte gar kein Text stehen.
Dieser Rechner zeigt immer beides: die WCAG-Ratio, die du heute für Compliance-Arbeit brauchst, und den APCA-Lc, der besser vorhersagt, was Menschen tatsächlich erleben. Widersprechen sich beide — ein Paar besteht WCAG, holt aber nur einen schwachen Lc — folge dem pessimistischeren Wert und passe die Farben an. Seit Juni 2025 gilt in Deutschland zudem das Barrierefreiheitsstärkungsgesetz (BFSG): Für viele Websites und Apps ist ausreichender Kontrast damit keine Kür mehr, sondern Pflicht.
Was dünne Striche und Anti-Aliasing mit Text machen
Ein Rasterizer kann keinen 1,5-Pixel-Strich zeichnen. Er malt ein volles Pixel und verteilt die restliche Hälfte als Zwischentöne zwischen Text- und Hintergrundfarbe auf die Nachbarpixel. Bei einem kräftigen Strich sind diese gemischten Ränder ein kleiner Teil des Buchstabens — bei einem Haarlinien-Schnitt sind sie fast alles. Das Ergebnis ist Text, dessen gemessener Kontrast — aus den echten Pixeln abgetastet — dramatisch unter dem deklarierten Farbpaar liegen kann, besonders auf Displays mit normaler Auflösung, bei reduzierter Helligkeit oder nach einer Systemskalierung.
Die Screenshot-Analyse macht das messbar. Sie binarisiert das Bild gegen den erkannten Hintergrund, findet per Distance Transform die Mittellinie jedes Strichs und meldet je zusammenhängender Form die dünnste Stelle samt dort gemessenem effektivem Kontrast. Striche ab 3 Pixeln mit Lc 60+ werden grün bewertet; alles unter 2 Pixeln oder unter Lc 45 rot — bei dieser Breite hat das Anti-Aliasing die Buchstabenform bereits aufgezehrt. Für belastbare Zahlen den Screenshot in 2×-Auflösung (Retina) aufnehmen und die Oberfläche in der Größe prüfen, in der Nutzer sie wirklich sehen.
Wen es betrifft — und wie du ein rotes Ergebnis behebst
Niedriger effektiver Kontrast ist kein Randfall. Die Kontrastempfindlichkeit sinkt auch bei gesunden Augen stetig mit dem Alter, und sie bricht deutlich ein bei Katarakt (Grauem Star), Makuladegeneration, Glaukom und diabetischer Retinopathie; ein Astigmatismus verschmiert dünne Striche zusätzlich in den Hintergrund. Situative Faktoren kommen obendrauf — Sonnenlicht auf dem Handy, Nachtmodus-Farbfilter, günstige Panels bei niedriger Helligkeit. Versalsatz verschärft das Problem weiter, weil Großbuchstaben die Ober- und Unterlängen entfernen, an denen das Auge ohnehin schwache Buchstaben unterscheidet.
Die Korrekturen folgen direkt aus den Messwerten. Liegen die dünnsten Striche unter 2 Pixeln, erhöhe das Font-Weight — von 300 oder 400 auf 500 löst das Problem meist, ohne irgendetwas umzugestalten. Ist der effektive Kontrast das Problem, dunkle die Textfarbe ab (auf dunklem Grund: aufhellen), bis WCAG-Ratio und Lc komfortabel sind. Ist die Schrift schlicht zu klein, vergrößere sie, bevor du etwas anderes anfasst. Nach jeder Änderung den Screenshot neu prüfen — das Export-Bild dokumentiert das Vorher-Nachher für dein Team.
Datenschutz durch Technik
Die gesamte Verarbeitung findet in deinem Browser statt. Deine Dateien erreichen niemals einen Server — es gibt nichts zu speichern, zu übertragen oder weiterzugeben.
Mehr in der DatenschutzerklärungHäufige Fragen
Er ist kostenlos und ohne Anmeldung nutzbar, und es wird nichts hochgeladen. Sowohl die Farbprüfung als auch die komplette Screenshot-Analyse laufen in deinem Browser — du kannst nach dem Laden der Seite die Internetverbindung trennen, alles funktioniert weiter.
Als Faustregel ist Lc 90 ideal für Fließtext, Lc 75 das Arbeitsziel für normalen Lesetext, Lc 60 akzeptabel für großen oder fetten Text, und unter 45 sollte gar kein Text stehen. APCA berücksichtigt die Polarität — Hell-auf-Dunkel und Dunkel-auf-Hell werden anders bewertet als bei der WCAG-Ratio.
Weil die Ratio nur die beiden nominellen Farben beschreibt. Bei dünnen Schriftschnitten mischt das Anti-Aliasing den Großteil jedes Strichs mit dem Hintergrund — der tatsächlich auf dem Bildschirm gerenderte Kontrast liegt darunter. Die Screenshot-Analyse misst diese echten Pixel an den dünnsten Stellen — das ist der Wert, den deine Leser erleben.
Strichstärken werden in Screenshot-Pixeln gemessen. Bei 1× ist ein normaler Schriftstrich nur ein bis zwei Pixel breit — da bleibt der Messung wenig Substanz; bei 2× umfasst derselbe Strich doppelt so viele Pixel und die Analyse wird deutlich zuverlässiger. Text unter etwa 10 px im Bild löst eine Auflösungswarnung aus.
Ja — jede zusammenhängende Form, die sich vom Hintergrund abhebt, wird gemessen, auch Linien-Icons und UI-Grafiken. Das ist nützlich, denn ein Icon mit 1-px-Strich hat exakt dasselbe Lesbarkeitsproblem wie Haarlinien-Text. Fotos und Verlaufsflächen werden erkannt und als unzuverlässig markiert, statt falsche Zahlen zu liefern.
Nein. Kontrast und Strichstärke sind zwei wichtige Faktoren von vielen — Tastaturbedienung, Fokuszustände, Semantik und Screenreader-Unterstützung brauchen eigene Tests. Das Tool sagt dir schnell und präzise, ob dein Text physisch lesbar ist; für Konformitätsaussagen nach WCAG, BFSG oder EAA gehört ein komplettes Audit dazu.