Kontrastprüfer

Überprüfen Sie Farbkontrastverhältnisse gemäß WCAG 2.1. Testen Sie Vorder- und Hintergrundfarbkombinationen auf AA- und AAA-Konformität.

Kontrastverhältnis: 17.85:1
AA Large
AA
AAA
1:13:14.5:17:121:1
Vordergrundfarbe
#0F172A
Hintergrundfarbe
#FFFFFF
Ergebnis
Beispieltext mit diesen Farben
17.85:1
AA Normaler Text✓ AA
AA Großer Text✓ AA
AAA Normaler Text✓ AAA
AAA Großer Text✓ AAA
🛡️Zero server logs. Contrast calculations run 100% locally in your browser. No data ever leaves this tab.
🛠️Entwickler-Werkzeuggürtel
Weitere Image-ToolsApp-Symbol-GeneratorDuplikat-ErkennungBild-Hash-GeneratorBildkonverterPaletten-ExtraktorTransparenter RandBildeditorBild zu Base64PNG-PaletteninspektorBildkompressorBildhistogrammSprite-Sheet-GeneratorPixel-AnalyzerSVG-RasterizerFavicon-GeneratorEXIF-BetrachterPlatzhalter-BildgeneratorBildzuschneiderBildgrößenänderungAlle image Tools anzeigen →

Kontrastprüfer

Der Kontrastprüfer bewertet Farbkombinationen gemäß WCAG 2.1. Alle Berechnungen werden lokal in Ihrem Browser durchgeführt.

🔒 Client-side only⚡ Web Worker processing🌐 Works offline🛡️ Zero server logs

So überprüfen Sie Farbkontraste

  1. Wählen Sie eine Vordergrund- (Text-) Farbe mit dem ersten Farbwähler.
  2. Wählen Sie eine Hintergrundfarbe mit dem zweiten Farbwähler.
  3. Sehen Sie das Kontrastverhältnis und die WCAG-Konformität für AA- und AAA-Stufen.

Häufig gestellte Fragen

Fragen zur Kontrastprüfung? Wir haben Antworten.

Was ist das WCAG-Kontrastverhältnis?

Das WCAG-Kontrastverhältnis misst den Unterschied in der Leuchtdichte zwischen zwei Farben. Es reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß).

Was sind die AA- und AAA-Anforderungen?

AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text. AAA erfordert 7:1 für normalen Text und 4,5:1 für großen Text.

Ist dieses Tool kostenlos und privat?

Ja, absolut. Alle Berechnungen erfolgen sofort in Ihrem Browser. Es werden keine Daten an einen Server gesendet.

Automatisierte E2E-Testsuite-Protokolle

Unsere Buildsysteme validieren Edge-Case-Verarbeitung unter extremen Bedingungen vor jeder Bereitstellung.

Stability
100.0%
Passed
13/13
Env
V8-Sandbox
Engine: Vitest RunnerUpdated: 2026/7/13 03:02:43📦 Testdatensätze herunterladen
PASSPure Function Unit Tests should handle valid color input
PASSPure Function Unit Tests should reject invalid input
PASSPure Function Unit Tests should not mutate original input
PASSPure Function Unit Tests should handle boundary input
PASSContrastCheckerTool should render Input (Foreground/Background) and Result labels
PASSContrastCheckerTool should show contrast ratio
PASSContrastCheckerTool should render privacy strip
PASSContrastCheckerTool should render sample preview text
PASSContrast Checker — WCAG Calculation Tests should calculate contrast ratio synchronously
PASSContrast Checker — WCAG Calculation Tests should return ~21 for black on white
PASSContrast Checker — WCAG Calculation Tests should compute contrast result with compliance flags
PASSContrast Checker — WCAG Calculation Tests should return 1:1 ratio for same colors
PASSContrast Checker — WCAG Calculation Tests should be commutative
⏱️ 0.18ms📦 1.5KB🎚️ Max Nesting: 3🌿 AST Nodes: 48🛡️ V8 Heap: Healthy
$ codecaven-validator --scope=tool● CLUSTER COMPLIANT

Tool-Änderungsprotokoll & Updates

v1.3.02026-06-12
  • Feature: Farbvorschlags-Engine — bei unzureichendem Kontrast findet das Tool automatisch die nächste zugängliche Farbe durch Anpassung der Helligkeit, mit Ein-Klick-Übernahme.
  • Feature: Multi-Format-Farbanzeige — HEX-, RGB-, HSL- und CMYK-Darstellungen mit Umschaltflächen.
  • UX: Interaktive Kontrastskala mit AA/AAA-Schwellenmarkierungen und Echtzeit-Cursor.
  • Fix: Kontrastvorschau im Dunkelmodus korrigiert — statische weiße Hintergründe durch themenbewusste CSS-Variablen ersetzt.
v1.2.02026-06-11
  • Feature: Farbvorschlags-Engine — bei unzureichendem Kontrast findet das Tool automatisch die nächste zugängliche Farbe durch Anpassung der Helligkeit, mit Ein-Klick-Übernahme.
  • Feature: Multi-Format-Farbanzeige — jede Farbe zeigt jetzt HEX-, RGB-, HSL- und CMYK-Darstellungen mit Umschaltflächen.
  • UX: Interaktive Kontrastskala — ein visualisierter Gradientenbalken von 1:1 bis 21:1 mit AA/AAA-Schwellenmarkierungen und einem Echtzeit-Cursor.
  • UX: Mehrere Farbeingabeformate — das Hex-Eingabefeld akzeptiert jetzt HEX-, rgb()- und hsl()-Formate und konvertiert sie automatisch.
  • Fix: Kontrastvorschau im Dunkelmodus korrigiert — statische weiße Hintergründe durch themenbewusste CSS-Variablen ersetzt.
  • Fix: Externe Farbbibliothek entfernt — alle Farbkonvertierungen und Kontrastberechnungen nutzen jetzt reine JavaScript-Implementierungen.
v1.1.02026-06-11
  • Feature: Umfassende Vitest-Testsuite für Tool-Rendering, Worker-Operationen und Shared-Operation-Logik — alle 871 Bild-Tests bestehen.
  • Fix: Korrigierte OffscreenCanvas-Mock-Muster in Tests für korrekte Konstruktor-Instanziierung.
v1.0.02026-06-11
  • Feature: Erstveröffentlichung mit WCAG 2.1 Kontrastverhältnis-Berechnung und AA/AAA-Konformitätsprüfung — 100% clientseitig.
  • UX: Doppelte Farbwähler mit Hex-Eingabefeldern und Live-Kontrastvorschau mit Beispieltext.
  • UX: Echtzeit-AA/AAA-Bestanden/Nicht-Bestanden-Anzeigen für normalen Text, großen Text und UI-Komponenten.
  • Security: Alle Kontrastberechnungen werden lokal durchgeführt — keine Daten werden an einen Server gesendet.