Kontrastprüfer
Kontrast von Text und Hintergrund nach WCAG AA und AAA prüfen
- Dateien verlassen Ihr Gerät nicht
- Läuft im Browser
- Kostenlos, ohne Anmeldung, ohne Wasserzeichen
Kontrastverhältnis
4.54:1
AA für jeden Text erfüllt
- Erfüllt
AANormaler Text
4.5:1
- Erfüllt
AAGroßer Text
3:1 · Ab 24 px oder ab 18,66 px fett
- Nicht erfüllt
AAANormaler Text
7:1
- Erfüllt
AAAGroßer Text
4.5:1 · Ab 24 px oder ab 18,66 px fett
- Erfüllt
AABedienelemente & Grafiken
3:1 · Icons, Rahmen von Eingabefeldern, Fokusringe
APCA-Helligkeitskontrast
Lc 71.6
Für Inhaltstext ok, nicht für lange Absätze
Aus dem WCAG-3-Entwurf, berücksichtigt die Polarität: Negatives Lc bedeutet heller Text auf dunklem Grund.
Vorschau
Große Überschrift
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern
Geringer Kontrast schadet Fließtext am meisten: Lange Absätze in kleiner Schrift ermüden die Augen schnell, besonders auf dem Handy in der Sonne.
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern
Kleingedrucktes, Bildunterschriften, Fußnoten
SchaltflächeSchaltfläche
Nächste bestehende Farben
AA · 4.5:1
Text anpassenBereits erfüllt
Hintergrund anpassenBereits erfüllt
AAA · 7:1
Text anpassen
#595959 · 7.00:1
Hintergrund anpassenAllein über die Helligkeit nicht erreichbar
Ändert nur die Helligkeit (in OKLCH), Farbton und Wirkung bleiben erhalten.
So verwenden Sie: Kontrastprüfer
Prüfen Sie ein Paar aus Text- und Hintergrundfarbe gegen WCAG 2 (AA und AAA für normalen Text, großen Text und Bedienelemente) und sehen Sie den APCA-Helligkeitskontrast aus dem WCAG-3-Entwurf. Fällt ein Paar durch, schlägt das Tool die nächsten bestehenden Farben vor.
- 1
Geben Sie „Textfarbe“ und „Hintergrundfarbe“ als HEX, rgb(), hsl(), oklch() oder Farbnamen ein oder klicken Sie auf ein Farbfeld, um den Farbwähler zu öffnen.
- 2
Lesen Sie das „Kontrastverhältnis“ und das Ergebnis „Erfüllt“ oder „Nicht erfüllt“ für jede AA- und AAA-Prüfung ab.
- 3
Kontrollieren Sie die „Vorschau“, tippen Sie einen eigenen „Beispieltext“ ein und testen Sie mit „Farben tauschen“ die umgekehrte Kombination.
- 4
Klicken Sie unter „Nächste bestehende Farben“ bei einem Vorschlag „Text anpassen“ oder „Hintergrund anpassen“ für AA (4,5:1) oder AAA (7:1) auf „Übernehmen“.
- 5
Sobald Sie eine Farbe ändern, enthält die Seiten-URL beide Farben; kopieren Sie sie, um das Ergebnis zu teilen.
Häufige Fragen
Welches Kontrastverhältnis brauche ich?
WCAG AA verlangt 4,5:1 für normalen Text sowie 3:1 für großen Text (ab 24 px oder ab 18,66 px fett) und für Bedienelemente wie Symbole und Eingabefeldränder. AAA verlangt 7:1 bzw. 4,5:1.
Warum wird 4,497:1 als 4,49 statt 4,50 angezeigt?
Das Verhältnis wird nie über eine Schwelle hinweg aufgerundet. So sieht ein Paar, das 4,5:1 knapp verfehlt, nicht so aus, als würde es bestehen.
Kann ich halbtransparenten Text prüfen?
Ja. Mit dem Regler „Textdeckkraft“ wird der durchscheinende Text zuerst mit dem Hintergrund verrechnet und dann gemessen.
Was ist der APCA-Wert?
APCA stammt aus dem WCAG-3-Entwurf und liefert einen Helligkeitskontrast (Lc), der davon abhängt, welche Farbe der Text ist; negative Werte bedeuten hellen Text auf dunklem Grund. Da es noch ein Entwurf ist, gelten für Konformitätsprüfungen meist weiterhin die WCAG-2-Verhältnisse.
Wie werden die vorgeschlagenen Farben ermittelt?
Geändert wird nur die Helligkeit (in OKLCH), Farbton und Charakter Ihrer Farbe bleiben also erhalten. Reicht weder Aufhellen noch Abdunkeln, erscheint „Allein über die Helligkeit nicht erreichbar“; passen Sie dann die andere Farbe an.