Farbkontrast-Checker

WCAG-Farbkontrast-Prüfer für Text- und Oberflächenfarben

Nutzen Sie diesen Farbkontrast-Prüfer, um Vorder- und Hintergrund zu vergleichen, Transparenz über einer expliziten Leinwand aufzulösen und das resultierende Kontrastverhältnis zu prüfen. Der WCAG-Kontrast-Prüfer meldet AA- und AAA-Schwellenwerte für Text sowie ein fokussiertes 3:1-Farbpaar-Ergebnis für Steuerelemente und Grafiken, was ihn zu einem nützlichen Prüfer für barrierefreie Farben bei der Arbeit an Benutzeroberflächen macht.

So prüfen Sie den Vordergrund- und Hintergrundkontrast

1. Geben Sie Vordergrund-, Hintergrund- und Leinwandfarben als HEX, RGB oder HSL ein. Verwenden Sie Alpha, wenn der Vordergrund oder Hintergrund durchscheinend ist, oder konvertieren Sie zuerst einen HEX-Code in RGB oder HSL, wenn Sie nur ein Format haben.
2. Überprüfen Sie die aufgelösten Farben, das Verhältnis, die Ergebnisse für normalen und großen Text und die Komponentenvorschau.
3. Wählen Sie ein Ziel von 3:1, 4,5:1 oder 7:1, wenden Sie einen vorgeschlagenen Vordergrund an und kopieren Sie dann das CSS, laden Sie es herunter oder teilen Sie es.

WCAG AA-, AAA-, Großtext- und 3:1-Schwellenwerte

Verwenden Sie dies als AA-Kontrastprüfer für normalen und großen Text oder als AAA-Kontrastprüfer, wenn die höheren Ziele gelten. WCAG AA erfordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text; AAA erhöht diese Ziele auf 7:1 und 4,5:1. Großer Text bedeutet im Allgemeinen mindestens 18 Punkt normal oder 14 Punkt fett. Das separate Ergebnis des 3:1-Vordergrund- und Hintergrundkontrasts bewertet nur das getestete Farbpaar für ein Steuerelement oder eine Grafik; es stellt nicht von sich aus die Nicht-Text-Konformität her.

Warum transluzente Farben eine explizite Leinwand benötigen

Eine transluzente Farbe hat keinen endgültigen Kontrast, bis jede dahinterliegende Ebene bekannt ist. Dieser Text-Kontrastprüfer setzt zuerst die opake Leinwand zusammen, dann den Hintergrund und dann den Vordergrund. Das angezeigte Verhältnis beschreibt daher die aufgelösten Browser-Farben, anstatt stillschweigend Weiß hinter jedem transparenten Wert anzunehmen.

Kontrastreiche Farben hängen vom Paar und vom Kontext ab

Was sind Kontrastfarben? Es sind Farben, deren aufgelöster Luminanzunterschied ein lesbares oder unterscheidbares Paar für eine bestimmte Verwendung ergibt. Eine barrierefreie Farbkombination für eine Komponente kann in einem anderen Zustand unzureichend sein, und die besten Kontrastfarben sind nicht universell: Schwarz kann auf einem blassgelben Hintergrund funktionieren, während ein helleres Grau versagt. Die Wahl einer Kontrastfarbe für einen gelben Hintergrund sollte dennoch anhand des genauen Gelbtons, der Textgröße, der Schriftstärke und des Komponentenzustands gemessen werden, den Sie veröffentlichen.

Eine dunklere oder hellere barrierefreie Vordergrundfarbe finden

Wenn das aktuelle Paar das ausgewählte Ziel verfehlt, sucht der Prüfer auf deterministischen dunkleren und helleren sRGB-Pfaden nach den nächstgelegenen exportierten Vordergrundwerten, die bestehen. Er erhält den Alpha-Wert des Vordergrunds, wenn möglich, und kennzeichnet deutlich eine deckende Alternative, wenn das Ziel durch Transparenz unerreichbar wird. Um die Vordergrundfarbe manuell anzupassen und ihre Aufhellungen und Abdunklungen zu sehen, öffnen Sie sie im Farbwähler.

Ein bestandenes Farbpaar ist kein vollständiges Barrierefreiheits-Audit

Diese Berechnung beweist nicht, dass eine ganze Seite konform ist. Tatsächliche Typografie, Farbverläufe, Bilder, Icons, Interaktionszustände, Fokus-Indikatoren, deaktivierte Steuerelemente, Abgrenzungen und umgebende Farben müssen weiterhin in der gerenderten Benutzeroberfläche überprüft werden. Verwenden Sie das Ergebnis als eine präzise Messung im Rahmen einer umfassenderen Überprüfung der Barrierefreiheit.

Private Kontrastprüfung in Ihrem Browser

Das Parsen, Alpha-Compositing, die Kontrastberechnung, Vorschläge, das Rendern der Vorschau und die CSS-Generierung erfolgen lokal in diesem Browser. Analysedaten schließen exakte Farben, Verhältnisse, Ergebnisse (bestanden/nicht bestanden), generiertes CSS und Werte des geteilten Zustands aus. Eine URL zum Teilen enthält Farben nur, wenn Sie sie explizit erstellen.

Häufig gestellte Fragen

Welches Kontrastverhältnis fordert WCAG AA?

WCAG AA fordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Das Prüfprogramm gibt beide Ergebnisse getrennt aus, da Schriftgröße und -gewicht bestimmen, welcher Schwellenwert gilt.

Welches Kontrastverhältnis fordert WCAG AAA?

WCAG AAA erfordert mindestens 7:1 für normalen Text und 4.5:1 für großen Text. AAA ist eine höhere Zielvorgabe für den Textkontrast, keine Erklärung, dass alle anderen Anforderungen an die Barrierefreiheit erfüllt sind.

Was gilt als großer Text für die Kontrastprüfung?

Großer Text bedeutet im Allgemeinen mindestens 18 Punkt normalen Text oder 14 Punkt fetten Text. CSS-Pixel und gerenderte Schriftmetriken können variieren, überprüfen Sie daher die tatsächliche Größe und Schriftstärke, die in der Benutzeroberfläche verwendet werden.

Benötigen Steuerelemente und Symbole einen 3:1-Kontrast?

Viele aussagekräftige Steuerelemente, Fokusindikatoren und grafische Objekte benötigen ein Kontrastverhältnis von 3:1 zu angrenzenden Farben. Dieses Tool meldet nur das getestete Paar; ob die Anforderung zutrifft, hängt vom Element und Zustand ab.

Beweist ein bestandenes Farbpaar, dass meine Seite konform ist?

Nein. Ein bestandenes Paar deckt eine einzige Kontrastberechnung ab. Typografie, Bilder, Farbverläufe, Symbole, Steuerelemente, Hover- und deaktivierte Zustände, Fokusindikatoren, Struktur, Tastaturzugänglichkeit und die vollständig gerenderte Seite müssen weiterhin überprüft werden.