Konvertieren Sie jede Farbe und prüfen Sie den Kontrast mit dem Farbkonverter — HEX, RGB, HSL und WCAG-Verhältnisse, alles in Ihrem Browser.
Drei Ansichten derselben Farbe
Design-Tools, CSS und Inspektionspanels zeigen Farben unterschiedlich. HEX ist eine kompakte hexadezimale Kodierung, RGB drückt die Rot/Grün/Blau-Kanäle direkt aus, und HSL beschreibt dieselbe Farbe als Farbton, Sättigung und Helligkeit.
Keines der Formate ist genauer — es sind Umrechnungen desselben sRGB-Werts. Die Wahl ist eine Frage der Lesbarkeit: HSL eignet sich besser zum Nachdenken über hellere oder weniger gesättigte Varianten, HEX ist kompakt, RGB entspricht den Gerätekanälen.
Wie die Formate einander zugeordnet sind
`#3b82f6` dekodiert zu rgb(59, 130, 246). Rechnen Sie diese Kanäle nach HSL um, erhalten Sie hsl(217.2, 91.4%, 59.8%) — ein mittleres Blau.
Umrechnungen sind in der Praxis verlustfrei, wenn Sie auf ganze Kanäle runden — deshalb zeigen Konverter aus jedem Eingabeformat dieselbe Farbfläche.
- HEX: #rrggbb oder #rgb-Kurzform; #rrggbbaa ergänzt Alpha
- RGB: rgb(r, g, b) mit Kanälen von 0-255 oder Prozentwerten
- HSL: hsl(h, s%, l%) mit Farbton 0-360 Grad und Sättigung/Helligkeit 0-100%
Alpha: wann der vierte Kanal zählt
Alpha speichert Transparenz. Achtstelliges HEX (#rrggbbaa), rgba() und hsla() tragen sie alle.
Transparenz verändert den effektiven Kontrast: Ein halbtransparenter Vordergrund vermischt sich mit dem Hintergrund dahinter. Ein Paar, das bei 100 % Deckkraft einen Kontrasttest besteht, kann über einem bewegten Bild durchfallen.
Kontrast: die Zahl, die Lesbarkeit schützt
WCAG 2.x definiert Kontrast als Verhältnis der relativen Leuchtdichte zweier Farben, von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß).
Die praktischen Schwellen: mindestens 4,5:1 für normalen und 3:1 für großen Text für AA sowie 7:1 für normalen Text für AAA.
| Ziel | Normaler Text | Großer Text |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Ein wiederholbarer Farb-Workflow
- Geben Sie eine Farbe aus Ihrem Design-Tool als HEX, rgb() oder hsl() ein.
- Lesen Sie die äquivalenten Werte und kopieren Sie das Format, das Ihre Codebasis verwendet.
- Setzen Sie Vorder- und Hintergrundfarbe im Kontrastprüfer.
- Bestätigen Sie, dass das Paar das AA- oder AAA-Ziel für Ihre Textgröße erreicht.
- Testen Sie die endgültige Kombination auf echten Bildschirmen, auch im Dunkelmodus.
FAQ
Q.Sind Umrechnungen verlustfrei?
A.In der Praxis ja: HEX, RGB und HSL beschreiben dieselbe sRGB-Farbe, und Konverter runden Kanalwerte auf ganze Zahlen — das ist, was CSS und Design-Tools verwenden.
Q.Verlassen meine Farben den Browser?
A.Nein. Umrechnung und Kontrastberechnung laufen lokal auf Ihrem Gerät.
Q.Wann brauche ich AAA statt AA?
A.AA ist das übliche Compliance-Ziel und für die meisten öffentlich sichtbaren Texte erforderlich. AAA ist ein strengerer Standard, nützlich für inhaltsreiche Produkte oder wenn Barrierefreiheit eine Produktanforderung ist. Streben Sie AA als Basis an und AAA, wo machbar.
Referenzen
Dieser Leitfaden basiert auf den folgenden Spezifikationen:
- W3C CSS Color Module Level 4: https://www.w3.org/TR/css-color-4/
- W3C WCAG 2.2 – Kontrast (Minimum): https://www.w3.org/TR/WCAG22/#contrast-minimum
- IEC 61966-2-1 – sRGB-Farbraum (über ICC): https://www.color.org/srgb.xalter
Eine Farbe konvertieren und Kontrast prüfen
HEX, RGB, HSL, Alpha und WCAG-Verhältnisse — vollständig im Browser.
Dieselbe Farbe, bessere Entscheidungen
Formatkonvertierung ist der einfache Teil. Die Entscheidungen — welches Format Ihr Team nutzt, ob Alpha sicher ist, ob ein Paar den Kontrast besteht — entscheiden über Qualität.
Konvertieren und verifizieren Sie mit dem Farbkonverter und prüfen Sie das endgültige Paar, bevor Sie die Palette festlegen.