Zum Hauptinhalt springen

Sie sind verantwortlich für die Schlüsselverwaltung und Ausgabevalidierung.

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.

Beispiel laden:

Vorschau

Konvertierungen

HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217.2, 91.2%, 59.8%)

Kontrastprüfer

Kontrastverhältnis: 3.68:1Unter AA

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. 1

    Farbe eingeben

    Geben Sie einen HEX-, rgb()- oder hsl()-Wert ein oder wählen Sie eine Beispiel-Farbfläche.

  2. 2

    Konvertierungen lesen

    Kopieren Sie die äquivalenten HEX-, RGB- und HSL-Werte aus den Ergebnissen.

  3. 3

    Kontrast prüfen

    Setzen Sie Vorder- und Hintergrundfarbe und lesen Sie das Verhältnis samt AA/AAA-Kennzeichnung.

  4. 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

Sicherheitstipps

  • Die Konvertierung läuft lokal — Sie können Farben proprietärer Marken-Assets prüfen, ohne sie hochzuladen
  • Verlassen Sie sich nicht allein auf Farbe, um Bedeutung zu vermitteln; kombinieren Sie sie mit Icons oder Textlabels
  • Kontrast auf den tatsächlichen Bildschirmen und Lichtverhältnissen der Nutzer prüfen
  • Für Datenvisualisierung und Statusanzeigen farbblindsichere Paletten bevorzugen

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.

Verwandte Anleitungen

Verwandte Tools

Ihre Eingaben verbleiben auf Ihrem Gerät.