Kostenloses Tool

Kontrast-Checker

Mit diesem kostenlosen Kontrast-Checker sehen Sie, ob Ihre Textfarbe auf Ihrer Hintergrundfarbe gut lesbar ist. Geben Sie zwei Farben ein und Sie erhalten das Kontrastverhältnis sowie das Ergebnis für WCAG 2.2 Stufe AA und AAA, für normalen Text, großen Text und Buttons.

Kostenlos, ohne Konto

Wie viel Kontrast braucht mein Text?

Nach WCAG 2.2 Stufe AA braucht normaler Text ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text mindestens 3:1. Buttons, Icons und Formularränder brauchen ebenfalls 3:1 gegenüber den angrenzenden Farben. Es wird nicht gerundet, 4,49:1 reicht für normalen Text also nicht.

Was der Kontrast-Checker berechnet

Der Checker vergleicht die relative Helligkeit der beiden Farben, wie sie in WCAG definiert ist, und gibt ein Verhältnis zwischen 1:1 (kein Kontrast) und 21:1 (Schwarz auf Weiß) aus. Dann prüft er das Verhältnis gegen fünf Grenzwerte und zeigt eine Live-Vorschau mit Überschrift und Fließtext in Ihren Farben.
  • AA, normaler Text: mindestens 4,5:1
  • AA, großer Text: mindestens 3:1
  • AAA, normaler Text: mindestens 7:1
  • AAA, großer Text: mindestens 4,5:1
  • Buttons, Icons und Formularränder: mindestens 3:1

So lesen Sie das Ergebnis

Grün bedeutet, dass das Farbpaar für allen Text Stufe AA erfüllt. Sie können es für Fließtext, Menüs und Buttons verwenden. Orange bedeutet ein Verhältnis zwischen 3:1 und 4,5:1. Das reicht nur für großen Text: mindestens 18 Punkt (etwa 24 Pixel) oder 14 Punkt fett (etwa 18,5 Pixel). Nutzen Sie es für große Überschriften, nicht für Absätze, Preise oder Formularbeschriftungen. Rot bedeutet ein Verhältnis unter 3:1. Text in diesen Farben ist für viele Menschen schwer lesbar, besonders auf dem Smartphone in der Sonne. Machen Sie eine Farbe dunkler oder die andere heller, bis das Ergebnis grün wird.

Häufige Fehler beim Kontrast

  • Hellgrauer Fließtext auf Weiß, weil es ruhig wirkt
  • Weißer Text auf einer hellen Markenfarbe wie Gelb, Hellgrün oder Orange
  • Platzhaltertext in Formularfeldern als einzige Beschriftung
  • Text auf einem Foto ohne dunkle Überlagerung
  • Button-Ränder und Icons, die im Hintergrund verschwinden
  • Die Annahme, Markenrichtlinien seien eine Ausnahme: nur Logos sind ausgenommen

Wie es weitergeht

Prüfen Sie die Farben, die Ihre Website tatsächlich nutzt: Fließtext, Links, Buttons, Preise, Formularfelder und den Footer. Fällt eine Markenfarbe durch, müssen Sie sie nicht streichen. Nutzen Sie sie als Hintergrund großer Flächen mit dunklem Text darauf, oder verwenden Sie einen dunkleren Ton derselben Farbe für Text und Buttons. Sehen Sie sich die Seite nach der Änderung noch einmal draußen auf dem Smartphone an. Guter Kontrast hilft allen Besuchern, nicht nur Menschen mit eingeschränktem Sehvermögen.

Seit dem 28. Juni 2025 müssen viele Onlineshops und Online-Dienste in der EU nach dem European Accessibility Act (in Deutschland das Barrierefreiheitsstärkungsgesetz) Anforderungen an die Barrierefreiheit erfüllen, die auf WCAG Stufe AA verweisen. Zu wenig Kontrast ist eine der häufigsten Lücken.

So nutzen Sie den Kontrast-Checker

  1. Textfarbe eingeben

    Wählen Sie sie mit dem Farbwähler oder tippen Sie einen Hex-Code wie #1e3346.

  2. Hintergrundfarbe eingeben

    Nehmen Sie die Farbe direkt hinter dem Text oder Button. Tauschen Sie die Farben bei Bedarf mit einem Klick.

  3. Verhältnis und Prüfungen lesen

    Sehen Sie das Verhältnis und welche AA- und AAA-Stufen für normalen Text, großen Text und Buttons erfüllt sind.

  4. Anpassen, bis es passt

    Machen Sie die dunkle Farbe dunkler oder die helle heller und beobachten Sie die Vorschau, bis Sie Grün sehen.

Fragen zum Farbkontrast

Was ist ein gutes Kontrastverhältnis?
Für normalen Text sollten Sie mindestens 4,5:1 anstreben, das ist WCAG Stufe AA. Ab 7:1 erfüllen Sie Stufe AAA. Schwarz auf Weiß ist mit 21:1 das Maximum.
Was gilt als großer Text?
WCAG definiert großen Text als mindestens 18 Punkt, etwa 24 CSS-Pixel, oder mindestens 14 Punkt fett, etwa 18,5 Pixel.
Müssen Logos die Kontrastregeln erfüllen?
Nein. Text, der Teil eines Logos oder Markennamens ist, hat keine Kontrastanforderung, ebenso deaktivierte Bedienelemente und rein dekorativer Text.
Muss mein Onlineshop diese Regeln erfüllen?
Seit dem 28. Juni 2025 gilt der European Accessibility Act für viele Onlineshops und Dienste in der EU, in Deutschland umgesetzt durch das Barrierefreiheitsstärkungsgesetz. Er verweist auf WCAG Stufe AA. Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen. Prüfen Sie, was in Ihrem Fall gilt.
Ist AAA Pflicht?
Unseres Wissens schreibt kein Gesetz AAA für eine ganze Website vor. AA ist das übliche Ziel. AAA ist ein guter zusätzlicher Schritt für lange Texte und für ein Publikum mit vielen älteren Besuchern.

Passende Tools und Ratgeber

Eine Website in Ihren Farben, die lesbar bleibt

SitePack-Themes folgen Ihren eigenen Markenfarben. Erstellen Sie Ihre Website ab 15 € pro Monat bei jährlicher Abrechnung, mit EU-Hosting und SSL inklusive. Testen Sie 14 Tage kostenlos, ohne Zahlungsdaten.

14 Tage kostenlos testen Preise ansehen
Cookie-Einstellungen

Cookies helfen uns, unsere Produkte und Dienstleistungen bereitzustellen, zu schützen und zu verbessern. Durch die Nutzung unserer Website stimmen Sie der Verwendung von Cookies zu.