Farbkontrast prüfen

Wählen Sie Text- und Hintergrundfarbe, um zu erfahren, ob Ihr Design lesbar und barrierefrei ist. Sie erhalten das Kontrastverhältnis, ob es die Stufen AA und AAA der WCAG erfüllt und – falls nicht – die ähnlichste Textfarbe, die sie erfüllt.

Text und Hintergrund

Akzeptiert HEX, rgb(), hsl(), oklch() oder CSS-Namen. Halbtransparenter Text wird mit dem Hintergrund gemischt.

Großer Beispieltext

Dies ist ein Text in normaler Größe. Barrierefreiheit im Web bedeutet, dass alle Menschen – auch mit Sehschwäche oder Farbenblindheit – Ihre Seite lesen und nutzen können.

Schaltfläche

Kontrastverhältnis

Normaler Text (4,5:1) AA
Normaler Text (7:1) AAA
Großer Text (3:1) AA
Großer Text (4,5:1) AAA
Symbole und Bedienelemente (3:1) AA

Was ist das Kontrastverhältnis?

Das Kontrastverhältnis vergleicht die relative Leuchtdichte zweier Farben und reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß). Es ist in den Barrierefreiheitsrichtlinien WCAG 2 des W3C definiert und die Grundlage gesetzlicher Vorgaben (in Deutschland BITV 2.0 und Barrierefreiheitsstärkungsgesetz, europaweit die Norm EN 301 549) sowie von Werkzeugen wie Lighthouse.

Stufen AA und AAA

AA ist die üblicherweise geforderte Stufe: 4,5:1 für normalen Text und 3:1 für großen Text (ab 24 px oder 18,66 px fett). AAA ist die erweiterte Stufe: 7:1 bzw. 4,5:1. Symbole, Rahmen von Formularfeldern und andere Bedienelemente brauchen mindestens 3:1 gegenüber den umgebenden Farben.

Logos sowie rein dekorativer Text und deaktivierte Elemente sind ausgenommen.

So verbessern Sie den Kontrast

Meist genügt es, den Text abzudunkeln (oder auf dunklem Hintergrund aufzuhellen), ohne den Farbton zu ändern: Deshalb schlagen wir dieselbe Farbe mit anderer Helligkeit vor, berechnet im OKLCH-Farbraum, damit die Änderung so klein wie möglich ausfällt. Vermeiden Sie hellgrauen Text auf Weiß und Text auf Bildern ohne dunkle Zwischenebene.