Farben umrechnen & Kontrast prüfen

Rechne Farben zwischen HEX, RGB, HSL, OKLCH und CMYK um, erzeuge hellere und dunklere Abstufungen und prüfe, ob Text auf einem Hintergrund gut lesbar ist (WCAG).

Deine Daten bleiben bei dir: Alles wird in deinem Browser berechnet. Deine Farben werden weder übertragen noch gespeichert.

Farbe umrechnen

HEX, RGB, HSL, drei Zahlen wie 30, 64, 175 oder ein CSS-Farbname.

#1e40af

Ähnlicher CSS-Farbname: darkslateblue

HEX
#1e40af
RGB
rgb(30, 64, 175)
HSL
hsl(226, 71%, 40%)
OKLCH
oklch(42.4% 0.181 265.6)
CMYK (Näherung)
83 / 63 / 0 / 31

CMYK in Prozent (Cyan / Magenta / Gelb / Schwarz) ist eine einfache Umrechnung. Für Druckaufträge die Farbwerte der Druckerei verwenden.

Abstufungen

Antippen kopiert den HEX-Wert. Die umrandete Fläche ist deine Farbe. Eine ganze Palette passender Farben erstellst du mit dem Farbpaletten-Generator.

Kontrast prüfen

Große Überschrift

Normaler Text: So liest sich ein Absatz in dieser Farbkombination. Gute Lesbarkeit hilft allen.

Kleiner Text, etwa für Hinweise und Fußzeilen.

Schaltfläche

Kontrastverhältnis

8,72 : 1

  • Normaler Text AA, mindestens 4,5 : 1 – erfüllt
  • Großer Text AA, mindestens 3 : 1 – erfüllt
  • Normaler Text, erhöhte Anforderung AAA, mindestens 7 : 1 – erfüllt
  • Großer Text, erhöhte Anforderung AAA, mindestens 4,5 : 1 – erfüllt
  • Bedienelemente und Grafiken AA, mindestens 3 : 1 – erfüllt
So sehen Menschen mit Farbsehschwäche diese Kombination
  • Beispieltext

    Rotschwäche (Protanopie) · 7,34 : 1

  • Beispieltext

    Grünschwäche (Deuteranopie) · 8,64 : 1

  • Beispieltext

    Blauschwäche (Tritanopie) · 7,48 : 1

Vereinfachte Darstellung der vollständigen Ausprägung. Wichtige Informationen sollten nie nur über die Farbe vermittelt werden.

Hinweis: Das Kontrastverhältnis wird nach WCAG 2.2 berechnet und nie aufgerundet. Großer Text heißt ab 24 px (18 pt) oder ab 18,5 px (14 pt) fett. Die Prüfung betrifft nur den Farbkontrast; ob eine Webseite oder ein Dokument insgesamt barrierefrei ist, hängt von vielen weiteren Punkten ab. Das Ergebnis ist ohne Gewähr. Ein geteilter Link enthält nur die beiden Farben, und zwar nach dem #-Zeichen, das Browser nicht an den Server senden.

Alle Ergebnisse ohne Gewähr. Bitte prüfe wichtige Ergebnisse selbst. Mehr dazu in den Nutzungshinweisen.

Ist dir ein Fehler aufgefallen oder hast du eine Idee für dieses Werkzeug? Wir freuen uns über dein Feedback.

Fragen & Antworten

Was bedeutet das Kontrastverhältnis?

Es gibt an, wie stark sich Schrift und Hintergrund in der Helligkeit unterscheiden, von 1 : 1 (gleich) bis 21 : 1 (Schwarz auf Weiß). Für normalen Text empfehlen die Richtlinien für Barrierefreiheit (WCAG) mindestens 4,5 : 1.

Ist meine Seite damit barrierefrei?

Der Farbkontrast ist ein wichtiger Teil, aber nur einer von vielen. Ob eine Seite insgesamt barrierefrei ist, hängt auch von Aufbau, Bedienbarkeit und Texten ab.

Warum ist CMYK nur eine Näherung?

Echte Druckfarben hängen von Papier und Druckmaschine ab. Für Druckaufträge solltest du die Farbwerte deiner Druckerei verwenden.

Passt dazu