Design
Kontrast Checker
Prüfe, ob Text auf seinem Hintergrund gut lesbar ist – nach WCAG 2.2 für normale und große Schrift sowie Bedienelemente. Fehlt Kontrast, schlägt das Tool die nächstpassende Farbe im selben Farbton vor. Dazu APCA und eine Simulation von Farbsehschwächen.
- Läuft komplett in deinem Browser
- Keine Datenübertragung
- Ohne Anmeldung
- Kostenlos
Farben
Vorschau
Große Überschrift
Normaler Fließtext in 16 Pixel. So lesen Besucher deine Inhalte – lange Abschnitte brauchen guten Kontrast, damit die Augen nicht ermüden. Ein Link im Text.
Kleiner Hinweistext in 13 Pixel, z. B. für Fußnoten oder Bildunterschriften.
So sehen es Menschen mit Farbsehschwäche
Simulation nach Machado et al. (2009) bei voller Ausprägung. Rund 8 % der Männer und 0,5 % der Frauen haben eine Rot-Grün-Schwäche – Farbe sollte nie das einzige Unterscheidungsmerkmal sein.
Ergebnis nach WCAG 2.2
APCA WCAG 3 Entwurf
APCA berücksichtigt, dass helle Schrift auf dunklem Grund anders wirkt als umgekehrt. Noch kein offizieller Standard – maßgeblich ist derzeit WCAG 2.2.
Anleitung
So funktioniert’s
- Farben wählen
Textfarbe und Hintergrund eingeben – in jeder Schreibweise (HEX, RGB, HSL, Farbname) – oder über den Farbwähler aussuchen. Mit dem Pfeil tauschst du beide.
- Ergebnis ablesen
Rechts siehst du das Kontrastverhältnis und welche WCAG-Stufen erfüllt sind: AA ist der übliche Mindeststandard, AAA die strengere Stufe.
- Vorschlag übernehmen
Reicht der Kontrast nicht, berechnet das Tool die nächste passende Text- oder Hintergrundfarbe – nur heller oder dunkler, im selben Farbton. Ein Klick übernimmt sie.
- Für alle prüfen
Unten siehst du, wie die Kombination bei Rot-, Grün- oder Blaublindheit wirkt – inklusive Kontrastwert.
FAQ
Häufige Fragen
Welcher Kontrast ist vorgeschrieben?
Die WCAG 2.2 verlangen für Stufe AA mindestens 4,5 : 1 für normalen Text und 3 : 1 für großen Text (ab 24 px bzw. 18,66 px fett) sowie für Bedienelemente und Grafiken. Seit dem 28. Juni 2025 gilt in der EU der European Accessibility Act (in Deutschland das Barrierefreiheitsstärkungsgesetz): Für viele Online-Shops und digitale Dienstleistungen ist Stufe AA – über die Norm EN 301 549 – damit Pflicht.
Was ist der Unterschied zwischen AA und AAA?
AA ist der empfohlene Mindeststandard, den Gesetze meist fordern. AAA ist strenger (7 : 1 für normalen Text) und hilft besonders Menschen mit Sehschwäche. AAA für alle Inhalte ist oft nicht nötig, für Fließtext aber ein gutes Ziel.
Wie wird der Kontrast berechnet?
Aus der relativen Leuchtdichte beider Farben: (heller + 0,05) / (dunkler + 0,05). Das Ergebnis liegt zwischen 1 : 1 (gleiche Farbe) und 21 : 1 (Schwarz auf Weiß). Nach WCAG wird nicht aufgerundet – 4,499 erfüllt 4,5 nicht.
Was ist APCA?
Das „Accessible Perceptual Contrast Algorithm“ ist der Kandidat für die kommende WCAG 3. Es berücksichtigt, dass helle Schrift auf dunklem Grund anders wahrgenommen wird als dunkle auf hellem, und gibt einen Lc-Wert aus. Bis WCAG 3 verabschiedet ist, bleibt WCAG 2.2 der Maßstab.
Zählt die Deckkraft der Textfarbe?
Ja. Halbtransparenter Text wird über den Hintergrund gelegt und dann gemessen – so wie er auf dem Bildschirm tatsächlich aussieht. Die Deckkraft des Hintergrunds wird dagegen ignoriert, weil es darauf ankommt, was darunter liegt.
Werden meine Farben gespeichert?
Nein. Alles wird in deinem Browser berechnet, nichts wird gesendet.