Farbkonverter - HEX, RGB, HSL und WCAG-Kontrast
Farbkonverter und Kontrastprüfer
HEX, rgb(), hsl() oder ein CSS-Farbname — alle vier werden erkannt.
Abstufungen
Derselbe Farbton in elf Helligkeitsstufen. Ein Klick macht ihn zur aktuellen Farbe.
Kontrast
Das Verhältnis zwischen zwei Farben, gemessen so, wie WCAG es definiert.
| Paar | Verhältnis | AA (4,5:1) | AAA (7:1) |
|---|
Was dieses Werkzeug leistet
Eine Farbe zwischen Schreibweisen umzurechnen sind fünf Zeilen Arithmetik. Die schwierigere Frage ist, ob Text in dieser Farbe tatsächlich lesbar ist, und diese Antwort braucht einen Schritt, den die meisten Werkzeuge auslassen. Beides steht auf dieser Seite, mit genau der Farbe, die Sie eingegeben haben.
So funktioniert es
- 1 Geben Sie eine Farbe in beliebiger Schreibweise ein oder nutzen Sie den Farbwähler.
- 2 Kopieren Sie die gewünschte Schreibweise oder klicken Sie eine Abstufung an, um dorthin zu wechseln.
- 3 Lesen Sie die Kontrasttabelle. Alles, was als nicht bestanden markiert ist, wird für jemanden schwer lesbar sein.
Warum derselbe Farbton in HSL anders wirkt
HSL rundet auf ganze Grad und ganze Prozent, daher liefert der Weg nach HSL und zurück nicht immer genau die Ausgangsbytes. Deshalb wird der hier gezeigte HEX-Wert stets aus Ihrer Eingabe abgeleitet, nie aus einem Hin und Her über HSL — sonst würde das Feld bei jedem Klick um einen Schritt driften.
Was die Kontrastzahlen bedeuten
Das Verhältnis reicht von 1:1 bei zwei gleichen Farben bis 21:1 bei reinem Schwarz auf reinem Weiß. Die Schwellen unten sind die, gegen die das Werkzeug prüft.
| 4.5:1 | Normaler Fließtext, WCAG AA |
| 3:1 | Großer oder fetter Text, WCAG AA |
| 7:1 | Normaler Fließtext, WCAG AAA |
| 21:1 | Das höchstmögliche Verhältnis: Schwarz auf Weiß |
Der Schritt, den die meisten Werkzeuge auslassen
Die relative Leuchtdichte ist nicht der Mittelwert der Kanalwerte. Jeder Kanal muss zuerst linearisiert werden, denn die Zahlen in einem HEX-Code sind gammakodiert und nicht proportional zum Licht. Lässt man diesen Schritt weg, kommt trotzdem eine plausible Zahl heraus — nur die falsche, und der Fehler ist in den Mitteltönen am größten, wo die meisten Oberflächenfarben liegen.
Kontrast ist notwendig, aber nicht hinreichend
Ein Paar kann 4,5:1 bestehen und trotzdem eine schlechte Wahl sein: Farbfehlsichtigkeit macht manche Paare selbst bei hohen Verhältnissen ununterscheidbar, und Bedeutung sollte nie allein durch Farbe getragen werden. Werten Sie ein Bestanden hier als überschrittene Untergrenze, nicht als Urteil über die Gestaltung.