Kontrastprüfer

Prüfen Sie Farbkontrastverhältnisse für WCAG AA/AAA-Barrierefreiheit. Kostenlos, sofort, funktioniert offline.

Large Text
Normal text sample for contrast testing
Small / UI text sample
--
Contrast Ratio
--
AA Normal (4.5:1)
--
AA Large (3:1)
--
AAA Normal (7:1)
--
AAA Large (4.5:1)

About WCAG Contrast

WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios for text to be readable:

LevelNormal TextLarge Text (≥18px or bold ≥14px)
AA4.5:13:1
AAA7:14.5:1

Contrast ratio ranges from 1:1 (same colors) to 21:1 (black on white). Higher = better readability.

About Contrast Checker

Prüfen Sie Farbkontrastverhältnisse für die WCAG-Barrierefreiheit. Testen Sie Text- und Hintergrundfarben. Sehen Sie AA- und AAA-Bewertungen für normalen und großen Text. Unverzichtbar für Webdesigner und Entwickler, die barrierefreie Schnittstellen erstellen.

WCAG-Konformität

Prüft gegen WCAG 2.1 AA- und AAA-Standards. Erfahren Sie sofort, ob Ihre Farbkombination die Barrierefreiheitsanforderungen erfüllt.

Live-Vorschau

Sehen Sie Ihren Text auf dem Hintergrund in Echtzeit. Passen Sie Farben mit Schiebereglern an oder geben Sie HEX/RGB-Werte direkt ein.

Normaler & großer Text

Getrennte Bewertungen für Fließtext und großen Text/Überschriften. Unterschiedliche Schwellenwerte für beide – klar dargestellt.

Farbvorschläge

Erhalten Sie hellere/dunklere Vorschläge, die die Kontrastanforderungen erfüllen. Finden Sie sofort barrierefreie Alternativen.

📋 Common Use Cases

Web-Barrierefreiheit

Überprüfen Sie, ob Ihre Text- und Hintergrundfarben den WCAG AA/AAA-Kontrastrichtlinien für lesbare, barrierefreie Websites entsprechen.

Design-Review

Prüfen Sie Farbkombinationen in UI-Designs, Schaltflächen und Typografie, bevor Sie sie an Benutzer ausliefern.

Markenfarben wählen

Bestätigen Sie, dass Ihre Markenfarben auf hellen und dunklen Flächen ausreichenden Kontrast bieten.

Dokument- & Folien-Design

Stellen Sie sicher, dass Text in Dokumenten, Präsentationen und PDFs für alle Zielgruppen lesbar ist.

🪜 How to Use This Tool

  1. Farben eingeben
    Wählen oder fügen Sie eine Textfarbe (Vordergrund) und eine Hintergrundfarbe ein.
  2. Verhältnis anzeigen
    Das Tool berechnet das Kontrastverhältnis und zeigt das Ergebnis sofort an.
  3. Bewertung prüfen
    Sehen Sie, ob die Kombination die WCAG AA- oder AAA-Richtlinien für normalen und großen Text erfüllt.
  4. Bei Bedarf anpassen
    Passen Sie die Farben an, bis Sie Ihre Ziel-Barrierefreiheitsstufe erreichen.

📚 Related Guides

Frequently Asked Questions

Ist dieses Farbtool kostenlos?▼
Ja. Alle Farbtools sind völlig kostenlos. Keine Anmeldung erforderlich.
Wie funktioniert der Kontrastprüfer?▼
Er berechnet WCAG-2.1-Kontrastverhältnisse zwischen Vordergrund- und Hintergrundfarben und zeigt Bestehen/Nichtbestehen für AA und AAA bei normalen und großen Textgrößen an.