Farbkontrast-Prüfer

Was ist Farbkontrast-Prüfer?

Der Farbkontrast-Prüfer ist ein kostenloser Online-WCAG-Kontrastverhältnisprüfer für Designer, Entwickler und Barrierefreiheits-Tester. Er nimmt eine Vordergrundfarbe (Text) und eine Hintergrundfarbe, berechnet die relative Leuchtdichte jeder Farbe und gibt das Kontrastverhältnis als Wert von 1:1 bis 21:1 aus. Anschließend zeigt er dir, ob dieses Verhältnis die WCAG-2.1-Stufe AA (4.5:1 normal, 3:1 groß) und Stufe AAA (7:1 normal, 4.5:1 groß) erfüllt, und stellt die beiden Farben als Live-Vorschau mit Beispieltext dar, damit du die Lesbarkeit auf einen Blick beurteilen kannst. Nutze ihn, um zu prüfen, dass Fließtext, Buttons, Links und Labels lesbar sind, bevor du ein Design veröffentlichst.

So verwendest du Farbkontrast-Prüfer

1. Tippe oder füge die Vordergrundfarbe (Text) als HEX-Wert ein, oder klicke auf den nativen Farbwähler, um sie visuell auszuwählen.
2. Mache dasselbe für die Hintergrundfarbe, auf der der Text liegt.
3. Lies die Ausgabe des Kontrastverhältnisses, dargestellt als Wert wie 4.5:1 (1:1 sind identische Farben, 21:1 ist reines Schwarz auf Weiß).
4. Prüfe die AA- und AAA-Badges für normalen Text und für großen Text (18pt / 14pt fett und größer), um zu sehen, welche Stufen bestehen.
5. Sieh dir die mit deinen beiden Farben gerenderte Vorschau mit Beispieltext an, um zu bestätigen, dass der Text bequem lesbar ist.
6. Passe eine der beiden Farben an, bis du die für dein Design benötigte Kontraststufe erreichst.

Beispiele

Vordergrund #595959, Hintergrund #ffffff

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

Vordergrund #999999, Hintergrund #ffffff

Verhältnis 2.85:1 — besteht AA normal und AAA nicht, erfüllt nichts vom für Fließtext Erforderlichen

Vordergrund #767676, Hintergrund #ffffff

Verhältnis 4.54:1 — besteht AA normal und AA groß, aber nicht AAA normal

Häufig gestellte Fragen

Welche Kontrastverhältnisse verlangt WCAG?

WCAG 2.1 Stufe AA benötigt mindestens 4.5:1 für normalen Text und 3:1 für großen Text. Stufe AAA ist strenger: 7:1 für normalen Text und 4.5:1 für großen Text. Dieser Prüfer zeigt für jeden dieser vier Schwellenwerte ein Bestanden-/Nicht-bestanden-Badge an.

Was zählt als großer Text?

WCAG definiert großen Text als 18pt (etwa 24px) und größer, oder 14pt (etwa 18.66px) und größer, wenn er fett ist. Großer Text hat eine niedrigere Kontrastanforderung, weil größere Glyphen leichter zu lesen sind — deshalb können die Großtext-Badges bestehen, während die Normaltext-Badges es nicht tun.

Wie wird das Kontrastverhältnis berechnet?

Es verwendet die offizielle WCAG-Formel: Die relative Leuchtdichte jeder Farbe wird aus ihren linearisierten sRGB-Kanälen berechnet, und das Verhältnis ist (heller + 0.05) / (dunkler + 0.05). Das Ergebnis reicht von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß).

Unterstützt es Alpha, RGB oder benannte Farben?

Die Eingabe erfolgt ausschließlich als HEX (#rgb-Kurzform oder #rrggbb), mit einem nativen Farbwähler für jedes Feld. Alpha/Deckkraft oder Teiltransparenz werden nicht berücksichtigt — kombiniere halbtransparente Ebenen zuerst zu einer Vollfarbe und prüfe dann diese.

Werden meine Farben an einen Server gesendet?

Nein. Die Berechnung von Leuchtdichte und Verhältnis läuft 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.