Startseite
Farb-Werkzeuge
Kontrastverhältnis-Prüfer

WCAG-Kontrastverhältnis-Prüfer Überprüfen Sie die Kontrastverhältnisse von WCAG zwischen Vordergrund- und Hintergrundfarben.

🎨

Kontrastverhältnis-Prüfer

Überprüfen Sie die Kontrastverhältnisse von WCAG zwischen Vordergrund- und Hintergrundfarben.

Farben festlegen

Geben Sie die Vordergrund- (Text-) und Hintergrundfarben ein.

Überprüfen der Konformität

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

Anpassen und vertauschen

Passen Sie die Farben an, bis Sie Ihr Zielkonformitätsniveau erreicht haben.

Loading tool...

What Is Kontrastverhältnis-Prüfer?

Ein WCAG-Kontrastverhältnis-Prüfer bewertet die Zugänglichkeit von Farbkombinationen, indem das Kontrastverhältnis zwischen Vordergrund- (Text-) und Hintergrundfarben gemäß den Web Content Accessibility Guidelines (WCAG) 2.1 berechnet wird. Das Tool berechnet das luminanzbasierte Kontrastverhältnis und testet es anhand von vier WCAG-Schwellenwerten: AA für normalen Text (≥4,5:1), AA für großen Text (≥3,0:1), AAA für normalen Text (≥7,0:1) und AAA für großen Text (≥4,5:1). Das Erreichen dieser Schwellenwerte stellt sicher, dass der Text für Benutzer mit verschiedenen Arten von Sehbeeinträchtigungen, einschließlich niedriger Sehschärfe und Farbenblindheit, lesbar ist. Das Tool bietet eine Live-Vorschau des Textes, die zeigt, wie Ihre Farbkombination tatsächlich in verschiedenen Größen aussieht, zusammen mit klaren Bestätigungs-/Ablehnungshinweisen für jedes WCAG-Niveau. Dies ist ein unverzichtbares Tool für jeden Webentwickler oder Designer, der sich für die Erstellung zugänglicher und inklusiver digitaler Erfahrungen einsetzt.

Why Use Kontrastverhältnis-Prüfer?

Sofortige WCAG AA- und AAA-Konformitätsprüfung
Visuelle Textvorschau in verschiedenen Größen zeigt die Lesbarkeit in der realen Welt
Klare Bestätigungs-/Ablehnungshinweise mit erforderlichen Verhältnisschwellenwerten
Vertauschen-Schaltfläche zum schnellen Testen von umgekehrten Farbkombinationen
Testet vier Konformitätsstufen: AA/AAA für normalen und großen Text

Common Use Cases

Web-Zugänglichkeit

Überprüfen Sie, ob Text-/Hintergrundkombinationen die Anforderungen von WCAG 2.1 für ADA- und AODA-Konformität erfüllen.

Designsystem-Audit

Testen Sie alle Farbkombinationen in einem Designsystem auf Zugänglichkeitskonformität.

Markenfarben-Bewertung

Überprüfen Sie, ob Markenfarben für Text-/Hintergrundkombinationen verwendet werden können, die die Zugänglichkeitsstandards erfüllen.

Rechtliche Konformität

Stellen Sie sicher, dass digitale Inhalte den Zugänglichkeitsgesetzen entsprechen, die auf WCAG-Kriterien verweisen.

Technical Guide

Das Kontrastverhältnis wird mithilfe der WCAG-2.1-Formel für relative Luminanz berechnet. Zunächst werden die Farbkanäle linearisiert: wenn sRGB ≤ 0,03928, dann ist linear = sRGB/12,92; ansonsten ist linear = ((sRGB + 0,055)/1,055)^2,4. Die relative Luminanz L = 0,2126×R + 0,7152×G + 0,0722×B. Das Kontrastverhältnis = (L_heller + 0,05) / (L_dunkler + 0,05). Das Verhältnis reicht von 1:1 (kein Kontrast, gleiche Farbe) bis 21:1 (Schwarz auf Weiß). WCAG 2.1 definiert vier Schwellenwerte: Level AA erfordert ≥4,5:1 für normalen Text (<18pt oder <14pt fett) und ≥3:1 für großen Text (≥18pt oder ≥14pt fett). Level AAA erfordert ≥7:1 für normalen Text und ≥4,5:1 für großen Text. Diese Schwellenwerte basieren auf Forschungsergebnissen zur Sehschärfe und stellen sicher, dass der Text für Benutzer mit 20/40-Sehschärfe oder mäßiger niedriger Sehschärfe lesbar ist.

Tips & Best Practices

1
Achten Sie auf ein Mindestkontrastverhältnis von 4,5:1 für Fließtext - dies ist das Minimum für WCAG AA
2
Großer Text (18px+ oder 14px+ fett) hat eine geringere Anforderung von 3:1 für AA
3
AAA-Konformität (7:1) gewährleistet die Lesbarkeit für Benutzer mit schweren Sehbehinderungen
4
Verwenden Sie die Vertauschen-Schaltfläche, um zu testen, ob Ihre Farben in beiden Orientierungen gut funktionieren
5
Dunkelmodus-Designs benötigen dieselben Kontrastverhältnisse - testen Sie beide Modi

Related Tools

HEX zu RGB Konverter

Konvertieren Sie HEX-Farbcodes in RGB-Werte sofort mit einer Live-Vorschau.

🎨 Color Tools

Farbpicker

Interaktiver Farbpicker mit HEX-, RGB-, HSL- und CMYK-Ausgaben.

🎨 Color Tools

Farbnuancen-Generator

Erstellen Sie dunklere Nuancen einer beliebigen Farbe mit anpassbarer Schrittanzahl.

🎨 Color Tools

Erreichbare Farbpalette-Generator

Generieren Sie Farbpaletten, die die Kontrastanforderungen der WCAG erfüllen.

🎨 Color Tools

Farbsehfehler-Simulator

Simulieren Sie, wie Farben für Menschen mit verschiedenen Arten von Farbsehschwäche erscheinen.

🎨 Color Tools

Frequently Asked Questions

Q Was ist das WCAG-Kontrastverhältnis?

Es handelt sich um eine numerische Messung (1:1 bis 21:1) der Helligkeitsdifferenz zwischen zwei Farben. WCAG legt Mindestverhältnisse fest, um die Textlesbarkeit für Menschen mit Sehbehinderungen zu gewährleisten.

Q Was ist der Unterschied zwischen AA und AAA?

AA ist der Mindestzugänglichkeitsstandard (4,5:1 für normalen Text). AAA ist die erweiterte Zugänglichkeit (7:1 für normalen Text). Die meisten Vorschriften verlangen AA; AAA ist eine bewährte Praxis.

Q Was gilt als großer Text?

WCAG definiert großen Text als 18 Punkt (24 px) oder größer für normales Gewicht oder 14 Punkt (18,67 px) oder größer für fettes Gewicht. Großer Text hat geringere Kontrastanforderungen.

Q Wird die Zugänglichkeit allein durch Farben bestimmt?

Nein. Das Kontrastverhältnis ist nur ein Faktor. Stellen Sie sicher, dass Farbe nicht das einzige Mittel zur Übermittlung von Informationen ist (verwenden Sie auch Symbole, Muster und Beschriftungen) und testen Sie mit Farbblindheitssimulationen.

About This Tool

Kontrastverhältnis-Prüfer is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.