Farbkonverter und Kontrastprüfer

Was ist dieses Tool?

Füge eine Farbe in beliebigem Format ein – #ff6347, rgb(255 99 71), hsl(9 100% 64%) oder einfach tomato – und kopiere sie in jedem anderen Format. Im Kontrastprüfer testest du Text- und Hintergrundfarben nach WCAG 2 und erhältst die nächstgelegene bestehende Farbe, falls ein Paar durchfällt.

Bildschirme mischen rotes, grünes und blaues Licht, daher beschreiben HEX und RGB Farben so, wie Monitore sie darstellen. HSL und HSV lassen sich leichter von Hand anpassen, CMYK nähert Druckfarben an, und OKLCH ist ein moderner, wahrnehmungsgleicher Farbraum in CSS.

WCAG-Kontrastverhältnisse reichen von 1:1 bis 21:1. Normaler Text braucht mindestens 4,5:1 für AA und 7:1 für AAA; großer Text (24px oder 18,66px fett) und UI-Elemente brauchen 3:1. Transparente Textfarben werden vor der Messung mit dem Hintergrund verrechnet.

So verwendest du: Farbkonverter & Kontrastprüfer

1. Eine Farbe eingeben oder einfügen oder mit dem Farbfeld auswählen.
2. Das benötigte Format kopieren: HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH oder den CSS-Farbnamen.
3. Auf einen helleren oder dunkleren Ton klicken, um Varianten desselben Farbtons zu erkunden.
4. Kontrastprüfung öffnen, Text- und Hintergrundfarbe festlegen und sehen, ob sie WCAG AA und AAA bestehen.
5. Fällt ein Paar durch, die vorgeschlagene Farbe nutzen – sie behält den Farbton und passt die Helligkeit an.

Beispiele

tomato

#ff6347
rgb(255 99 71)
hsl(9 100% 64%)

Häufige Fragen