Tool Hub

Kontrastprüfer

Prüft das WCAG 2.1-Kontrastverhältnis zwischen Text und Hintergrund

Kontrastverhältnis

Aa Bb Cc 123

Sample text · normal size

17.40:1

WCAG-StufeErgebnis
AA Normal (4.5:1)
Pass
AA Large / UI (3:1)
Pass
AAA Normal (7:1)
Pass
AAA Large (4.5:1)
Pass

Wie man es benutzt

  1. Geben Sie die Vordergrundfarbe mit der Farbauswahl auf der linken Seite ein oder wählen Sie sie aus.
  2. Geben Sie die Hintergrundfarbe mit der Farbauswahl auf der rechten Seite ein oder wählen Sie sie aus.
  3. Lesen Sie das Kontrastverhältnis und die WCAG 2.1 Bestanden/Nicht bestanden Abzeichen für normalen Text (AA benötigt 4,5:1), großen Text (AA benötigt 3:1) und UI-Komponenten (3:1).
  4. Klicken Sie die Swap-Schaltfläche, um die Farben umzukehren und beide Richtungen zu überprüfen.

Beispiele

  • Vordergrund #767676 auf Hintergrund #ffffff erzeugt ein Verhältnis von 4,48:1, das AA für normalen Text nicht besteht, aber für großen Text besteht.
  • Vordergrund #000000 auf #ffffff gibt 21:1, besteht jede WCAG 2.1 Stufe einschließlich AAA.

Ergebnisse vor dem Produktiveinsatz prüfen. Keine Gewährleistung — siehe Nutzungsbedingungen.