Farbkonverter & Kontrastprüfer
Farben zwischen HEX, RGB und HSL konvertieren und WCAG-Kontrastverhältnisse für barrierefreien Text prüfen. Die gesamte Konvertierung läuft in Ihrem Browser.
Werkzeugbereich
Vorschau
Konvertierungen
Kontrastprüfer
So konvertieren Sie eine Farbe und prüfen den Kontrast online
Erfahren Sie, wie Sie Farben zwischen HEX, RGB und HSL konvertieren und WCAG-Kontrastverhältnisse lokal im Browser prüfen.
- 1
Farbe eingeben
Geben Sie einen HEX-, rgb()- oder hsl()-Wert ein oder wählen Sie eine Beispiel-Farbfläche.
- 2
Konvertierungen lesen
Kopieren Sie die äquivalenten HEX-, RGB- und HSL-Werte aus den Ergebnissen.
- 3
Kontrast prüfen
Setzen Sie Vorder- und Hintergrundfarbe und lesen Sie das Verhältnis samt AA/AAA-Kennzeichnung.
- 4
Barrierefreies Paar verwenden
Verwenden Sie das geprüfte Paar in Ihrem CSS oder Ihren Design-Tokens.
Typische Anwendungsfälle
- 1Design-Tokens zwischen HEX, RGB und HSL für CSS und Design-Tools konvertieren
- 2Text- und Hintergrundkontrast gegen WCAG-AA- oder AAA-Ziele prüfen
- 3Barrierefreie Markenfarben wählen, bevor eine Palette festgelegt wird
- 4Farben aus Mockups in konsistente CSS-Werte überführen
Häufig gestellte Fragen
Welche Farbformate werden unterstützt?
HEX (#rgb, #rrggbb, #rrggbbaa), rgb()/rgba() mit Kanälen von 0-255 oder Prozentwerten sowie hsl()/hsla() mit Grad- und Prozentwerten. Alphawerte bleiben erhalten.
Verlassen meine Farben den Browser?
Nein. Sämtliche Konvertierungs- und Kontrastberechnungen laufen lokal in Ihrem Browser. Nichts wird hochgeladen oder gespeichert.
Welches Kontrastverhältnis sollte ich anstreben?
WCAG 2.x empfiehlt mindestens 4,5:1 für normalen und 3:1 für großen Text (AA); 7:1 für normalen Text auf AAA-Niveau. Der Prüfer kennzeichnet jedes Paar mit AA oder AAA.
Wie wird Transparenz bei Kontrastprüfungen behandelt?
Halbtransparente Farben werden vor der Berechnung über den Hintergrund gelegt, und ein halbtransparenter Hintergrund wird zuerst über Weiß gelegt. Das Ergebnis entspricht dem sichtbaren Eindruck und nicht den rohen Kanalwerten.
Warum unterscheiden sich die Schwellen für großen Text?
WCAG 2.x erlaubt für großen Text ein niedrigeres Verhältnis, weil die Striche im Verhältnis zur Glyphengröße dicker sind: 3:1 statt 4,5:1 bei AA. Der Prüfer kennzeichnet jedes Paar mit der erreichten Stufe.
Verwandte Anleitungen
Verwandte Tools
Sie sind verantwortlich für die Schlüsselverwaltung und Ausgabevalidierung.