HEX, RGB, HSL, CMYK und Kontrast von Text prüfen

Ein Farbcode ist eine Farbe, die in einer anderen Schreibweise notiert wird. HEX, RGB und HSL beschreiben dasselbe Licht auf dem Bildschirm und lassen sich bis auf Rundungsfehler exakt ineinander umrechnen. CMYK beschreibt Druckfarbe auf Papier, deshalb ist die Umrechnung aus Bildschirmwerten nur eine Schätzung. Das WCAG-Kontrastverhältnis ist eine eigene Kennzahl, die vergleicht, wie hell sich zwei Farben voneinander unterscheiden, und sie entscheidet darüber, ob Text gut lesbar ist. Füge eine Farbe in den Farbkonverter ein, um alle Formate auf einmal zu sehen.

FarbkonverterFarbe in anderem Format brauchenKostenlos loslegen

Wenn die gesuchte Farbe in einem Foto, einem Logo oder einem Screenshot steckt, lies sie zuerst mit der Farbpipette für Bilder am Pixel ab und füge den HEX-Code dann hier ein. So wählst du eine exakte Farbe aus einem Bild aus erklärt die einzelnen Schritte.

Hex und RGB sind dieselben Zahlen

Ein HEX-Code besteht aus drei Paaren hexadezimaler Ziffern. #34D6A0 enthält einen Rot-, einen Grün- und einen Blauwert. Jedes Paar ist eine Zahl von 00 bis FF, also dezimal von 0 bis 255. 34 ist also 52, D6 ist 214 und A0 ist 160, die RGB-Form lautet rgb(52, 214, 160).

Die Schreibweise als Hexadezimalzahl ändert nur, wie die Zahl aussieht. Die Kurzform #abc bedeutet #aabbcc, bei der jede Ziffer verdoppelt wird. Ein achtstelliger Code hängt am Ende ein Alpha-Paar an, von 00 für vollständig transparent bis FF für vollständig deckend. #34D6A080 ist also ungefähr halb transparent. RGBA schreibt dieselbe Transparenz als Zahl von 0 bis 1.

CSS akzeptiert auch Farbnamen. rebeccapurple entspricht #663399. Der Konverter liest Namen über den Browser selbst aus, daher funktioniert jeder Name, den der Browser kennt.

HSL beschreibt eine Farbe so, wie Menschen sie beschreiben

HSL steht für Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness). Der Farbton ist ein Winkel auf dem Farbkreis: Rot liegt bei 0 Grad, Grün bei 120 und Blau bei 240. Die Sättigung sagt, wie weit die Farbe von Grau entfernt ist, und die Helligkeit, wie weit sie von Schwarz oder Weiß entfernt ist.

Dieselbe Farbe #34D6A0 ist hsl(160, 66%, 52%). Ihr Farbton liegt zwischen Grün und Blau, ihre Sättigung ist hoch und ihre Helligkeit leicht über der Mitte. HSL ist die einfachste Form für manuelle Anpassungen, weil du den Farbton beibehalten und nur die Helligkeit verschieben kannst, um einen helleren oder dunkleren Ton zu erhalten.

HSV ist HSL ähnlich, verwendet aber statt der Helligkeit den Wert (Value), also die Helligkeit des stärksten Kanals. Manche Farbwähler arbeiten damit, du begegnest ihm also eventuell in anderen Werkzeugen. Der Konverter zeigt HSV neben HSL an, damit du beides vergleichen kannst.

CMYK ist für Druckfarbe gedacht, deshalb ist es eine Schätzung

Bildschirme addieren Licht: Rot, Grün und Blau zusammen ergeben Weiß. Drucker ziehen mit Farbe Licht ab: Cyan, Magenta, Gelb und Schwarz auf weißem Papier. Die beiden Systeme lassen sich nicht exakt deckungsgleich abbilden, deshalb ist ein CMYK-Wert immer eine Übersetzung.

Der Konverter verwendet die einfache Formel. Schwarz ist K, also eins minus dem größten der Werte Rot, Grün und Blau auf einer Skala von 0 bis 1. Cyan, Magenta und Gelb werden anschließend aus dem berechnet, was von K übrig bleibt. Die Formel berücksichtigt weder die Farbe, das Papier noch das Farbprofil, das der Drucker verwendet. Das gedruckte Ergebnis wird deshalb abweichen, und sehr leuchtende Farben lassen sich mit CMYK-Farben womöglich gar nicht drucken. Nutze den CMYK-Wert, um das Gespräch mit einer Druckerei zu beginnen, und fordere vor einer größeren Auflage einen Proof an.

Kontrast hängt von der Helligkeit ab, nicht vom Farbton

Das WCAG-Kontrastverhältnis vergleicht zwei Farben anhand ihrer relativen Luminanz. Die Luminanz wird aus den Werten für Rot, Grün und Blau nach der Gammakorrektur berechnet. Grün zählt dabei am stärksten, weil das menschliche Auge darauf am empfindlichsten reagiert. Jeder Kanal wird zunächst von der Skala 0 bis 255 umgerechnet, und die Luminanz ergibt sich als 0,2126 mal Rot, plus 0,7152 mal Grün, plus 0,0722 mal Blau.

Das Verhältnis ist die hellere Luminanz plus 0,05, geteilt durch die dunklere Luminanz plus 0,05. Schwarz auf Weiß ergibt 21 zu 1, den größtmöglichen Wert. Zwei Farben können sich im Farbton deutlich unterscheiden und trotzdem ein niedriges Verhältnis haben, wenn sie gleich hell sind. Genau diesen Fall soll die Prüfung aufdecken. Derselbe geringe Kontrast ist auch der Grund, warum QR-Codes nicht gelesen werden.

Die Schwellenwerte

WCAG 2.x legt zwei Stufen fest, und welches Verhältnis verlangt wird, hängt von der Textgröße ab.

• Stufe AA: 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text.
• Stufe AAA: 7 zu 1 für normalen Text und 4,5 zu 1 für großen Text.

Großer Text sind 24 Pixel oder mehr oder 18,66 Pixel und fett. Alles Kleinere gilt als normaler Text. Grauer Text auf Weiß scheitert häufig. Ein mittleres Grau wie #777777 auf Weiß kommt auf etwa 4,48 zu 1. Das verfehlt AA für normalen Text knapp, besteht aber AA für große Überschriften.

Der Konverter zeigt das Verhältnis auf zwei Nachkommastellen gerundet an, die Bewertung jeder Stufe beruht aber auf dem exakten Wert. Ein Wert, der als 4,50 angezeigt wird, kann deshalb trotzdem durchfallen, wenn er knapp darunter liegt. Die Prüfung misst nur eine Sache. Schriftstärke, Zeilenabstand oder die Wahrnehmung durch Menschen mit Farbenblindheit berücksichtigt sie nicht. Teste daher auch die echte Seite in den tatsächlich verwendeten Größen.

Tönungen und Abstufungen

Der Streifen unter dem Konverter zeigt neun Stufen rund um die Farbe: vier Aufhellungen, die Richtung Weiß gemischt sind, die Farbe selbst und vier Abdunklungen, die Richtung Schwarz gemischt sind. Ein Klick auf eine Stufe kopiert ihren HEX-Code. Das hilft, wenn du ein Set verwandter Farben brauchst, etwa einen hellen Hintergrund, einen Hover-Zustand und eine dunkle Textfarbe, die alle aus einem Markenwert stammen. Prüfe jedes Paar, das du auswählst, im Abschnitt zum Kontrast, bevor du es verwendest.

So geht es mit fixmint

1. Füge eine Farbe im Feld Color als HEX, RGB, HSL oder CSS-Namen wie rebeccapurple ein.
2. Lies die Zeilen HEX, RGB, HSL, HSV und CMYK ab. Klicke neben der benötigten Zeile auf Copy. CMYK ist als ungefähr gekennzeichnet.
3. Trage deine Hintergrundfarbe unter Background ein oder wähle sie über das Farbfeld aus und lies das Verhältnis unter On white, On black und On your background ab.
4. Prüfe die vier Markierungen unter jedem Verhältnis: AA und AAA, jeweils für normalen und großen Text.
5. Tippe unter Tints and shades auf ein Farbfeld, um es zu kopieren.

Kurze Antworten

Ist der CMYK-Wert exakt?

Nein. Es handelt sich um eine reine Rechenumwandlung, die Drucker, Papier und Farbprofil ignoriert. Betrachte sie als Ausgangspunkt und fordere einen Proof an.

Macht ein bestandenes Kontrastverhältnis ein Design barrierefrei?

Es bedeutet, dass die Textfarben eine messbare Schwelle erfüllen. Barrierefreiheit hängt außerdem von Größe, Abständen, Bewegung und dem Aufbau der Seite ab. Das Verhältnis ist deshalb ein Anhaltspunkt, keine vollständige Prüfung.

Welches Format sollte ich in einem Stylesheet speichern?

Das, das du am einfachsten lesen und bearbeiten kannst. HEX ist kompakt und verbreitet. HSL lässt sich leichter von Hand anpassen, weil du die Helligkeit änderst, ohne den Farbton zu verändern.