Start›Farb-Werkzeuge› Kontrast-PrüferBrowser
Farbkontrast nach WCAG prüfen
Berechnet das WCAG-Kontrastverhältnis zwischen einer Textfarbe und ihrem Hintergrund und zeigt, ob es AA und AAA bei normaler und großer Schrift erfüllt. Das Verhältnis beruht auf der relativen Leuchtdichte, nicht darauf, wie unterschiedlich die Farbtöne wirken.
Beispiel für große SchriftFließtext in der Größe, die die meisten Oberflächen tatsächlich verwenden.
5.85:1
Kontrastverhältnis. Die WCAG misst die relative Leuchtdichte, nicht wie unterschiedlich die Farbtöne wirken.
- AA — normale SchriftBestanden · braucht 4.5:1
- AA — große Schrift (ab 18pt)Bestanden · braucht 3:1
- AAA — normale SchriftNicht bestanden · braucht 7:1
- AAA — große SchriftBestanden · braucht 4.5:1
So geht’s
- 1Setz die Textfarbe und die Hintergrundfarbe.
- 2Lies das Verhältnis und die Bestanden-/Durchgefallen-Marken für AA und AAA.
- 3Sieh dir die Live-Probe darunter an, um zu sehen, wie das Verhältnis tatsächlich aussieht.
Häufige Fragen
- Welches Verhältnis muss ich erreichen?
- 4,5:1 für normalen Fließtext auf Stufe AA — die Stufe, die in den meisten Barrierefreiheits-Anforderungen genannt wird. Großer Text — 18pt oder 14pt fett — braucht nur 3:1. AAA hebt beides auf 7:1 und 4,5:1.
- Warum fällt eine Kombination durch, die mir gut aussieht?
- Das Verhältnis wird aus der relativen Leuchtdichte berechnet, nicht daraus, wie verschieden die beiden Farbtöne wirken. Orange auf Weiß wirkt kontrastreich und schneidet schlecht ab, weil beides hell ist. Genau diese Lücke ist der Punkt: der Test gilt Lesenden, deren Augen Farbtöne nicht so trennen wie deine.
- Gilt das Verhältnis auch für Icons und Rahmen?
- Bedienelemente und bedeutungstragende Grafiken brauchen 3:1 gegen das, was hinter ihnen liegt. Rein dekorative Formen und Text, der Teil eines Logos ist, sind ausgenommen.
- Wie repariere ich eine durchgefallene Kombination, ohne die Markenfarbe zu ändern?
- Verschieb die Helligkeit, nicht den Farbton. Text abdunkeln oder Hintergrund aufhellen ändert das Verhältnis schnell und lässt die Farbe erkennbar — und meistens hat der Hintergrund mehr Spielraum.