DeutschDE

Kontrast-Checker – Farbkontrast nach WCAG prüfen

Wählen Sie eine Text- und eine Hintergrundfarbe – Kontrastverhältnis und Ergebnisse zur Barrierefreiheit erscheinen sofort.

Ihre Texte und Dateien bleiben in Ihrem Browser – nichts wird an einen Server gesendet.

Kontrastverhältnis-
  • Normaler Text AA (4,5:1)-
  • Normaler Text AAA (7:1)-
  • Großer Text AA (3:1)-
  • Großer Text AAA (4,5:1)-
  • UI-Elemente & Grafiken AA (3:1)-

Großer Text heißt mindestens 24 px, bei fetter Schrift etwa 18,7 px.

Vorschau

So wirkt eine große Überschrift

Fließtext braucht mindestens 4,5:1, damit er sich angenehm lesen lässt. Testen Sie ihn auch auf einem kleinen Bildschirm oder bei hellem Licht.

Kleiner Hinweistext · 13 px

SchaltflächeEingabefeld
Vorgeschlagene Farben, die bestehen
Textfarbe ändern in -
Hintergrund ändern in -

So funktioniert’s

  1. Wählen Sie Text- und Hintergrundfarbe mit den Farbfeldern oder tippen Sie Codes wie #fff oder rgb(…) ein. Halbtransparente Farben werden zuerst mit dem Hintergrund verrechnet.
  2. Sie sehen das Kontrastverhältnis und ob die Stufe AA für normalen Text (4,5:1), großen Text (3:1) und UI-Elemente (3:1) erreicht wird – dazu die strengeren AAA-Stufen.
  3. Fällt eine Prüfung durch, zeigt „Vorgeschlagene Farben, die bestehen“ die nächstgelegene Farbe mit gleichem Farbton, bei der nur die Helligkeit geändert ist. Mit „Übernehmen“ setzen Sie sie ein.
  4. Beide Farben stehen in der Seitenadresse, sodass Sie den Link kopieren und mit Ihrem Team teilen können.

Häufige Fragen

Was bedeuten AA und AAA?

Das sind Konformitätsstufen der Web Content Accessibility Guidelines (WCAG). Normaler Text braucht 4,5:1 für AA und 7:1 für AAA. In Deutschland verweist die BITV 2.0 für öffentliche Stellen über die europäische Norm EN 301 549 auf die WCAG-Stufe AA, und auch das Barrierefreiheitsstärkungsgesetz (BFSG) orientiert sich an den WCAG.

Wie wird das Kontrastverhältnis berechnet?

Das Tool bestimmt die relative Leuchtdichte beider Farben und teilt (hellere + 0,05) durch (dunklere + 0,05). Gleiche Farben ergeben 1:1, Schwarz auf Weiß ergibt 21:1. Das Ergebnis wird abgeschnitten statt gerundet, damit ein Wert knapp unter einer Schwelle nie als bestanden erscheint.

Wann gilt die Regel für UI-Elemente?

Elemente ohne Text wie Rahmen von Schaltflächen, Umrisse von Eingabefeldern und Icons brauchen mindestens 3:1 gegenüber den angrenzenden Farben (WCAG 1.4.11).

Ähnliche Tools

FarbwählerHEX, RGB, HSL und CMYK auf einen BlickFarbskala für Tailwind CSSAus einer Farbe eine Skala von 50 bis 950Farbe aus BildPixelfarben und Palette auslesenASCII-Art-GeneratorText und Fotos als Zeichenkunst

Alle Tools