Zum Inhalt springen

Farbkontrast prüfen (WCAG)

Prüfe, ob zwei Farben die WCAG-Kontraststufen AA und AAA für normalen und großen Text erfüllen.

Wird auf Ihrem Gerät verarbeitet. Es wird nichts an einen Server gesendet.
Beispieltext

16.85:1

  • AA normaler Text (4,5:1)Erfüllt
  • AA großer Text (3:1)Erfüllt
  • AAA normaler Text (7:1)Erfüllt
  • AAA großer Text (4,5:1)Erfüllt

Prüft, ob eine Kombination aus Text- und Hintergrundfarbe die Kontraststufen AA und AAA der WCAG-2.x-Richtlinien für Barrierefreiheit erfüllt.

Berechnet die relative Leuchtdichte jeder Farbe nach der WCAG-Formel und ermittelt daraus das Kontrastverhältnis, das mit den Schwellenwerten 3:1, 4,5:1 und 7:1 verglichen wird.

Anwendungsfälle

  • Prüfen, ob ein Button oder Text vor der Veröffentlichung lesbar ist.
  • Die Barrierefreiheit einer Oberfläche prüfen.
  • Markenfarben wählen, die WCAG AA erfüllen.

So funktioniert's

  1. 1

    Text- und Hintergrundfarbe wählen

    Gib beide Farben als HEX-Wert ein.

  2. 2

    Verhältnis prüfen

    Sieh dir das Kontrastverhältnis an und welche WCAG-Stufen es erfüllt.

Häufige Fragen

Was ist der Unterschied zwischen AA und AAA?

AA ist die empfohlene Mindeststufe (4,5:1 für normalen Text); AAA ist strenger (7:1) und wird für kritische Inhalte empfohlen.

Was gilt bei WCAG als großer Text?

Text ab 18pt oder 14pt fett, für den ein niedrigerer Kontrastschwellenwert gilt (3:1 bei AA).

Farben & Design