Zum Inhalt springen
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Farbkontrast prüfen (WCAG)

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

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

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

    Geben Sie beide Farben als HEX-Wert ein.

  2. 2

    Verhältnis prüfen

    Sehen Sie sich das Kontrastverhältnis an und welche WCAG-Stufen es erfüllt.

Technische Details

  • Es berechnet das Kontrastverhältnis nach WCAG 2.x aus der relativen Leuchtdichte beider Farben, von 1:1 (gleich) bis 21:1 (Schwarz auf Weiß).
  • Schwellen: AA verlangt 4,5:1 für normalen und 3:1 für großen Text; AAA 7:1 bzw. 4,5:1. Großer Text ist 24 px oder mehr bzw. fett ab 18,66 px.
  • Verglichen wird der ungerundete Wert, wie es die Norm verlangt: Grau #767676 auf Weiß ergibt 4,54:1 und besteht AA; #777777 ergibt 4,48:1 und besteht nicht, obwohl beide ähnlich aussehen.
  • Transparenzen, Verläufe und Text auf Bildern werden nicht bewertet: Prüfen Sie das tatsächlich sichtbare Farbpaar.

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).

Ähnliche Tools

← Farben & Design