Kontrastverhältnis

Farbkontrast-Prüfer

WCAG-Barrierefreiheits-Kontrastverhältnisse prüfen

Kontrastverhältnis

17.45:1

AA

AAA

Normaler Text

Bestanden
Bestanden

Großer Text

Bestanden
Bestanden

Was ist Farbkontrast-Prüfer?

Der Farbkontrast-Prüfer bewertet das Kontrastverhältnis zwischen Vordergrund- und Hintergrundfarben nach den WCAG-2.1-Barrierefreiheitsstandards. Er zeigt sofort an, ob Ihre Farbkombination die AA- oder AAA-Richtlinien für normalen und großen Text erfüllt.

Anleitung

  1. Schritt 1 — Legen Sie die Vordergrundfarbe (Text) über den Farbwähler oder durch Eingabe eines HEX-/RGB-Werts fest.
  2. Schritt 2 — Wählen Sie die Hintergrundfarbe auf dieselbe Weise. Das Kontrastverhältnis und die WCAG-Bewertung aktualisieren sich live.
  3. Schritt 3 — Überprüfen Sie die Bestanden/Nicht-bestanden-Symbole für AA und AAA. Passen Sie die Farben an, bis alle relevanten Kriterien erfüllt sind.

Ergebnis

Ein Designer testet dunkelgrauen Text (#333333) auf hellblauem Hintergrund (#E3F2FD) — das Tool zeigt ein Verhältnis von 10,5:1, das sowohl WCAG AA als auch AAA für alle Textgrößen besteht.

Ähnliche Tools