So benutzt du das Tool
Oben sitzt der Farbkonverter, darunter die Kontrastprüfung. Die beiden Bereiche arbeiten unabhängig voneinander.
Farbkonverter
- Trag ins Feld Farbe einen CSS-Farbwert ein oder wähle links im Farbwähler eine Farbe. HEX wird mit 3, 4, 6 und 8 Stellen gelesen, das
#darfst du weglassen. Bei rgb() gehen beide Schreibweisen,rgb(51, 102, 255)undrgb(51 102 255), und auch Farbnamen wierebeccapurplefunktionieren. - Mit dem Regler Alpha (Deckkraft) neben dem Farbfeld stellst du die Transparenz ein. An dem Schachbrettmuster hinter dem Farbfeld, das mehr oder weniger durchscheint, erkennst du die Transparenz.
- Unter Alle Formate stehen sieben Zeilen: HEX, RGB, HSL, HWB, LAB, LCH und OKLCH. Jede lässt sich einzeln kopieren. Liegt das Alpha unter 100 %, kommt eine achtstellige Zeile „HEX (mit Alpha)“ hinzu.
Kontrastprüfung
- Gib Textfarbe und Hintergrundfarbe ein. „Farben tauschen“ vertauscht die beiden.
- Unter Kontrastverhältnis steht das Verhältnis. Die vier Felder darunter zeigen für jede Stufe „Bestanden“ oder „Nicht bestanden“.
- Ganz unten siehst du beide Farben in einer Vorschau mit großem und mit normalem Text.
Eine Farbe, sieben Schreibweisen
Aus dem voreingestellten #3366ff wird Folgendes:
| Format | Ergebnis | Was die Zahlen bedeuten |
|---|---|---|
| HEX | #3366ff |
Rot, Grün und Blau als je zwei Hex-Stellen |
| RGB | rgb(51, 102, 255) |
Rot, Grün und Blau von 0 bis 255 |
| HSL | hsl(225, 100%, 60%) |
Farbtonwinkel, Sättigung, Helligkeit |
| HWB | hwb(225 20% 0%) |
Farbtonwinkel, Weißanteil, Schwarzanteil |
| LAB | lab(47.4 26.93 -82.47) |
Helligkeit, Grün-Rot-Achse, Blau-Gelb-Achse |
| LCH | lch(47.4 86.76 288.08) |
Helligkeit, Buntheit, Farbtonwinkel |
| OKLCH | oklch(0.5726 0.2338 265.28) |
Helligkeit, Buntheit, Farbtonwinkel |
HEX und RGB sind dieselben Zahlen in zwei Zahlensystemen. HSL und HWB verteilen diese Zahlen auf Achsen, mit denen Menschen besser umgehen können. LAB, LCH und OKLCH sind Farbräume, die sich an der menschlichen Farbwahrnehmung orientieren. OKLCH ist eine Weiterentwicklung von LCH, die in der Wahrnehmung gleichmäßiger ist, und lässt sich in CSS direkt als oklch() schreiben. Obwohl es dasselbe Blau ist, beträgt der Farbtonwinkel in HSL 225, in LCH 288,08 und in OKLCH 265,28. Jeder Farbraum misst den Winkel von einem anderen Bezugspunkt aus. Überträgst du die Zahlen eines Formats in ein anderes, bekommst du eine andere Farbe.
Helligkeit in HSL und Helligkeit in OKLCH
Die Helligkeit in HSL ist der Mittelwert aus dem größten und dem kleinsten der drei Werte für Rot, Grün und Blau. Zu dem, was das Auge als hell empfindet, passt sie deshalb schlecht. Reines Gelb hsl(60 100% 50%) und reines Blau hsl(240 100% 50%) haben dieselbe HSL-Helligkeit von 50 %. Gibst du beide in den Konverter ein, zeigt sich:
- Gelb wird zu
oklch(0.968 0.211 109.77), die OKLCH-Helligkeit ist 0,968. - Blau wird zu
oklch(0.452 0.3132 264.05), die OKLCH-Helligkeit ist 0,452.
Vor weißem Hintergrund gemessen, tritt der Unterschied offen zutage. Mit der Hintergrundfarbe #ffffff kommt Gelb #ffff00 in der Kontrastprüfung auf 1,07:1 und ist kaum zu erkennen, Blau #0000ff auf 8,59:1. Für eine Reihe von Farben, die sich nur im Farbton unterscheiden und ähnlich hell wirken sollen, gleichst du deshalb besser die OKLCH-Helligkeit an als die HSL-Helligkeit. Das Ergebnis fällt gleichmäßiger aus.
So wird der WCAG-Kontrast berechnet
Gerechnet wird mit der Formel aus WCAG 2. Für jede Farbe wird die relative Luminanz (relative luminance) bestimmt, das ist die gewichtete Summe der linearisierten Werte für Rot, Grün und Blau. Die hellere Farbe ist L1, die dunklere L2, und das Verhältnis lautet (L1 + 0,05) ÷ (L2 + 0,05). Zwei gleiche Farben ergeben 1:1, Schwarz und Weiß 21:1.
| Stufe auf dem Bildschirm | Nötiges Verhältnis |
|---|---|
| AA · normaler Text | 4,5:1 |
| AA · großer Text | 3:1 |
| AAA · normaler Text | 7:1 |
| AAA · großer Text | 4,5:1 |
„Großer Text“ beginnt in normaler Schriftstärke bei 18 pt (etwa 24 px) und fett bei 14 pt (etwa 19 px). AA ist die Stufe, die die meisten Richtlinien zur Barrierefreiheit verlangen, AAA ist strenger.
- Die voreingestellte Textfarbe
#1f2937auf der Hintergrundfarbe#ffffffkommt auf 14,67:1 und besteht alle vier Stufen. - Das Grau
#767676erreicht auf Weiß 4,54:1 und besteht AA für normalen Text. Das eine Stufe hellere#777777schafft es mit 4,47:1 nicht.
Die Anzeige schneidet das Verhältnis nach der zweiten Nachkommastelle ab, statt zu runden. Sonst könnte eine Kombination mit 4,499:1 als 4,50:1 erscheinen und trotzdem als nicht bestanden markiert sein. Bewertet wird mit dem ungekürzten Wert.
Kontrast bei halbtransparenten Farben
Die WCAG-Formel kennt nur deckende Farben. Farben mit Alpha werden deshalb zuerst zu der Farbe verrechnet, die am Bildschirm tatsächlich zu sehen ist.
- Eine halbtransparente Hintergrundfarbe gilt als auf weißen Grund gelegt.
- Eine halbtransparente Textfarbe gilt als auf die so ermittelte Hintergrundfarbe gelegt.
Die Textfarbe rgb(0 0 0 / 50%) auf der Hintergrundfarbe #ffffff ergibt graue Schrift mit 3,97:1 und besteht nur AA für großen Text. Liegt auf deiner Seite hinter dem halbtransparenten Hintergrund kein Weiß, sondern eine andere Farbe oder ein Foto, sieht das Ergebnis anders aus. Gib in dem Fall die Hintergrundfarbe, die am Ende wirklich zu sehen ist, als deckenden Wert ein.
Farben außerhalb des sRGB-Farbraums
Mit LAB, LCH und OKLCH lassen sich auch Farben notieren, die ein gewöhnlicher sRGB-Bildschirm nicht darstellen kann. oklch(70% 0.3 150) ist so eine Farbe. Gibst du sie ein, meldet das Tool, dass sie außerhalb des sRGB-Farbraums liegt, und die Ergebnisse sehen so aus:
- HEX ist
#00cb00, RGB istrgb(0, 203, 0). Das ist nicht die eingegebene Farbe, sondern eine auf den sRGB-Bereich beschnittene. - Die Zeilen LAB, LCH und OKLCH enthalten die ursprüngliche, unbeschnittene Farbe.
- Die Zeilen HSL und HWB übertragen wie HEX und RGB die beschnittene Farbe in ihr Format. Dort steht
hsl(120, 100%, 39.84%)undhwb(120 0% 20.32%), Zahlen außerhalb des gültigen Bereichs kommen nicht vor.
Auch das Farbfeld und der Farbwähler zeigen die beschnittene Farbe.