Farbkontrast prüfen

Prüfe, ob deine Textfarbe auf ihrem Hintergrund gut lesbar ist. Gib beide Farben ein und sieh das WCAG-Kontrastverhältnis, ob der Test bestanden ist und eine Live-Vorschau.

Kostenlos und privat. Alles läuft in deinem Browser, nichts wird hochgeladen.

So funktioniert es

  1. Farbe eingebenTippe den Wert in das Eingabefeld oder füge ihn ein.
  2. Ergebnis kopierenDer umgerechnete Wert steht oben in der Liste.
  3. Mehr entdeckenWeitere Formate, Kontrast und Abstufungen findest du darunter.

Lesbar für alle

Etwa jeder zwölfte Mann hat eine Farbsehschwäche, und noch viel mehr Menschen lesen Bildschirme in praller Sonne oder mit nachlassender Sehkraft. Die Richtlinien für barrierefreie Webinhalte (WCAG) legen deshalb Mindestwerte für den Kontrast fest: 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente bei Stufe AA, 7:1 und 4,5:1 bei Stufe AAA.

Das Verhältnis wird aus der relativen Leuchtdichte beider Farben berechnet, genau wie WCAG 2 es festlegt. Mit Tauschen testest du hellen Text auf dunklem Hintergrund und wieder zurück, und aus der Palette wählst du eine dunklere oder hellere Abstufung, bis das Ergebnis passt.

Transparente Farben

Hat die Textfarbe Transparenz, wird sie zuerst mit dem Hintergrund gemischt. So entspricht das Verhältnis dem, was Nutzer tatsächlich sehen.

Häufige Fragen

Was zählt als großer Text?

Mindestens 24 px in normaler Stärke oder etwa 19 px fett. Großer Text braucht für AA ein Verhältnis von 3:1.

Welche Farbformate kann ich eingeben?

Alles, was in CSS gültig ist: HEX mit 3, 4, 6 oder 8 Stellen, rgb(), hsl(), hwb(), lab(), oklch() und Farbnamen.

Ist der CMYK-Wert für den Druck exakt?

Es ist eine einfache Umrechnung ohne Druckerprofil. Für professionellen Druck nimm die CMYK-Werte aus dem Profil deiner Druckerei.

Welches Kontrastverhältnis brauche ich?

WCAG AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente.

Warum ist OKLCH wichtig?

Es entspricht der Art, wie Menschen Helligkeit wahrnehmen. Paletten und Farbverläufe in OKLCH wirken deshalb gleichmäßig.