DevToolPal
DE

Farbkontrast-Prüfer (WCAG)

Prüfen Sie das WCAG-2.x-Kontrastverhältnis von Text- und Hintergrundfarbe, mit AA/AAA-Ergebnis für normalen Text, großen Text und UI, Live-Vorschau und der nächstgelegenen bestandenen Farbe.

Läuft lokal, wird nie hochgeladen

Farben

Textfarbe
Hintergrundfarbe

Transparente Farben werden zuerst gemischt: der Text über dem Hintergrund, der Hintergrund über Weiß.

Vorschau

Großer Text

Fließtext sollte für alle gut lesbar sein, auch für Menschen mit Sehschwäche oder bei gedimmtem Bildschirm.

Schaltfläche

Kontrastverhältnis

—

Nächstgelegene bestandene Farben

Was das Tool macht

Der Farbkontrast-Prüfer sagt Ihnen, ob eine Textfarbe auf einer Hintergrundfarbe nach den Web Content Accessibility Guidelines (WCAG 2.x) gut lesbar ist. Geben Sie für Text und Hintergrund eine beliebige CSS-Farbe ein – HEX, rgb(), hsl(), einen Farbnamen oder eine transparente Farbe – und Sie sehen das Kontrastverhältnis, das Ergebnis für jedes AA- und AAA-Kriterium und eine Live-Vorschau. Besteht das Paar nicht, schlägt das Tool die nächstgelegenen bestandenen Text- und Hintergrundfarben im gleichen Farbton vor. Alles läuft in Ihrem Browser.

So funktioniert es

  1. Geben Sie Textfarbe und Hintergrundfarbe ein oder wählen Sie sie aus. Tauschen vertauscht beide.
  2. Lesen Sie das Kontrastverhältnis und die Ergebnisliste für normalen Text, großen Text und UI-Komponenten.
  3. Fällt eine Stufe durch, sehen Sie unter Nächstgelegene bestandene Farben nach: Jeder Vorschlag zeigt die neue Farbe, ihr Verhältnis, eine Kopierschaltfläche und Übernehmen.
  4. Schalten Sie APCA ein, um zusätzlich den Helligkeitskontrast (Lc) des WCAG-3-Entwurfs zu sehen.

Halbtransparente Farben werden vor der Prüfung gemischt: der Text über dem Hintergrund und der Hintergrund über Weiß.

Beispiel

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

So wird das Verhältnis berechnet

Die relative Leuchtdichte jeder Farbe wird aus ihren sRGB-Kanälen berechnet (linearisiert und mit 21 % Rot, 72 % Grün, 7 % Blau gewichtet). Das Verhältnis ist (hellere + 0,05) / (dunklere + 0,05) und reicht von 1:1 bei gleichen Farben bis 21:1 bei Schwarz auf Weiß. Nur die Helligkeit zählt, nicht der Farbton: Reines Rot auf reinem Grün wirkt bunt, erreicht aber nur etwa 1,3:1.

Die Vorschläge ändern nur die Helligkeit der Farbe (in HSL) und wählen die Richtung – dunkler oder heller –, die die kleinere Änderung braucht. Manchmal schafft es kein Ton: Auf mittelgrauem Hintergrund erreicht keine Textfarbe 7:1.

FAQ

› Welches Kontrastverhältnis brauche ich?

WCAG 2.x Stufe AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text sowie für UI-Komponenten wie Feldrahmen, Icons und Fokusringe. Stufe AAA verlangt 7:1 für normalen und 4,5:1 für großen Text. Die meisten Gesetze und Richtlinien verweisen auf Stufe AA.

› Was gilt als großer Text?

Text ab 24px (18pt) in normaler Stärke oder ab 18,66px (14pt) fett. Alles Kleinere ist normaler Text und braucht das höhere Verhältnis.

› Warum ist 4,49:1 nicht bestanden?

WCAG-Schwellen sind exakt: Ein Verhältnis von 4,499 erreicht 4,5 nicht. Dieser Prüfer schneidet das angezeigte Verhältnis deshalb ab, statt aufzurunden, und entscheidet anhand des exakten Werts.

› Was ist APCA?

APCA (Accessible Perceptual Contrast Algorithm) ist die für den WCAG-3-Entwurf vorgeschlagene Kontrastmethode. Sie liefert einen Helligkeitskontrast Lc, der davon abhängt, welche Farbe der Text ist, und eignet sich besser für den Dark Mode. Sie ist noch kein rechtlicher Standard und wird hier nur als zusätzliche Orientierung angezeigt.