Farbkontrast-Rechner

• Sofortige Kontrastverhältnis-Berechnung: Berechnen Sie das WCAG-Kontrastverhältnis zwischen zwei Farben sofort während der Eingabe. Unser Rechner aktualisiert in Echtzeit – ohne Tastendruck – damit Sie ohne Unterbrechung an Ihrer Palette arbeiten können.
• Sicherer Online-Kontrastrechner: Alle Berechnungen erfolgen lokal in Ihrem Browser. Ihre Farbwerte verlassen niemals Ihr Gerät – 100 % Privatsphäre bei der Nutzung unseres Online-Rechners.
• Farbkontrast-Rechner – ohne Installation: Nutzen Sie unseren Rechner direkt in jedem Browser, ohne Downloads, Plugins oder Designsoftware. Prüfen Sie die WCAG-Konformität von jedem Gerät aus sofort.
• Vollständige WCAG-2.1-AA- und AAA-Konformitätsprüfung: Erhalten Sie sofortige Bestanden/Nicht-bestanden-Ergebnisse für die WCAG-2.1-Level AA und AAA bei normalem Text, großem Text und UI-Komponenten. Mit Live-Textvorschau.

• Web-Barrierefreiheit: Designer und Entwickler nutzen den Rechner, um sicherzustellen, dass ihre Websites vor dem Launch die WCAG-2.1-AA-Anforderungen erfüllen. Frühes Erkennen von Kontrastfehlern vermeidet teure Audits und rechtliche Probleme.
• Auswahl von UI- und Markenfarben: Prüfen Sie beim Aufbau eines Designsystems oder einer Markenpalette jede Vordergrund-/Hintergrundkombination auf WCAG-Konformität. Finden Sie den minimalen Farbton einer Markenfarbe, der den AA-Kontrast auf hellem oder dunklem Hintergrund besteht.
• Button- und CTA-Design: Call-to-Action-Buttons müssen das 3:1-Kontrastverhältnis für UI-Komponenten nach WCAG 2.1 erfüllen. Testen Sie die Button-Textfarbe gegen den Button-Hintergrund vor dem Produktivgang.
• Dunkelmodus-Paletten: Der Dunkelmodus bringt neue Kontrastherausforderungen – Farben, die auf hellem Hintergrund bestehen, scheitern oft auf dunklem. Prüfen Sie jedes Text-/Hintergrundpaar in hellen und dunklen Themes.
• Barrierefreiheit von Formularen und Eingaben: Platzhaltertext, Beschriftungen, Hilfetexte und Fehlermeldungen benötigen ausreichenden Kontrast. Prüfen Sie jedes Textelement gegen seinen Hintergrund für sehbeeinträchtigte Nutzer.
• Datenvisualisierung und Diagramme: Diagrammbeschriftungen, Legendentexte und Datenpunkt-Annotationen müssen gegen Diagrammhintergründe lesbar sein. Prüfen Sie, ob Ihre Visualisierungsfarben die Barrierefreiheitsstandards erfüllen.

Das Farbkontrastverhältnis ist ein numerisches Maß für den Unterschied der wahrgenommenen Luminanz zwischen zwei Farben – typischerweise einer Vordergrund- (Text-) und einer Hintergrundfarbe. Es ist in den Web Content Accessibility Guidelines (WCAG) definiert und reicht von 1:1 (kein Kontrast – identische Farben) bis 21:1 (maximaler Kontrast – reines Schwarz auf reinem Weiß). Das Verhältnis wird aus der relativen Luminanz jeder Farbe berechnet, die die nichtlineare Wahrnehmung von Helligkeit durch das menschliche Auge berücksichtigt. Unser Rechner implementiert die exakte WCAG-2.1-Formel, sodass Sie dasselbe Ergebnis wie mit jedem offiziellen Barrierefreiheits-Audit-Tool erhalten.

1. 1. Farben eingeben: Geben Sie eine Farbe im HEX- (#rrggbb), RGB- (rgb(r,g,b)) oder HSL-Format (hsl(h,s%,l%)) in die Vordergrund- und Hintergrundfelder ein oder klicken Sie auf das Farbfeld für den nativen Farbwähler. Der Rechner akzeptiert auch Kurz-HEX (#rgb) und Alpha-Varianten. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser.
2. 2. Sofortige Echtzeit-Berechnung: Das Kontrastverhältnis aktualisiert sofort während der Eingabe – kein Tastendruck nötig. Der Rechner wandelt jede Farbe über die WCAG-sRGB-Linearisierungsformel in relative Luminanz um und berechnet das Verhältnis als (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und L2 die dunklere Luminanz ist.
3. 3. WCAG-Konformität prüfen: Das Ergebnispanel zeigt den Bestanden/Nicht-bestanden-Status für WCAG 2.1 AA und AAA in drei Kontexten: normaler Text, großer Text und UI-Komponenten. Eine Live-Textvorschau zeigt, wie die Farbkombination in verschiedenen Textgrößen aussieht.

• AA - Normaler Text (4,5:1): Das Mindestkontrastverhältnis für Fließtext, Beschriftungen und jeden Text unter 18pt (oder 14pt fett). Dies ist die Standardanforderung für WCAG 2.1 Level AA, die rechtliche Basis in den meisten Rechtsordnungen.
• AA - Großer Text (3:1): Großer Text ist als 18pt (24px) oder größer bzw. 14pt (etwa 18,67px) fett oder größer definiert. Er benötigt ein niedrigeres Mindestverhältnis, da er bei geringerem Kontrast leichter zu lesen ist.
• AA - UI-Komponenten (3:1): Grafische Objekte und UI-Komponenten wie Formularfelder, Buttons, Fokusindikatoren und Symbole müssen nach WCAG 2.1 Erfolgskriterium 1.4.11 ein Kontrastverhältnis von 3:1 gegenüber angrenzenden Farben haben.
• AAA - Erhöht (7:1): WCAG Level AAA verlangt 7:1 für normalen Text und 4,5:1 für großen Text. AAA-Konformität wird für kritische Inhalte (rechtliche Dokumente, medizinische Informationen, Behördendienste) empfohlen, ist aber nicht für die allgemeine Web-Konformität erforderlich.

Die WCAG-Kontrastformel gilt nur für undurchsichtige Farben – halbtransparente Farben müssen gegen ihren tatsächlich gerenderten Hintergrund bewertet werden. Die Formel berücksichtigt auch nicht Schriftrendering, Kantenglättung oder Display-Kalibrierung, die den wahrgenommenen Kontrast in der Praxis beeinflussen können. Zudem gelten WCAG-Kontrastanforderungen nicht für dekorativen Text, Text als Teil eines Logos oder Text in inaktiven UI-Komponenten. Testen Sie Ihre Designs immer zusätzlich zur automatisierten Kontrastprüfung mit echten Nutzern und assistiven Technologien.