Prüfe dann zwei Farben gegen WCAG AA und AAA und sieh dir den Text direkt an. Rechne eine Farbe zwischen HEX, RGB, HSL, HSV und OKLCH um und teste, ob Text auf seinem Hintergrund gut lesbar ist. Kostenlos und direkt in deinem Browser.
So rechnest du eine Farbe um
- Wähle mit „Pipette“ eine Farbe oder gib einen Wert unter „Beliebige Farbe“ ein.
- Lies dieselbe Farbe als HEX, RGB, HSL, HSV, OKLCH und, falls vorhanden, ihren CSS-Namen.
- Tippe neben dem gewünschten Format auf „Kopieren“ oder auf „HEX kopieren“.
So prüfst du den Kontrast
- Wähle eine Textfarbe und eine Hintergrundfarbe oder nutze „Hauptfarbe als Text verwenden“ bzw. „Als Hintergrund verwenden“.
- Lies das Kontrastverhältnis ab und ob es AA und AAA besteht: für normalen Text, großen Text mit 24 px, fetten Text mit 19 px und eine Button-Umrandung.
- Fällt das Paar durch, nimm die vorgeschlagene ähnliche Farbe, die besteht.
Welches Format du nutzen solltest
HEX und RGB beschreiben den Rot-, Grün- und Blauanteil des Lichts in einer Farbe und funktionieren überall. HSL und HSV beschreiben Farbton, Sättigung und Helligkeit, wodurch sich eine Farbe leichter von Hand anpassen lässt. OKLCH ist das neueste CSS-Format: Seine Helligkeit entspricht dem, wie hell Menschen Farben wahrnehmen. Zwei Farben mit demselben L wirken also wirklich gleich hell, ideal für Paletten und Themes. Alle modernen Browser unterstützen oklch() in CSS.
So funktioniert das Kontrastverhältnis
Das Verhältnis vergleicht die relative Leuchtdichte der beiden Farben, von 1:1 bei identischen Farben bis 21:1 bei Schwarz auf Weiß. Ergebnisse werden nie aufgerundet, 4,49:1 besteht AA also nicht. Ist die Textfarbe transparent, wird sie zuerst mit dem Hintergrund gemischt. Fällt ein Paar durch, wird für jede Seite eine ähnliche Farbe vorgeschlagen, die besteht.
WCAG AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text. AAA verlangt 7:1 für normalen Text und 4,5:1 für großen Text. Das hilft Menschen mit Sehschwäche und allen, die auf einem hellen Bildschirm lesen.
Eingaben, die dieses Tool versteht
Drei-, vier-, sechs- und achtstelliges HEX mit oder ohne #, rgb() und rgba() mit Kommas oder Leerzeichen, hsl() mit deg, turn oder rad, hsv(), oklch() und oklab(), die 148 CSS-Farbnamen und einfache Zahlen wie 59, 130, 246. Alpha nach einem Schrägstrich oder als vierter Wert bleibt erhalten.
Für wen
Webdesigner und Entwickler, die ein Theme bauen, Selbstständige, die prüfen, ob ihre Markenfarben gut lesbar sind, Studierende, die Folien erstellen, und alle, die eine Farbe in einem Format haben und ein anderes brauchen. Um eine Farbe aus einem Foto zu bestimmen, nutze den Farbwähler für Bilder.
Fragen
Was ist ein gutes Kontrastverhältnis?
Für normalen Text mindestens 4,5:1. Höher ist besser, und 7:1 erfüllt AAA.
Warum sehen dieselben Farbwerte auf verschiedenen Bildschirmen leicht anders aus?
Bildschirme unterscheiden sich in Helligkeit und Farbdarstellung. Die Werte sind gleich, aber das Display verändert, wie sie aussehen.
Wird etwas hochgeladen?
Nein. Die Umwandlung findet in deinem Browser statt.