Farbkontrast-Prüfer
Prüfe den Kontrast von Text- und Hintergrundfarbe nach WCAG 2.1 AA und AAA — mit sofortigem Kontrastverhältnis, Live-Vorschau und Bestanden/Nicht-bestanden-Abzeichen.
Farben
4.48:1Höher ist besser. WCAG verlangt mindestens 4,5:1 für normalen Text.Aa normaler Text — der schnelle braune Fuchs
Aa großer Text
Über dieses Tool
Dieser Farbkontrast-Prüfer misst mit der Kontrastformel aus WCAG 2.1, wie gut Text vor seinem Hintergrund lesbar ist. Gib eine Textfarbe und eine Hintergrundfarbe als HEX-Werte ein oder wähle sie visuell aus, und das Tool zeigt sofort das Kontrastverhältnis (zum Beispiel 4,52:1) zusammen mit Bestanden- oder Nicht-bestanden-Abzeichen für die Stufen AA und AAA der Web Content Accessibility Guidelines. Eine Live-Vorschau stellt Beispieltext in deinen Farben dar, sodass du das Ergebnis auf einen Blick beurteilen kannst, und eine Tausch-Schaltfläche vertauscht Vorder- und Hintergrund. Alles läuft in deinem Browser: schnell, privat und nach dem Laden auch offline — ideal für Designer, Entwickler und alle, die barrierefreie Oberflächen bauen.
So geht's
- 1 Gib deine Textfarbe (Vordergrund) als HEX-Wert ein oder wähle sie mit dem Farbwähler.
- 2 Gib die Hintergrundfarbe genauso ein; sowohl #rgb als auch #rrggbb werden unterstützt.
- 3 Lies das Kontrastverhältnis und die AA/AAA-Abzeichen für normalen und großen Text ab.
- 4 Nutze die Tausch-Schaltfläche und passe an, bis du mindestens 4,5:1 erreichst.
So funktioniert es
Jede Farbe wird zuerst von sRGB in lineares Licht umgerechnet: Jeder Kanal wird durch 255 geteilt, und Werte über 0,03928 werden einer Gammakurve unterworfen. Die relative Leuchtdichte ist dann L = 0,2126·R + 0,7152·G + 0,0722·B, wobei Grün am stärksten gewichtet wird, weil das Auge dafür am empfindlichsten ist. Das Kontrastverhältnis zweier Farben ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und L2 die dunklere Farbe ist. Das ergibt Werte von 1:1 (identische Farben) bis 21:1 (reines Schwarz auf reinem Weiß). WCAG 2.1 verlangt auf Stufe AA mindestens 4,5:1 für normalen Text und 3:1 für großen Text, auf Stufe AAA steigt dies auf 7:1 und 4,5:1. Großer Text bedeutet etwa 18,66px fett oder 24px normal und größer.
Häufige Fragen
Welches Kontrastverhältnis brauche ich, um WCAG zu bestehen?
Für WCAG 2.1 Stufe AA brauchst du mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Stufe AAA ist strenger und verlangt 7:1 für normalen und 4,5:1 für großen Text. Die meisten Websites zielen auf AA als rechtliche und praktische Grundlage.
Was gilt als großer Text?
WCAG definiert großen Text als mindestens 18,66px (etwa 14pt) und fett oder mindestens 24px (etwa 18pt) bei beliebiger Stärke. Großer Text ist leichter lesbar und darf daher einen niedrigeren Schwellenwert haben (3:1 für AA, 4,5:1 für AAA).
Wie wird das Kontrastverhältnis berechnet?
Die relative Leuchtdichte jeder Farbe wird aus ihren linearisierten Rot-, Grün- und Blaukanälen berechnet (L = 0,2126R + 0,7152G + 0,0722B). Das Verhältnis ist dann (heller + 0,05) / (dunkler + 0,05) und ergibt Werte von 1:1 bis 21:1 für Schwarz auf Weiß.
Warum ergibt reines Schwarz auf Weiß 21:1?
Schwarz hat eine relative Leuchtdichte von 0 und Weiß von 1. Eingesetzt in (1 + 0,05) / (0 + 0,05) ergibt das 21 — das maximal mögliche Kontrastverhältnis. Deshalb besteht #000000 auf #ffffff jede WCAG-Stufe.
Beeinflusst Farbkontrast SEO und Barrierefreiheitsrecht?
Ja. Ausreichender Kontrast ist Teil der Barrierefreiheitsstandards, auf die Gesetze wie der ADA, Section 508 und das Europäische Barrierefreiheitsgesetz verweisen, und gute Lesbarkeit verbessert die Usability-Kennzahlen. WCAG AA zu erfüllen senkt das rechtliche Risiko und macht deine Inhalte für Menschen mit Sehschwäche oder Farbfehlsichtigkeit nutzbar.
Verwandte Tools und Anwendungen
Ein Kontrast-Prüfer ist unverzichtbar für barrierefreies Web- und App-Design. Kombiniere ihn mit dem Farbkonverter, um beim Abstimmen deiner Palette zwischen HEX, RGB und HSL zu wechseln, und mit dem Prozentrechner beim Skalieren von Abständen oder Deckkraft. Designer, Frontend-Entwickler und Content-Ersteller nutzen ihn, damit Schaltflächen, Beschriftungen und Fließtext für alle lesbar bleiben.