Farb-Konverter
Konvertiere jede Farbe zwischen HEX, RGB, HSL und HSV. Nutze den Picker oder tippe in ein beliebiges Feld — die anderen aktualisieren sich live. Mit WCAG-Kontrastprüfung für barrierefreie Farbpaare.
Hilfreich beim Übernehmen von Design-System-Farben, beim Wählen barrierefreier Text/Hintergrund-Paare und beim Abgleichen von Werten zwischen Werkzeuge.
WCAG-Kontrastprüfung
Pick a foreground and background color to check whether they meet the accessibility minimums from WCAG 2.1.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px — quick brown fox.
WCAG-Schwellen
- AA — normal text: contrast ratio ≥
4.5:1. - AA — large text (18 pt or 14 pt bold): ≥
3:1. - AAA — normal text: ≥
7:1. - AAA — large text: ≥
4.5:1. - UI components and graphical objects: ≥
3:1against adjacent colors.
Das Verhältnis wird aus der relativen Luminanz gemäß WCAG 2.1 berechnet, über die linearisierten sRGB-Kanäle und die Gewichte 0.2126·R + 0.7152·G + 0.0722·B.
Formatieren-Hinweise
- HEX accepts
#rgb,#rgba,#rrggbband#rrggbbaaforms. The leading#is optional in the input. - RGB input accepts
rgb(r, g, b),rgba(r, g, b, a)and bare comma- or space-separated triplets like59, 130, 246. - HSL: hue is 0–360°, saturation and lightness are percentages.
hsl(217 91% 60%)(CSS Color 4) is accepted alongside the legacy comma form. - HSV (also called HSB) is not in CSS — it's shown here because it's useful in design tools. The display form is
hsv(h, s%, v%).
FAQ
Warum stimmen HSL und HSV nicht exakt mit meinen Photoshop-/Figma-Werten überein?
Rundung. Hue, Saturation und Lightness sind stetig; Werkzeuge runden sie unterschiedlich. Eine Differenz von 1° beim Hue oder 1% bei der Saturation ist erwartbar und visuell identisch.
Berücksichtigt der Kontrastprüfer Alpha (Transparenz)?
Nein. WCAG-Verhältnisse setzen vollständig deckende Farben voraus. Wenn dein Vordergrund halbtransparent ist, mische ihn zuerst mit dem Hintergrund und prüfe die resultierende deckende Farbe.
Was ist mit APCA, dem neuen Kontrast-Algorithmus?
APCA ist Kandidat für den Ersatz des WCAG-2.x-Verhältnisses in WCAG 3.0 (noch im Entwurf). Für Produktivarbeit heute ist das WCAG-2.1-Verhältnis das, was Auditoren und Lighthouse prüfen.
Wird etwas an einen Server gesendet?
Nein. Konvertierung und Kontrast-Mathematik laufen vollständig im Browser.