Farbkonverter und Kontrastprüfer

Was dieses Werkzeug tut

Zwei Aufgaben, die sich immer als eine erweisen. Sie haben eine Farbe und brauchen sie in einer anderen Schreibweise — die Designdatei sagt das eine, das Stylesheet will das andere. Und Sie haben zwei Farben und müssen wissen, ob Text in der ersten auf der zweiten lesbar ist. Deshalb nimmt diese Seite zwei Farben, zeigt jede zugleich in allen Formaten und misst den Kontrast zwischen ihnen.

Alles läuft in Ihrem Browser. Nichts an einer Markenpalette, die noch nicht veröffentlicht ist, muss zum Umrechnen zu einem Server reisen.

Die fünf Schreibweisen

Jede davon lässt sich einfügen, und alle kommen wieder heraus:

• Hex — drei, vier, sechs oder acht Ziffern. Die Kurzformen verdoppeln jede Ziffer, #f0a bedeutet also #ff00aa. Vier und acht Ziffern tragen den Alphawert an letzter Stelle.
• RGB — die drei Kanäle als Zahlen oder Prozentwerte. Sowohl rgb(59, 130, 246) als auch rgb(59 130 246 / 50%) werden angenommen; die Kommaform ist das, was dieses Werkzeug zurückschreibt, weil sie immer noch das ist, was der meiste Code um Sie herum verwendet.
• HSL — Farbton in Grad, dann Sättigung und Helligkeit in Prozent. Farbtöne laufen um, 480 und -120 sind also gültig und bedeuten 120 und 240.
• OKLCH — Helligkeit, Chroma und Farbton in einem wahrnehmungsgleichmäßigen Raum. Die Helligkeit darf 62.8% oder 0.628 geschrieben werden.
• CSS-Namen — alle 148, einschließlich rebeccapurple und beider Schreibweisen jedes Graus. Ein Name erscheint in der Ausgabe nur bei genauer Übereinstimmung.

Eine Eigenheit ist wissenswert: Hex, RGB und OKLCH überstehen den Hin- und Rückweg unverändert, HSL aber nicht ganz. Es wird in der Genauigkeit ausgegeben, die Menschen tatsächlich lesen — ganze Grad, eine Nachkommastelle beim Prozent —, und die reicht nicht, um alle 16,7 Millionen sRGB-Farben zu adressieren. Wandeln Sie ein Hex nach HSL und zurück, und ein Kanal kann sich um eins bewegen. Die Alternative wäre eine Ausgabe wie hsl(217.22, 91.19%, 59.8%), die niemand einfügen möchte. Der Fehler liegt weit unter dem, was ein Auge sehen kann.

Warum es OKLCH gibt

HSL sieht aus, als beschriebe es Helligkeit, und tut es nicht. Seine Helligkeitszahl ist eine Eigenschaft der Zahlen, nicht des Lichts. Reines Gelb und reines Blau haben in HSL beide 50 % Helligkeit:

gelb   #ffff00   hsl 50%   oklch 96.8%
blau   #0000ff   hsl 50%   oklch 45.2%

Jeder sieht, dass Gelb das hellere von beiden ist, und OKLCH sagt es auch. Das ist nicht akademisch: Es ist der Grund, warum eine Palette, die bei konstanter HSL-Helligkeit den Farbton durchdreht, eine wild uneinheitlich wirkende Farbreihe ergibt, und warum derselbe Kniff in OKLCH eine Reihe ergibt, die wie eine Familie aussieht. Es ist auch der Grund, warum in OKLCH zwei Farben gleicher Helligkeit vor demselben Hintergrund meist einen ähnlichen Kontrast haben — was HSL überhaupt nicht zusichern kann.

Die beiden anderen Zahlen sind das Chroma — grob gesagt, wie farbig, ab 0 für Grau — und der Farbton in Grad. Anders als die HSL-Sättigung ist Chroma kein Prozentsatz von irgendetwas, weshalb der größte brauchbare Wert sowohl von der Helligkeit als auch vom Farbton abhängt.

Wenn eine Farbe nicht darstellbar ist

OKLCH kann mehr Farben beschreiben, als ein gewöhnlicher Bildschirm erzeugen kann. Verlangen Sie eine Helligkeit von 70 % bei einem Chroma von 0.4, und Sie haben ein Grün benannt, das im Prinzip existiert und nirgends in sRGB. Das Werkzeug klemmt eine solche Farbe in den Bereich und kennzeichnet sie als außerhalb von sRGB, statt Ihnen stillschweigend etwas anderes zurückzugeben.

Die Warnung erscheint nur, wenn das Klemmen die erhaltene Farbe wirklich verändert. Dieser Unterschied wiegt schwerer, als er klingt. sRGB-Rot liegt genau auf der Farbraumgrenze, ein veröffentlichter OKLCH-Wert dafür landet auf vier Nachkommastellen gerundet also technisch haarscharf außerhalb — um etwa zwei Zehntausendstel, was auf demselben Byte landet und unsichtbar ist. Davor zu warnen würde Ihnen beibringen, die Warnung zu ignorieren. Eine Farbe aus einer Palette mit großem Farbraum verfehlt ihn um ganze Schritte: Tailwind v4 blue-500 verlangt 261 von möglichen 255 im Blaukanal und ist auf einem sRGB-Bildschirm wirklich nicht die angeforderte Farbe.

Kontrast und seine drei Schwellen

Das Kontrastverhältnis vergleicht die relative Leuchtdichte zweier Farben. Es reicht von 1:1 bei zwei gleichen Farben bis 21:1 bei Schwarz auf Weiß, und mehr geht nicht. WCAG 2.1 setzt drei Schwellen, und sie sind nicht austauschbar:

• 4,5:1 für Fließtext — alles unter 18pt oder unter 14pt fett. Diese Schwelle ist gemeint, wenn jemand sagt, eine Farbe „falle beim Kontrast durch“.
• 3:1 für große Schrift — ab 18pt oder ab 14pt fett. Große Buchstabenformen tragen mehr Signal in sich selbst, also liegt die Latte tiefer.
• 3:1 für Bedienelemente und Grafiken — der Rand eines Eingabefelds, der Pfeil einer Auswahlliste, die Balken eines Diagramms. In WCAG 2.1 hinzugekommen und weithin übersehen, weil man seinen Text prüft und nie den Kasten darum.

AAA hebt die ersten beiden auf 7:1 und 4,5:1. Bei Fließtext lohnt es sich, das anzustreben, und mit einer Markenpalette ist es wirklich schwer zu erreichen; AA ist das, was Vorschriften und Prüfungen verlangen.

Die Punktgrößen in diesen Regeln sind CSS-Punkte, keine Pixel: 18pt sind 24px und 14pt etwa 18,7px bei Standardeinstellungen. Man nimmt leicht an, eine Überschrift mit 20px zähle als große Schrift. Sie tut es nicht.

Durchscheinende Farben

Halbtransparenter Text auf deckendem Hintergrund hat ein völlig wohldefiniertes Kontrastverhältnis: Der Browser mischt die beiden Farben vor dem Zeichnen, und dieses Werkzeug ebenso. Grauer Text mit 60 % Deckkraft ist, sobald er liegt, schlicht ein helleres Grau und wird als das gemessen, als was er liegt. Werkzeuge, die den Alphakanal ignorieren, melden das Verhältnis der Farbe, die Sie geschrieben haben, statt der, die jemand sieht — und das fällt immer zu hoch aus. Ein Barrierefreiheitsprüfer, der sich zu Ihren Gunsten irrt, ist schlimmer als gar keiner.

Ein durchscheinender Hintergrund ist eine andere Lage, und das Werkzeug lehnt sie ab. Was hindurchscheint, hängt davon ab, was darunter liegt, und das können die zwei Farben auf dieser Seite nicht beantworten. Lösen Sie den Hintergrund zu der Farbe auf, zu der er tatsächlich zusammengerechnet wird, und messen Sie diese.

Was das Verhältnis nicht sagt

Ein bestandenes Verhältnis ist ein Boden, kein Urteil. Drei Dinge, die es nicht abdeckt:

• Farbenblindheit. Rot und Grün gleicher Leuchtdichte haben ein Verhältnis nahe 1:1 und sind für jeden ununterscheidbar — aber zwei Farben können das Verhältnis bestehen und dennoch das Einzige sein, was zwei Zustände trennt, was für jeden scheitert, der sie nicht auseinanderhält. Tragen Sie Bedeutung nie allein im Farbton.
• Dünne Schriftschnitte. Die Formel weiß nichts über die Strichstärke. Ein Haarschnitt bei 4,5:1 kann schwerer zu lesen sein als ein normaler Schnitt bei 4:1.
• Die Formel selbst. Der WCAG-2-Kontrast gilt als unfreundlich gegenüber heller Schrift auf dunklem Grund und meldet Verhältnisse, die höher wirken, als sie sich lesen. APCA, für WCAG 3 entworfen, bildet das besser ab — ist aber nicht normativ, keine Prüfung akzeptiert es bislang, und zwei widersprüchliche Werte anzuzeigen hülfe niemandem. Deshalb steht es hier und nicht oben.

Eine Umsetzungsnotiz für alle, die Ergebnisse mit eigenem Code vergleichen: Die Leuchtdichteformel verwendet die Schwelle 0.03928, die sich leicht von der 0.04045 der heutigen sRGB-Definition unterscheidet. WCAG zitiert den älteren Wert, also wird er hier verwendet. Der Spezifikation zu folgen wiegt schwerer als innere Sauberkeit, und der Unterschied macht aus einem Bestanden nie ein Durchgefallen.