Farbkontrastprüfer

Kostenloser WCAG-Farbkontrastprüfer. Testen Sie Text- und Hintergrundfarben mit einem Live-Kontrastverhältnis und einer Vorschau in Hex oder RGB auf die Einhaltung der AA- und AAA-Barrierefreiheit.

Gebaut und gewartet von Shehzad Munir ·

Farbkontrastprüfer
Loading Loading Contrast Checker
Share

Machen Sie Ihren Text für jedermann lesbar

Überprüfen Sie das Kontrastverhältnis zwischen Text und Hintergrundfarbe anhand der WCAG AA- und AAA-Standards mit einer Live-Vorschau und Hex- oder RGB-Eingabe.

Text mit geringem Kontrast ist einer der häufigsten Fehler bei der Barrierefreiheit. Dieser Prüfer berechnet das genaue Kontrastverhältnis zwischen Ihren Text- und Hintergrundfarben mithilfe der offiziellen WCAG-Formel für die relative Leuchtdichte und sagt Ihnen dann, ob es AA (4,5:1 für normalen Text, 3:1 für großen Text) und das strengere AAA (7:1 und 4,5:1) erfüllt. Eine Live-Vorschau zeigt echten Text in den von Ihnen gewählten Farben.

Merkmale

  • WCAG AA- und AAA-Ergebnisse für bestanden/nicht bestanden
  • Live-Berechnung des Kontrastverhältnisses
  • Hex- und RGB-Eingabe mit Farbwählern
  • Live-Textvorschau Ihrer Farben
  • Schwellenwerte für normale und große Texte
  • Läuft lokal in Ihrem Browser

So verwenden Sie Farbkontrastprüfer

  1. 1

    Wählen Sie die Textfarbe

    Wählen Sie die Vordergrundfarbe aus oder geben Sie sie ein.

  2. 2

    Wählen Sie den Hintergrund

    Wählen Sie die Hintergrundfarbe aus oder geben Sie sie ein.

  3. 3

    Lesen Sie das Verhältnis

    Sehen Sie sich das Kontrastverhältnis und die AA/AAA-Ergebnisse an.

  4. 4

    Anpassen

    Optimieren Sie die Farben, bis sie vergehen.

Häufige Anwendungsfälle

  • Stellen Sie sicher, dass der UI-Text der WCAG-Barrierefreiheit entspricht
  • Überprüfen Sie den Tasten- und Linkkontrast
  • Prüfen Sie die Farbpalette einer Marke
  • Korrigieren Sie kontrastarme Marketingtexte

Detaillierte Anleitung

Geben Sie die Farben nach Ihren Wünschen ein

Verwenden Sie die Farbauswahl oder geben Sie Hex-Codes und rgb()-Werte direkt ein, das Tool analysiert beides. Wenn Sie eine der Farben anpassen, werden das Verhältnis und die Pass/Fail-Abzeichen sofort aktualisiert, sodass Sie einen Farbton anpassen können, bis er den Anforderungen entspricht. Alles läuft lokal und ist somit ein schneller Begleiter beim Entwerfen von Benutzeroberflächen, Themes und Marketingseiten.

Was die WCAG-Kontraststufen bedeuten

WCAG 2 misst den Kontrast als Verhältnis von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß). Stufe AA, die übliche Rechts- und Branchengrundlinie, erfordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text, also 24 Pixel normal oder etwa 18,66 Pixel fett und höher. Level AAA erhöht diese auf 7:1 und 4,5:1. Teile der Benutzeroberfläche wie Eingaberahmen, Fokusringe und bedeutungstragende Symbole müssen mindestens im Verhältnis 3:1 zu ihrer Umgebung stehen. Das Verhältnis wird aus der relativen Leuchtdichte jeder Farbe berechnet, sodass zwei Farben, die unterschiedlich aussehen, immer noch fehlschlagen können, wenn sie gleich hell sind, was bei Rot auf Grün häufig der Fall ist.

Behebung eines fehlerhaften Farbpaars

Wenn ein Paar fehlschlägt, ändern Sie die Helligkeit statt des Farbtons: Verdunkeln Sie den Text oder hellen Sie den Hintergrund in kleinen Schritten auf, bis das Verhältnis stimmt und die Farbe immer noch wie Ihre Marke wirkt. Markenfarben in Mitteltönen, wie etwa mittleres Orange oder Blaugrün, können bei AA häufig keinen weißen Text darstellen. Verwenden Sie in diesem Fall die Markenfarbe für große Überschriften, Ränder oder Hintergründe und setzen Sie den Fließtext in einem dunkleren Farbton. Testen Sie auch Platzhaltertext und deaktivierte Zustände, da diese oft zu schwach sind. Denken Sie daran, dass das Verhältnis dünne Schriftarten oder Text auf Bildern nicht berücksichtigt. Lassen Sie daher in diesen Fällen einen zusätzlichen Rand.

Häufig gestellte Fragen

Welches Kontrastverhältnis benötige ich, um die WCAG zu bestehen?

Für AA benötigt normaler Text 4,5:1 und großer Text 3:1. Für das strengere AAA benötigt normaler Text 7:1 und großer Text 4,5:1. Großer Text ist etwa 18pt bzw. 14pt fett.

Wie wird das Kontrastverhältnis berechnet?

Es verwendet die WCAG-Formel für die relative Leuchtdichte für beide Farben und dividiert dann die hellere Leuchtdichte (plus 0,05) durch die dunklere (plus 0,05), was einen Wert von 1:1 bis 21:1 ergibt.

Kann ich sowohl RGB als auch Hex eingeben?

Ja: Geben Sie Hex-Codes wie #1e293b oder rgb(30, 41, 59) ein oder verwenden Sie die Farbauswahl. Beide Formate werden sofort analysiert.

Ist es kostenlos?

Ja, völlig kostenlos, ohne Anmeldung, läuft vollständig in Ihrem Browser.

Wie überprüfe ich, ob zwei Farben zusammen zugänglich sind?

Geben Sie die Hex-Werte für Text und Hintergrund ein. Der Prüfer berechnet das Kontrastverhältnis und zeigt an, ob es WCAG AA und AAA für normalen und großen Text erfüllt.

Warum ist der Farbkontrast für die Barrierefreiheit wichtig?

Ein geringer Kontrast macht den Text für Menschen mit Sehbehinderung oder Farbenblindheit schwer lesbar. Die Einhaltung der WCAG-Verhältnisse sorgt dafür, dass Inhalte für jedermann lesbar bleiben, und ist eine allgemeine Anforderung an Barrierefreiheit und SEO.

Aus dem Tagebuch

All articles →
How to Remove EXIF Metadata From Your PhotosTool Guides

How to Remove EXIF Metadata From Your Photos

Photos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.

SM
Shehzad Munir
Aug 19, 2026 · 3 min
What Is CPS? How to Test and Improve Your Click SpeedTool Guides

What Is CPS? How to Test and Improve Your Click Speed

CPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.

SM
Shehzad Munir
Aug 17, 2026 · 3 min
How to Merge PDF Files for Free (Without Uploading Them)Tool Guides

How to Merge PDF Files for Free (Without Uploading Them)

Combine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.

SM
Shehzad Munir
Aug 14, 2026 · 2 min