Farbkontrast-Prüfer
Geben Sie eine Text- und eine Hintergrundfarbe ein und sehen Sie ihr WCAG-Kontrastverhältnis – und, falls es durchfällt, die nächstliegenden Farben, die AA oder AAA bestehen.
- WCAG 2.2
- Schlägt Korrekturen vor
- Farbenblind-Vorschau
- APCA
Großer Text – 24 px oder 19 px fett
Normaler Fließtext. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern, und jeder sollte das ohne Mühe lesen können.
Die Textfarbe ist teilweise transparent: Das Verhältnis wird nach dem Mischen mit dem Hintergrund gemessen.
Nächstliegende Farben, die bestehen
APCA – wahrnehmungsbasierter Kontrast
APCA ist die für WCAG 3 vorgeschlagene Kontrastmethode. Sie liest das Paar als Text auf Hintergrund – ein Tausch der Farben ändert also den Wert. Verstehen Sie sie als zusätzliche Orientierung: Rechtlich maßgeblich sind heute die WCAG-2-Verhältnisse.
Farbfehlsichtigkeiten
So wirkt das Farbpaar bei den häufigsten Formen der Farbenblindheit – mit dem verbleibenden Kontrastverhältnis.
So prüfen Sie den Farbkontrast
Zwei Farben, ein Urteil.
- 1
Beide Farben eingeben
Jedes CSS-Format funktioniert: HEX, rgb(), hsl(), oklch() oder ein Farbname. Der Farbwähler steht ebenfalls bereit.
- 2
Verhältnis ablesen
Sie sehen sofort, welche WCAG-Stufen für normalen Text, großen Text und Bedienelemente bestehen – mit Live-Vorschau.
- 3
Durchgefallenes korrigieren
Übernehmen Sie eine der vorgeschlagenen Farben – gleicher Farbton, etwas heller oder dunkler – oder ziehen Sie die Helligkeitsregler.
Nicht nur bestanden oder durchgefallen
Er zeigt auch den Ausweg.
Exakte WCAG-Rechnung
Relative Leuchtdichte und Verhältnis wie in WCAG 2.2 definiert, mit zwei Nachkommastellen und nie über eine Schwelle aufgerundet.
Nächste passende Farbe
Für jede nicht bestandene Stufe erhalten Sie die nächstliegende Text- oder Hintergrundfarbe, die sie erreicht – Farbton und Sättigung bleiben.
APCA-Wert
Der Helligkeitskontrast (Lc) der neueren wahrnehmungsbasierten Methode, mit Hinweis, für welche Textgrößen er reicht.
Simulation des Farbsehens
Das Farbpaar bei Protanopie, Deuteranopie, Tritanopie und ohne Farbsehen, jeweils mit dem verbleibenden Verhältnis.
Transparenter Text
Eine Textfarbe mit Alpha wird zuerst mit dem Hintergrund gemischt – genau so, wie der Browser sie zeichnet.
Realistische Vorschau
Großer Text und Fließtext, eine gefüllte Schaltfläche, eine Umriss-Schaltfläche und Icons in Ihren zwei Farben.
Link zum Teilen
Kopieren Sie einen Link, der das Tool mit demselben Inhalt öffnet. Die Daten stehen im Teil der Adresse nach dem #, den Browser nicht an Server senden.
Privat
Alles läuft in Ihrem Browser. Was Sie eingeben oder öffnen, wird nicht an einen Server gesendet.
Was das Kontrastverhältnis bedeutet
Das WCAG-Kontrastverhältnis vergleicht die relative Leuchtdichte zweier Farben auf einer Skala von 1 : 1 (identisch) bis 21 : 1 (Schwarz auf Weiß). Die Web Content Accessibility Guidelines verlangen auf Stufe AA mindestens 4,5 : 1 für normalen Text und 3 : 1 für großen Text – die Stufe, auf die sich die meisten Gesetze beziehen, darunter der European Accessibility Act über EN 301 549, in Deutschland BFSG und BITV 2.0 sowie in den USA ADA-Rechtsprechung und Section 508.
Großer Text heißt mindestens 24 px oder 18,66 px (14 pt) in Fettschrift. Stufe AAA hebt die Latte auf 7 : 1 und 4,5 : 1. Seit WCAG 2.1 brauchen auch Bedienelemente und bedeutungstragende Grafiken – Feldrahmen, Icons, Diagrammlinien, Fokusanzeigen – 3 : 1 gegenüber ihrer Umgebung. Logos, Dekoration und deaktivierte Elemente sind ausgenommen.
Das Verhältnis ist ein einfaches Modell mit bekannten blinden Flecken: Es überschätzt dunkle Farbpaare und ignoriert die Schriftstärke. APCA, ein Kandidat für das künftige WCAG 3, bildet die Wahrnehmung genauer ab und hängt davon ab, welche Farbe der Text ist. Hier wird es als zusätzliche Orientierung gezeigt. Für die Konformität zählt heute das WCAG-2-Verhältnis – und guter Kontrast hilft allen, nicht nur den rund 8 % der Männer mit Farbfehlsichtigkeit: Denken Sie an ein Handy in der Sonne.
Kontrastanforderungen nach WCAG 2.2
| Inhalt | Stufe AA | Stufe AAA |
|---|---|---|
| Normaler Text (unter 24 px bzw. unter 18,66 px fett) | 4,5 : 1 | 7 : 1 |
| Großer Text (ab 24 px bzw. ab 18,66 px fett) | 3 : 1 | 4,5 : 1 |
| Icons, Feldrahmen, Bedienelemente | 3 : 1 | nicht definiert |
| Logos und rein dekorative Elemente | keine Anforderung | keine Anforderung |
Tipps
- Eine Farbe rechnen Sie vorab mit dem Farbumrechner in HEX, RGB oder OKLCH um.
- Eine ganze Palette prüfen Sie paarweise im Kontrastraster des Farbpaletten-Generator.
- Die echten Farben aus einem Screenshot liefert der Pixel-Farbwähler.
- Verlassen Sie sich nicht allein auf Farbe: Links im Fließtext sollten zusätzlich unterstrichen sein, und Fehlerzustände brauchen neben Rot ein Icon oder eine Meldung.
Häufig gestellte Fragen
Keine Antwort gefunden? Schreiben Sie uns – wir antworten schnell.
Welches Kontrastverhältnis brauche ich für WCAG AA?
Mindestens 4,5 : 1 für normalen Text und 3 : 1 für großen Text (24 px oder 18,66 px fett). Icons und Bedienelemente wie Feldrahmen brauchen ebenfalls 3 : 1.
Was gilt als großer Text?
Text ab 18 pt (24 px) oder ab 14 pt (etwa 18,66 px) in Fettschrift. Alles Kleinere ist normaler Text.
Reicht ein Verhältnis von 4,49 : 1?
Nein. Die Schwellen gelten exakt, 4,49 : 1 besteht AA für normalen Text nicht. Dieser Prüfer rundet ein Verhältnis nie auf, um falsche Erfolge zu vermeiden.
Was ist APCA?
Der Accessible Perceptual Contrast Algorithm, eine neuere Methode, die für WCAG 3 geprüft wird. Er liefert einen Helligkeitskontrast (Lc), der die Lesbarkeit besser abbildet, vor allem bei dunklen Designs. Ein rechtlicher Standard ist er noch nicht.
Wie korrigiere ich ein durchgefallenes Farbpaar?
Machen Sie die dunklere Farbe dunkler oder die hellere heller. Die Vorschläge zeigen die kleinste Helligkeitsänderung, die AA oder AAA erreicht und den Farbton behält – ein Klick übernimmt sie.
Werden meine Daten an einen Server gesendet?
Nein. Das Tool läuft vollständig in Ihrem Browser. Ihre Eingaben werden nicht hochgeladen, protokolliert oder auf unseren Servern gespeichert.
Weitere kostenlose Entwickler-Tools
Kodieren, formatieren, testen, umrechnen und erzeugen – kleine Werkzeuge, die im Browser laufen und Ihre Daten auf Ihrem Gerät lassen.