WCAG-Farbkontrast prüfen
Prüfen Sie Text- und Hintergrundfarbe gegen WCAG 2.2 (AA und AAA), sehen Sie das Ergebnis live und erhalten Sie bei Nichtbestehen die nächstgelegene passende Farbe
Zu prüfende Farben
Bitte eine gültige HEX-, rgb()- oder hsl()-Farbe eingeben.
Bitte eine gültige HEX-, rgb()- oder hsl()-Farbe eingeben.
Auf einen Blick lesbar?
Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Ändern Sie Farben und Größe, um zu sehen, wie dieser Absatz wirkt.
Eine Farbe pro Zeile (HEX, rgb() oder hsl()). Bis zu 6 Farben, jedes Paar wird geprüft.
- Normaler Text · AA (4,5:1) ✓
- Normaler Text · AAA (7:1) ✓
- Großer Text · AA (3:1) ✓
- Großer Text · AAA (4,5:1) ✓
- UI-Komponenten & Grafiken · AA (3:1) ✓
Mindestens 2 gültige Farben zum Vergleichen hinzufügen
AAA ≥ 7:1 · AA ≥ 4,5:1 · AA Groß ≥ 3:1 (nur für großen Text)
So nutzen Sie das Tool
- Geben Sie Textfarbe und Hintergrundfarbe als HEX, rgb() oder hsl() ein oder nutzen Sie die Farbwähler.
- Stellen Sie die Textgröße in px ein und aktivieren Sie bei Bedarf Fettschrift, damit das Tool weiß, ob es als großer Text zählt.
- Lesen Sie Kontrastverhältnis und Bestanden- bzw. Nicht-bestanden-Ergebnis für AA und AAA, normalen und großen Text ab.
- Bei einem Fehlschlag nutzen Sie Übernehmen beim Vorschlag oder wechseln zum Paletten-Check für bis zu 6 Farben.
Rechenbeispiel
Dunkelgrau #333333 auf Weiß ergibt 12,63:1 und besteht jede Stufe. Mittelgrau #777777 auf Weiß ergibt 4,47:1: Das Verhältnis wird abgeschnitten, nicht gerundet, und verfehlt daher die AA-Schwelle von 4,5:1 für normalen Text, obwohl es knapp aussieht. Das Tool schlägt #767676 (4,54:1) für AA und #595959 (7,00:1) für AAA vor, behält den Farbton bei und ändert nur die Helligkeit. Großer Text beginnt bei 24 px normal oder etwa 18,66 px fett und braucht für AA nur 3:1. Ein bestandener Wert garantiert keine Lesbarkeit für alle, denn auch Schriftschnitt, Größe und Sehvermögen spielen eine Rolle.
Methodik
Dieser Prüfer setzt den Kontrastalgorithmus von WCAG 2.x um (Erfolgskriterien 1.4.3, 1.4.6 und 1.4.11), der seit WCAG 2.0 im Jahr 2008 unverändert ist und in 2.1 und 2.2 übernommen wurde. Die Verhältnisse werden abgeschnitten, nie gerundet: 4,499:1 erscheint als 4,49:1 und fällt korrekt durch. Bei einem Fehlschlag behält der Vorschlag Farbton und Sättigung Ihrer Farbe bei und sucht nur auf der Helligkeitsachse den nächsten Wert, der das Ziel erreicht.
Sechs Alltagsfarben auf Weiß und ein repariertes Rot
Verhältnisse, die der Checker für jede Textfarbe auf #FFFFFF anzeigt.
| Textfarbe | Verhältnis | Normal AA (4,5:1) | Groß AA (3:1) |
|---|---|---|---|
| #0B5FFF | 5,12:1 | Bestanden | Bestanden |
| #008000 | 5,13:1 | Bestanden | Bestanden |
| #E53935 | 4,22:1 | Durchgefallen | Bestanden |
| #FF0000 | 3,99:1 | Durchgefallen | Bestanden |
| #808080 | 3,94:1 | Durchgefallen | Bestanden |
| #FFA500 | 1,97:1 | Durchgefallen | Durchgefallen |
Die Verhältnisse werden abgeschnitten, nie gerundet. Welche Spalte gilt, hängt von der Größe ab: Text zählt ab 24 px normal oder 18,66 px fett als groß, darunter lesen Sie die Spalte „Normal“. Orange #FFA500 fällt mit 1,97:1 in jeder Zeile durch, selbst als UI-Rahmen reicht diese Farbe auf Weiß nicht. Rot, Orange und mittleres Grau sind die üblichen Problemfälle, und ein Paar, das als Fließtext durchfällt, kann als großer Text oder als UI-Rahmen trotzdem bestehen.
Das Fehlerrot. Dana verwendet #E53935 für Formularfehler in 16 px. Es erreicht 4,22:1 und besteht AA als normaler Text nicht. Das Tool behält ihren Farbton und ändert nur die Helligkeit: #E32C28 erreicht 4,50:1 für AA, #AF1A17 erreicht 7,04:1 für AAA. Sie setzt #E32C28 für die 16-px-Meldungen ein und behält #E53935 für 24-px-Überschriften und Eingaberahmen, wo 3:1 genügt. Auch dann muss es für Sie lesbar sein: Ein bestandenes Verhältnis ist eine Untergrenze, keine Garantie. Prüfen Sie jedes geänderte Paar daher noch einmal im Tool, bevor Sie die Farbe im Design festschreiben.
Barrierefreiheit & farbgenaues Arbeiten
Bücher und Ausrüstung für Designer und Entwickler, denen gut lesbare, korrekte Farben wichtig sind
Inclusive Design für Barrierefreiheit: Praxisleitfaden für digitale Barrierefreiheit, UX sowie inklusives Web- und App-Design
Praxisleitfaden von Dale Cruse und Denis Boudreau zu digitaler Barrierefreiheit, UX und inklusivem Web- und App-Design (englischsprachiges Buch).
Calibrite Photo Kit mit Display Pro HL: Kolorimeter zur Monitorkalibrierung und ColorChecker Passport Photo 2
Display-Pro-HL-Kolorimeter plus ColorChecker Passport Photo 2 für einen farbgenauen Workflow von der Aufnahme bis zur Bearbeitung: RAW-Dateien, eigene Kameraprofile und Weißabgleich.
Als Amazon-Partner verdienen wir an qualifizierten Verkäufen, ohne dass Ihnen zusätzliche Kosten entstehen.
Häufige Fragen
Warum fällt #777777 auf Weiß durch, obwohl es gut lesbar aussieht? ▼
WCAG misst die relative Luminanz, nicht den Eindruck auf Ihrem Bildschirm. #777777 auf Weiß ergibt etwa 4,47:1 und liegt damit knapp unter dem AA-Minimum von 4,5:1 für normalen Text. #767676 ist das hellste neutrale Grau, das auf Weiß AA besteht (4,54:1). Gerade solche knappen Fälle sind der Grund, warum das Tool Verhältnisse abschneidet statt rundet.
Woran erkennt das Tool, ob mein Text als „groß“ gilt? ▼
Es nutzt Größe und Schriftschnitt, die Sie eingeben: ab 24 px (18 pt) in normaler Stärke oder ab 18,66 px (14 pt) in Fett. Stellen Sie die Größe ein und setzen Sie bei Bedarf den Haken bei „Fetter Text“, dann werden die passenden Zeilen hervorgehoben und das Urteil richtet sich nach dieser Kategorie.
Müssen Platzhaltertexte, deaktivierte Buttons und Logos den Test bestehen? ▼
Inaktive (deaktivierte) Bedienelemente und Logotypen sind von SC 1.4.3 ausgenommen, Platzhaltertext jedoch nicht: Er muss wie jeder andere Text 4,5:1 erreichen. Icons und Eingabefeldrahmen, die zur Erkennung eines Bedienelements nötig sind, fallen unter die 3:1-Regel für Nicht-Text-Kontrast.
Kann ich Text über einem Farbverlauf, einem Foto oder einer halbtransparenten Farbe prüfen? ▼
Das Tool vergleicht zwei einfarbige Werte. Bei halbtransparenten Farben mischen Sie diese zuerst mit dem echten Hintergrund und tragen das Ergebnis ein. Bei Verläufen und Fotos testen Sie die Textfarbe gegen die hellste und die dunkelste Stelle dahinter und nehmen das schlechtere Ergebnis.
Sollte ich AA oder AAA anstreben? ▼
AA ist die Stufe, die die meisten Vorgaben mit WCAG-Bezug verlangen, und damit das praktische Minimum. AAA ist ein strengeres Ziel, das nicht für jedes Element einer Website erwartet wird, aber für lange Fließtexte sinnvoll ist.
Nutzt das Tool APCA oder das Kontrastmodell von WCAG 3? ▼
Nein. APCA ist ein Kandidat für das Kontrastmodell von WCAG 3, das noch ein Entwurf ist. Dieser Prüfer nutzt das WCAG-2.x-Verhältnis, also dieselbe Formel, auf die sich Audits und Vorschriften heute stützen.