The quick brown fox
Small text sample — 14px regular weight

Über dieses Tool

Der Kontrast Checker berechnet das Kontrastverhältnis nach WCAG 2.1 zwischen einer Text- und einer Hintergrundfarbe und zeigt, ob die Kombination AA und AAA für normalen und großen Text besteht.

So funktioniert’s

  1. Gib die Textfarbe ein oder wähle sie aus.
  2. Gib die Hintergrundfarbe ein oder wähle sie aus (Hex-Werte funktionieren, auch die 3-stellige Kurzform).
  3. Lies das Kontrastverhältnis und die AA-/AAA-Ergebnisse für normalen und großen Text ab.
  4. Passe eine der Farben an, bis die benötigte Stufe bestanden ist.

Gut zu wissen

  • WCAG 2.1 AA verlangt ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text und 3:1 für großen Text.
  • WCAG 2.1 AAA verlangt mindestens 7:1 für normalen Text und 4.5:1 für großen Text.
  • Großer Text bedeutet mindestens 18 pt (24 px) in normaler Stärke oder 14 pt (etwa 18.66 px) fett.
  • Kontrastverhältnisse reichen von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß).
  • Das Verhältnis wird gemäß der WCAG-Formel aus der relativen Leuchtdichte jeder Farbe berechnet.

Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.

Häufige Fragen

Welches Kontrastverhältnis ist für Barrierefreiheit erforderlich?

Für WCAG 2.1 Stufe AA braucht normaler Text mindestens 4.5:1 und großer Text mindestens 3:1. Stufe AAA erhöht dies auf 7:1 bzw. 4.5:1.

Ist weißer Text auf Grün barrierefrei?

Das hängt vom Farbton ab. Viele helle Grüntöne fallen mit weißem Text bei AA durch; dunklere Grüntöne bestehen meist. Gib deine genauen Hex-Werte ein, um es zu prüfen.

Was gilt in WCAG als großer Text?

Text mit mindestens 18 Punkt (24 px) in normaler Stärke oder mindestens 14 Punkt (etwa 18.66 px) in Fett.

Gilt der WCAG-Kontrast auch für Buttons und Icons?

Das WCAG-2.1-Erfolgskriterium 1.4.11 verlangt für Bedienelemente und bedeutungstragende Grafiken einen Kontrast von mindestens 3:1 zu ihrer Umgebung.