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.
Abzeichen, Icons und Platzhaltertext sind oft von strengen Schwellen ausgenommen — sie anzuwenden macht Schnittstellen trotzdem für alle lesbarer.
| 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.
Verwandte Artikel
CSS-Minifier-Leitfaden: Stylesheets verkleinern
CSS besteht gewichtsmäßig zu großen Teilen aus Leerraum und Kommentaren. Ein Minifier entfernt beides — und ein guter weiß genau, was überleben muss.
Zertifikat-Decoder: X.509-Details lesen
Jeder TLS-Handshake beginnt mit einem Zertifikat. Dekodieren Sie die Felder, die zählen: Subject, Aussteller, Gültigkeit, öffentlicher Schlüssel und Fingerprints — lokal.
RSA-Schlüsselpaar-Leitfaden: PEM erzeugen
Öffentliche und private Schlüssel, PEM-Header, Schlüssellängen und Speichergewohnheiten. Erzeugen Sie ein Paar lokal und verstehen Sie genau, was die Dateien bedeuten.
CSV-zu-JSON-Konverter-Leitfaden
CSV wirkt einfach, bis ein Feld ein Komma, einen Zeilenumbruch oder ein führendes Gleichheitszeichen enthält. Lernen Sie die RFC-4180-Regeln und konvertieren Sie Daten, ohne etwas zu verlieren.
Cron-Ausdruck-Leitfaden: Fünf Felder
Ein Cron-Ausdruck besteht aus fünf Feldern, die offensichtlich wirken, bis eines falsch ist. Lernen Sie die Syntax, die Wochentags-Falle und wie Sie die nächsten Ausführungen vor dem Einsatz prüfen.
Regex-Tester-Anleitung: Muster lokal testen
Die meisten Regex-Fehler werden sichtbar, sobald Sie die Treffer sehen: falsche Flags, gierige Quantoren oder eine Gruppe, die Sie nie beabsichtigt haben. Testen Sie lokal und lesen Sie die tatsächlichen Treffer, bevor Sie das Muster verantwortlich machen.