About
Ansicht in Deutsch Auf Englisch wechseln

Farbkonverter & Kontrastprüfer

Zwischen HEX, RGB und HSL konvertieren und den WCAG-Barrierefreiheitskontrast zwischen zwei beliebigen Farben prüfen. Alles läuft in deinem Browser.

Farbkonverter

WCAG-Kontrastprüfer

Normaler Text (16 px)

Großer Text (24 px / fett 18.66)

Kontrastverhältnis —
WCAG AA Normaler Text— Großer Text—
WCAG AAA Normaler Text— Großer Text—
  1. Wähle eine Farbe mit dem Farbfeld oder tippe einen HEX-, RGB- oder HSL-Wert — die anderen aktualisieren sich automatisch.
  2. Scrolle runter zum Kontrastprüfer und setze eine Vorder- und Hintergrundfarbe.
  3. Lies das berechnete Verhältnis und die AA / AAA-Bestanden-Nicht-Bestanden-Abzeichen für normalen und großen Text.
  4. Passe eine der Farben an, bis das Verhältnis die Schwelle deines Designs überschreitet.
Was macht es?

Der Konverter übersetzt eine einzelne Farbe in Echtzeit zwischen HEX (#rrggbb), RGB (rgb(r, g, b)) und HSL (hsl(h, s%, l%)), sodass du das Format, das dein Design-System verwendet, einfügen und die anderen beiden erhalten kannst. Der Kontrastprüfer nimmt einen Vorder- und Hintergrund, linearisiert beide durch die sRGB-Gammakurve und meldet das WCAG 2.x-Kontrastverhältnis zusammen mit AA / AAA-Verdikten für normale und große Textgrößen.

Beispiel

Eingabe — ein typisches Markenblau:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

Gepaart mit weiß (#ffffff) als Hintergrund:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

Warum schlägt WCAG AAA bei diesem Farbpaar fehl?

Das sind die häufigsten Kontrast- und Umwandlungsfallen, auf die man achten sollte:

  • Verwechslung von AA large mit AA normal. Großer Text braucht nur 3:1, also kann ein Link, der in einer H1 gut lesbar ist, in Fließtextgröße trotzdem durchfallen. Wenn ein Paar 3.5:1 erreicht, besteht es Überschriften, aber scheitert an Absätzen.
  • HSL-Helligkeit als Ersatz für Kontrast verwenden. hsl(0, 100%, 50%) (rot) und hsl(240, 100%, 50%) (blau) haben beide L=50 %, aber sehr unterschiedliche Luminanz. Berechne Kontrast immer aus den RGB-Werten, nicht aus HSL-Helligkeit.
  • Alpha-Compositing vergessen. Text bei rgba(0, 0, 0, 0.6) auf Weiß ist effektiv #666666. Prüfe den geflatteten HEX, nicht den halbtransparenten Wert.
  • Falsche hex-Länge. #fff erweitert sich zu #ffffff, aber #ffff ist eine 4-stellige Kurzform mit Alpha-Byte. Überprüfe die Stellenzahl, wenn ein HEX-Feld Eingaben stillschweigend ablehnt.
  • display-P3 und sRGB mischen. Farben aus Design-Tools wie Figma im Wide-Gamut-Modus können außerhalb des sRGB-Bereichs liegen, und Browser klippen sie. Konvertiere im Quell-Tool nach sRGB, bevor du das HEX kopierst.
  • Kontrast nur gegen reines Weiß testen. Wenn das reale Layout Text auf #f3f4f6 oder auf einem Foto platziert, ist der sichtbare Kontrast geringer. Teste mit dem tatsächlichen Hintergrund.
Häufig gestellte Fragen

Welches Kontrastverhältnis brauche ich, um WCAG AA zu bestehen?

WCAG 2.1 AA verlangt 4.5:1 für normalen Fließtext und 3:1 für großen Text, wobei groß mindestens 18 pt (24 px) regulär oder 14 pt (18.66 px) fett bedeutet. UI-Komponenten und grafische Objekte brauchen 3:1 gegen ihren Hintergrund. AAA hebt die Latte auf 7:1 für normalen Text und 4.5:1 für großen Text.

Warum ergibt das HSL, das ich zurücktippe, leicht unterschiedliche RGB-Werte?

HSL wird in den meisten Tools als ganzzahlige Prozentsätze gespeichert, also kann der Rundlauf RGB zu HSL zu RGB bei jedem Kanal um eine Einheit driften. Die Drift liegt innerhalb einer JND und ist auf dem Bildschirm unsichtbar, aber wenn du exakte Rundlauf-Treue brauchst, halte den HEX- oder RGB-Wert als Quelle der Wahrheit und behandle HSL als Ansicht.

Verwendet dieses Tool sRGB-Gammakorrektur für den Kontrast?

Ja. Die Kontrastberechnung folgt der WCAG 2.x-Formel, die jeden sRGB-Kanal mit der Gammakurve linearisiert, die relative Luminanz berechnet und (L1 + 0.05) / (L2 + 0.05) nimmt. Einfacher Mittelwert der Kanäle oder naive HSL-Helligkeit gibt irreführende Zahlen und stimmt nicht mit dem WCAG-Ergebnis überein.

Wie behandle ich Alpha oder halbtransparente Farben?

WCAG-Kontrast ist gegen einen deckenden Hintergrund definiert, also flatte jede Alpha aus, indem du den Vordergrund zuerst über den echten Hintergrund kompositierst. Zum Beispiel ist ein 50 % schwarzer Textblock auf einer weißen Seite effektiv #808080 auf #ffffff. Übergib den geflatteten HEX an den Prüfer statt den halbtransparenten Wert.

Ist HEX #rgb dasselbe wie #rrggbb?

Ja. Die 3-stellige Kurzform erweitert jedes Nibble durch Wiederholung, also wird #f0c zu #ff00cc. Die 4-stellige und 8-stellige Form fügen einen Alpha-Kanal hinzu. Dieses Tool akzeptiert 3-stelliges, 6-stelliges und 8-stelliges HEX und behandelt das Alpha-Byte für den Kontrast nur als informativ, da WCAG eine deckende komposite Farbe verlangt.

Speichert ihr die Farben, die ich tippe oder auswähle?

Nein. Wir halten keine Aufzeichnung der Farben, die du testest, konvertierst oder auf Kontrast prüfst. Alles, was du tippst oder in den Picker ziehst, wird verworfen, wenn du den Tab schließt — kein Logging, keine Analyse deiner Farbwerte. Schau in die developer tools deines Browsers, wenn du selbst sehen willst.