Welches Kontrastverhältnis erfüllt WCAG AA?

Normaler Text braucht 4,5:1; großer Text (18pt+ oder 14pt fett) braucht 3:1.

HSL-Helligkeit unterscheidet sich von HSV-Wert; beide werden angezeigt, passend zur jeweiligen Konvention.

Beeinflusst Transparenz das Kontrastverhältnis?

Teilweise transparente Texte müssen zusammen mit dem tatsächlichen Hintergrund bewertet werden. Die einfache Vorschau geht von vollständig deckenden Farben aus.

Farb- und Kontrast-Konverter

Konvertiere Farben zwischen HEX, RGB, HSL und HSV und prüfe das Kontrastverhältnis nach WCAG für gut lesbaren Text.

Dateien und Inhalte werden lokal im Browser verarbeitet und nicht auf unseren Server hochgeladen.

Über dieses Tool

Gib eine Farbe als HEX-, RGB-, HSL- oder HSV-Wert ein und zeige die entsprechenden Werte in den anderen Formaten an. Vergleiche außerdem Vorder- und Hintergrundfarben, um zu prüfen, ob der Kontrast die Anforderungen von WCAG AA oder AAA für normalen und großen Text erfüllt.

Anleitung

Farben zwischen HEX, RGB, HSL und HSV umwandeln
Sofortige Farbvorschau
Kontrastverhältnis nach WCAG berechnen
Ergebnisse für AA und AAA anzeigen
Farbwerte mit einem Klick kopieren
Farbe eingeben: Gib einen HEX-, RGB-, HSL- oder HSV-Wert ein oder verwende den Farbwähler.
Werte kopieren: Kopiere das benötigte Format für CSS oder deine Gestaltungsrichtlinien.
Kontrast prüfen: Wähle Text- und Hintergrundfarbe aus und prüfe deren Lesbarkeit.

Beispiele

Kontrast einer Markenfarbpalette nach WCAG AA prüfen
HEX-Farbwerte aus Figma in hsl()-Werte für CSS-Variablen umwandeln
Textfarben für eine dunkle Darstellung überprüfen
Farbabstufungen eines Gestaltungssystems dokumentieren

Einschränkungen

Transparenz kann bei der Kontrastvorschau nur eingeschränkt berücksichtigt werden
Die Genauigkeit des Farbwählers hängt von der Kalibrierung des Bildschirms ab
Die eingegebenen Farbwerte werden direkt im Browser verarbeitet und nicht an einen Server gesendet.

FAQ

Welches Kontrastverhältnis erfüllt WCAG AA?: Normaler Text braucht 4,5:1; großer Text (18pt+ oder 14pt fett) braucht 3:1.
HSL vs. HSV?: HSL-Helligkeit unterscheidet sich von HSV-Wert; beide werden angezeigt, passend zur jeweiligen Konvention.
Beeinflusst Transparenz das Kontrastverhältnis?: Teilweise transparente Texte müssen zusammen mit dem tatsächlichen Hintergrund bewertet werden. Die einfache Vorschau geht von vollständig deckenden Farben aus.