Farbkontrast-Prüfer (WCAG AA/AAA)

• Sofortige WCAG-Kontrastberechnung: Der Farbkontrast-Prüfer berechnet das WCAG-Kontrastverhältnis und alle Bestanden/Nicht-bestanden-Ergebnisse bei jedem Tastendruck. Kein Button zum Anklicken – gib deine Farben ein und sieh die Ergebnisse sofort.
• Sicher und 100 % privat: Alle Kontrastberechnungen laufen vollständig in deinem Browser mit der WCAG-2.1-Formel für relative Leuchtdichte. Es werden niemals Farbdaten an einen Server gesendet.
• Vollständige WCAG-2.1-Abdeckung – AA und AAA: Prüft alle relevanten WCAG-2.1-Kriterien: AA und AAA für normalen Text, AA und AAA für großen Text sowie AA für UI-Komponenten (SC 1.4.11). Enthält eine Live-Vorschau, die zeigt, wie deine Farben bei jeder Textgröße aussehen.
• 100 % kostenlos – keine Anmeldung nötig: Völlig kostenlos, ohne Konto, ohne Premium-Stufe, ohne Nutzungslimits und ohne Werbung, die die Oberfläche blockiert. Prüfe den Farbkontrast so oft du möchtest.

• Webentwicklung und UI-Design: Frontend-Entwickler und UI-Designer nutzen den Farbkontrast-Prüfer, um vor dem Deployment zu prüfen, ob Text- und Hintergrundfarbkombinationen die WCAG-AA-Anforderungen erfüllen. Früh erkannte Kontrastfehler ersparen teure Barrierefreiheits-Nachbesserungen.
• Validierung von Markenfarben: Designer nutzen den Farbkontrast-Prüfer, um zu prüfen, ob Markenfarben als Text auf Hintergründen die Barrierefreiheitsstandards erfüllen. Viele Markenpaletten scheitern an WCAG AA – der Prüfer zeigt, welche Kombinationen sicher sind.
• E-Commerce und Produktseiten: E-Commerce-Teams nutzen den Farbkontrast-Prüfer, um sicherzustellen, dass Produktbeschreibungen, Preise und Call-to-Action-Buttons die WCAG-AA-Kontrastanforderungen erfüllen – das verbessert die Lesbarkeit für alle Nutzer, auch für Menschen mit Sehbeeinträchtigung.
• Dokument- und Präsentationsdesign: Content-Ersteller und Präsentationsdesigner nutzen den Farbkontrast-Prüfer, um zu prüfen, ob Folientext, Diagrammbeschriftungen und Infografik-Texte vor den gewählten Hintergründen lesbar sind.
• Design mobiler Apps: Designer mobiler Apps nutzen den Farbkontrast-Prüfer, um sicherzustellen, dass UI-Elemente die WCAG-AA-Anforderungen sowohl in hellen als auch in dunklen Themes erfüllen – entscheidend für Nutzer mit Sehbehinderung auf kleinen Bildschirmen.
• Barrierefreiheits-Audits und Konformität: Barrierefreiheits-Berater und QA-Teams nutzen den Farbkontrast-Prüfer als schnelles Ersteinstufungswerkzeug bei WCAG-Audits. Er erkennt Kontrastfehler, die vor formellen Tests mit Hilfstechnologien behoben werden müssen.

WCAG-Farbkontrast bezeichnet das von den Web Content Accessibility Guidelines (WCAG) geforderte Mindestkontrastverhältnis zwischen Vordergrund- (Text) und Hintergrundfarben, damit Inhalte von Menschen mit Sehbeeinträchtigung oder Farbsehschwäche gelesen werden können. Das Kontrastverhältnis wird über die relative Leuchtdichte jeder Farbe berechnet – ein Wert, der aus den linearisierten sRGB-Kanalwerten abgeleitet wird. Die Verhältnisse reichen von 1:1 (kein Kontrast, identische Farben) bis 21:1 (maximaler Kontrast, Schwarz auf Weiß). Unser browserbasierter Farbkontrast-Prüfer berechnet dieses Verhältnis sofort und bewertet es anhand aller relevanten WCAG-2.1-Erfolgskriterien.

1. Gib deine Farben ein: Tippe einen HEX-Wert (z. B. #0066cc ) oder einen RGB-Wert (z. B. rgb(0, 102, 204) ) in die Felder für Vordergrund und Hintergrund ein oder verwende den nativen Farbwähler. Du kannst auch ein voreingestelltes Farbpaar auswählen, um schnell zu starten.
2. Sofortige Berechnung: Der Farbkontrast-Prüfer berechnet die relative WCAG-2.1-Leuchtdichte jeder Farbe und leitet daraus das Kontrastverhältnis ab. Alle Berechnungen laufen lokal in deinem Browser – es werden niemals Farbdaten an einen Server gesendet.
3. Ergebnisse prüfen: Die Ergebnistabelle zeigt den Bestanden/Nicht-bestanden-Status für alle relevanten WCAG-2.1-Kriterien. Die Live-Vorschau zeigt, wie deine Farben bei normalem Text, großem Text und UI-Komponentengrößen aussehen.

• AA – normaler Text (4,5:1): Das Mindestkontrastverhältnis für Fließtext, Beschriftungen und Bildunterschriften unter 18 pt (24 px) normal oder 14 pt (18,67 px) fett. Erforderlich für die Konformität mit WCAG 2.1 Stufe AA.
• AA – großer Text (3:1): Das Mindestkontrastverhältnis für Text ab 18 pt (24 px) normal oder ab 14 pt (18,67 px) fett. Überschriften gelten in der Regel als großer Text.
• AA – UI-Komponenten (3:1): Das Mindestkontrastverhältnis für die visuelle Darstellung von UI-Komponenten (Buttons, Formularfelder, Fokusindikatoren) und grafischen Objekten. Definiert in WCAG 2.1 SC 1.4.11.
• AAA – erweitert (7:1 / 4,5:1): Die erweiterten Kontrastanforderungen für AAA-Konformität – 7:1 für normalen Text und 4,5:1 für großen Text. AAA ist die höchste Stufe und für nicht alle Inhalte verpflichtend.

Der Farbkontrast-Prüfer bewertet Kontrastverhältnisse anhand der mathematischen Schwellenwerte von WCAG 2.1. Das Bestehen der Kontrastprüfung garantiert keine vollständige Barrierefreiheit – WCAG-Konformität erfordert außerdem korrektes semantisches HTML, Tastaturnavigation, Screenreader-Kompatibilität und weitere nicht farbbezogene Faktoren. Zudem berücksichtigt die WCAG-Kontrastformel nicht alle Arten von Farbsehschwäche. Die vollständige Barrierefreiheits-Validierung erfordert manuelle Tests mit Hilfstechnologien (Screenreader, Vergrößerungssoftware) und eine fachkundige Barrierefreiheitsprüfung.