Farbkontrast-Prüfer

Was ist Farbkontrast-Prüfer?

Der Farbkontrast-Prüfer ist ein kostenloser Online-WCAG- und APCA-Kontrastprüfer für Designer, Entwickler und Barrierefreiheits-Tester. Er akzeptiert Farben als HEX (#rgb, #rrggbb und 8-stellig #rrggbbaa mit Alpha), rgb()/rgba() und hsl()/hsla(), komponiert einen durchscheinenden Vordergrund vor dem Messen über den Hintergrund und meldet sowohl das WCAG-2.1-Verhältnis (1:1 bis 21:1) als auch den APCA-Lc-Helligkeitskontrastwert. Er markiert WCAG-2.1-Stufe AA (4.5:1 normal, 3:1 groß) und AAA (7:1 normal, 4.5:1 groß), ergänzt ein 3:1-Badge für nichttextliche UI-Komponenten und Grafiken und kann den nächsten bestandenen Vordergrund vorschlagen — nur die Helligkeit wird bis zum Erreichen von AA oder AAA angepasst — den du mit einem Klick anwendest.

So verwendest du Farbkontrast-Prüfer

1. Gib die Vordergrundfarbe (Text) als HEX, rgb() oder hsl() ein — 8-stelliges HEX oder rgba mit Alpha wird akzeptiert — oder klicke auf den Farbwähler.
2. Gib die Hintergrundfarbe genauso ein; ein halbtransparenter Vordergrund wird darüber (und der Hintergrund über Weiß) komponiert, bevor der Kontrast gemessen wird.
3. Nutze die Tauschen-Schaltfläche, um Vorder- und Hintergrund jederzeit zu vertauschen.
4. Lies das WCAG-2.1-Kontrastverhältnis und den direkt daneben angezeigten APCA-Lc-Wert.
5. Prüfe die AA- und AAA-Badges für normalen und großen Text sowie das 3:1-Badge für UI-Komponenten und Grafiken.
6. Wenn ein Paar durchfällt, sieh dir die nächste bestandene AA- oder AAA-Farbe an und klicke auf Anwenden, um den Vordergrund zu aktualisieren.

Beispiele

Vordergrund #595959, Hintergrund #ffffff

Verhältnis 7.00:1 mit hohem APCA Lc — besteht AA und AAA für normalen und großen Text

Vordergrund #00000080 (50 % Schwarz) über #ffffff

Zuerst zu einem satten Grau komponiert, dann werden WCAG-Verhältnis und APCA Lc berechnet

Vordergrund #999999 auf #ffffff — 2.85:1, besteht AA nicht

Öffne die nächste AA-Farbe und klicke Anwenden, um 4.5:1 bei gleichem Farbton zu erreichen

Häufig gestellte Fragen

Welche Kontrastverhältnisse verlangt WCAG?

WCAG 2.1 Stufe AA benötigt mindestens 4.5:1 für normalen und 3:1 für großen Text; Stufe AAA benötigt 7:1 und 4.5:1. Nichttextliche UI-Komponenten und grafische Objekte (SC 1.4.11) benötigen 3:1. Dieser Prüfer zeigt für jeden dieser Schwellenwerte ein Bestanden-/Nicht-bestanden-Badge.

Was ist der APCA-Lc-Wert?

APCA (Accessible Perceptual Contrast Algorithm) ist die für WCAG 3 vorgeschlagene Kontrastmethode. Er liefert einen Helligkeitskontrast-Wert (Lc) von etwa 0 bis 108, wobei höher mehr Kontrast bedeutet, und berücksichtigt die Polarität (dunkel auf hell vs. hell auf dunkel). Er wird neben dem WCAG-2.1-Verhältnis gezeigt und verwendet eigene Richtwerte statt eines einzigen Bestanden/Nicht-bestanden.

Wie funktioniert der Vorschlag der nächsten bestandenen Farbe?

Er behält Farbton und Sättigung des Vordergrunds bei und passt nur seine Helligkeit heller oder dunkler an, bis der Kontrast zum Hintergrund AA (4.5:1) oder AAA (7:1) erfüllt; dann kannst du ihn mit einem Klick anwenden. Ist der Hintergrund mitteltonig und das Ziel nicht erreichbar, zeigt er stattdessen die nächstmögliche Farbe.

Welche Farbformate kann ich eingeben?

HEX (#rgb, #rrggbb sowie #rgba und 8-stelliges #rrggbbaa mit Alpha), rgb()/rgba() und hsl()/hsla(), mit einem nativen Farbwähler für jedes Feld. Ein halbtransparenter Vordergrund wird über den Hintergrund komponiert — der selbst zuerst auf Weiß reduziert wird — bevor das Verhältnis berechnet wird. Benannte Farben werden nicht unterstützt.

Werden meine Farben an einen Server gesendet?

Nein. Das gesamte Parsen, Komponieren sowie die Berechnung von Leuchtdichte, Verhältnis und APCA laufen vollständig in deinem Browser mit JavaScript — es werden keine Farben hochgeladen und nichts an einen Server gesendet, sodass es privat und nach dem Laden der Seite sogar offline funktioniert.