WCAG-Farbnamen-Finder

• Sofortige WCAG-Konformitätsprüfung: Der WCAG-Farbnamen-Finder bewertet über 250 benannte Farben bei jedem Tastendruck gegen Ihren Hintergrund. Jede Farbe zeigt ihr genaues WCAG-Kontrastverhältnis und ihre Konformitätsstufe (AAA, AA, AA Large oder Nicht bestanden) - kein Knopf zu drücken, kein Neuladen der Seite nötig.
• Über 250 benannte Farben aus 3 Quellen: Enthält alle 148 benannten CSS-Farben, über 50 erweiterte X11-Farbnamen und über 80 Pantone-Näherungen - die breitestmögliche Palette barrierefreier Textfarben zur Auswahl für jede Hintergrundfarbe.
• 100 % privat - kein Upload: Alle Kontrastberechnungen erfolgen lokal in Ihrem Browser. Ihre Farbwerte verlassen niemals Ihr Gerät und werden niemals an einen Server gesendet - sicher für Kundenprojekte und proprietäre Markensysteme.
• Kostenlos & ohne Limits: Prüfen Sie unbegrenzt Hintergrundfarben ohne Registrierung, ohne Abonnement und ohne Nutzungsobergrenzen. Der WCAG-Farbnamen-Finder ist für immer völlig kostenlos, ohne Werbung, die die Oberfläche blockiert.

• Barrierefreie Frontend-Entwicklung: Frontend-Entwickler nutzen den WCAG-Farbnamen-Finder, um Textfarben zu wählen, die Barrierefreiheitsanforderungen erfüllen. Geben Sie die Hintergrundfarbe Ihres Designs ein und sehen Sie sofort, welche benannten CSS-Farben WCAG AA oder AAA bestehen - kopieren Sie dann den HEX-Wert direkt in Ihr Stylesheet.
• WCAG-AA/AAA-Konformitätsaudit: Barrierefreiheits-Auditoren nutzen den WCAG-Farbnamen-Finder, um schnell barrierefreie Textfarbalternativen für jeden Hintergrund zu finden. Die farbcodierten Bestanden/Nicht-bestanden-Badges und die Kontrastverhältnis-Anzeige erleichtern die Überprüfung, ob Textfarbwahlmöglichkeiten gesetzliche Barrierefreiheitsstandards erfüllen.
• Auswahl von Design-System-Farbtokens: Verantwortliche für Design-Systeme nutzen den WCAG-Farbnamen-Finder, um Textfarbtokens zu validieren. Indem sie jedes Token gegen alle Hintergrund-Tokens testen, können sie dokumentieren, welche Kombinationen WCAG AA/AAA bestehen und welche für die Barrierefreiheit alternative Token-Werte benötigen.
• Barrierefreiheit mobiler Apps: Entwickler mobiler Apps nutzen den WCAG-Farbnamen-Finder, um Textfarben für iOS- und Android-Apps zu wählen. Das Tool funktioniert mit jeder HEX-Hintergrundfarbe - geben Sie einfach Ihren App-Hintergrund ein und durchsuchen Sie barrierefreie Farbnamen mit ihren genauen Kontrastverhältnissen.
• Barrierefreiheitstests für Sehbeeinträchtigungen: Designer, die auf Sehbeeinträchtigungen testen, nutzen den WCAG-Farbnamen-Finder, um zu prüfen, ob ihre Farbwahl die Anforderungen an erhöhten Kontrast (AAA) erfüllt. Der AAA-Filtermodus zeigt nur die kontrastreichsten Farben, geeignet für Nutzer mit mäßigen Sehbehinderungen.
• Webinhalts- und E-Mail-Design: Webinhaltsersteller und E-Mail-Designer nutzen den WCAG-Farbnamen-Finder, um sicherzustellen, dass ihr Text auf verschiedenen Hintergrundfarben lesbar ist. Mit über 250 benannten Farben aus mehreren Quellen bietet er mehr barrierefreie Optionen, als Farbwerte manuell zu erraten.

Die Web Content Accessibility Guidelines (WCAG) definieren Mindestkontrastverhältnisse, um sicherzustellen, dass Text für Nutzer mit Sehbeeinträchtigungen lesbar ist, einschließlich Sehschwäche und Farbsehschwäche. Der WCAG-Farbnamen-Finder hilft Ihnen zu erkennen, welche benannten Farben (aus CSS-, X11- und Pantone-Quellen) ausreichenden Kontrast auf jeder Hintergrundfarbe bieten. Das Kontrastverhältnis wird mit der Formel für die relative Luminanz nach WCAG 2.1 berechnet und ergibt einen Wert zwischen 1:1 (kein Kontrast) und 21:1 (Maximum - Schwarz auf Weiß).

1. Hintergrundfarbe eingeben: Geben Sie einen HEX-Wert ein (z. B. #1E3A5F) oder wählen Sie mit dem Farbwähler eine Farbe visuell aus. Sie können auch eine der 16 Hintergrundvoreinstellungen (Weiß, Schwarz, Marineblau, Beige usw.) für Schnelltests anklicken. Die gesamte Verarbeitung läuft lokal in Ihrem Browser - Ihre Farbdaten verlassen niemals Ihr Gerät.
2. Barrierefreie Farben durchsuchen: Das Tool bewertet sofort alle über 250 benannten Farben aus unserer Datenbank gegen Ihren Hintergrund. Jede Farbe zeigt ihr Kontrastverhältnis, ein Konformitäts-Badge (AAA, AA, AA Large oder Nicht bestanden) und eine visuelle Vorschau der Farbe auf Ihrem Hintergrund. Nutzen Sie die Filter-Tabs, um nur AA+- oder AAA-konforme Farben anzuzeigen.
3. Beliebige Farbe kopieren: Klicken Sie auf eine beliebige Farbkarte, um ihren HEX-Wert in die Zwischenablage zu kopieren. Farben sind nach Kontrastverhältnis sortiert (höchstes zuerst), sodass Sie schnell die kontrastreichste Textfarbe für Ihr Design finden.

• AAA (7:1): Erhöhter Kontrast für normalen Text. Der höchste WCAG-Standard, empfohlen für Nutzer mit mäßigen Sehbehinderungen. Nur die kontrastreichsten Farben erreichen diese Stufe. Ideal für Fließtext in kritischen Leseabschnitten oder bei barrierefreiheitsorientierten Designs.
• AA (4,5:1): Mindestkontrast für normalen Text. Dies ist der gesetzliche Standard, der von den meisten Barrierefreiheitsvorschriften gefordert wird, einschließlich Section 508 und ADA. Jeder Fließtext unter 18 pt (oder 14 pt fett) muss diese Stufe erfüllen. Dies ist die am häufigsten angestrebte WCAG-Stufe für Webinhalte.
• AA Large (3:1): Mindestkontrast für großen Text (≥18 pt oder ≥14 pt fett) und UI-Komponenten. Dies gilt laut WCAG 2.1 Erfolgskriterium 1.4.11 auch für Nicht-Text-Elemente wie Symbole, Rahmen und grafische Objekte.
• Nicht bestanden (<3:1): Erfüllt keine WCAG-Anforderung an Textkontrast. Farben dieser Stufe sollten für Text oder wesentliche UI-Elemente auf diesem Hintergrund nicht verwendet werden. Erwägen Sie, sie nur dekorativ einzusetzen.

Unser WCAG-Farbnamen-Finder verwendet die Standardformel für relative Luminanz nach WCAG 2.1, die die unterschiedliche Empfindlichkeit des menschlichen Auges gegenüber verschiedenen Lichtwellenlängen berücksichtigt. Die Formel wandelt jede Farbe zunächst in ihre linearen sRGB-Komponenten um und wendet dann die standardmäßigen Luminanzgewichte an (Rot: 0,2126, Grün: 0,7152, Blau: 0,0722). Das Kontrastverhältnis wird als (L1 + 0,05) / (L2 + 0,05) berechnet, wobei L1 die Luminanz der helleren und L2 die der dunkleren Farbe ist. Dies ergibt eine mathematisch präzise Messung des wahrgenommenen Kontrasts, die von 1:1 (identische Farben) bis 21:1 (Schwarz gegen Weiß) reicht.