Zum Inhalt springen

Farbkontrast-Prüfer (WCAG AA und AAA)

Prüfe, ob dein Text auf seinem Hintergrund gut lesbar ist: Berechne das WCAG-Kontrastverhältnis, kontrolliere AA und AAA für normalen Text, großen Text und UI-Elemente und erhalte die ähnlichste Farbe, die besteht.

4.64:1Gut

Vorschautitel

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

Farben

  • Normaler Text

    AA 4.5 · AAA 7

    AAAAA

  • Großer Text

    AA 3 · AAA 4.5

    AAAAA

  • UI-Element

    AA 3

    AA

Kontrast 4.64:1. Normaler Text: AA Bestanden, AAA Nicht bestanden. Großer Text: AA Bestanden, AAA Bestanden. UI-Element: AA Bestanden.

Farben, die bestehen

Die ähnlichsten Farben, die bei normalem Text bestehen, mit demselben Farbton. Klicke auf eine, um sie anzuwenden.

AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text. AAA verlangt 7:1 bzw. 4,5:1.

Beispielkombinationen

Gängige Farbpaare: Manche bestehen, andere nicht. Lade eines, um es zu prüfen.

Was das Kontrastverhältnis ist und warum es wichtig ist

Das Kontrastverhältnis misst den Helligkeitsunterschied zwischen zwei Farben, meist der Textfarbe und ihrem Hintergrund. Je höher die Zahl, desto leichter lässt sich der Text vom Hintergrund unterscheiden. Die Web Content Accessibility Guidelines (WCAG), der internationale Referenzstandard, legen Mindestverhältnisse je nach Textgröße und angestrebter Konformitätsstufe fest.

Zu wenig Kontrast ist nicht nur ein ästhetisches Problem: Er erschwert das Lesen für Menschen mit Sehschwäche, Farbsehstörungen oder einfach für alle, die ihr Handy in der Sonne benutzen. Die Einhaltung der WCAG ist zudem in vielen Ländern gesetzlich vorgeschrieben, im Rahmen von Vorschriften zur digitalen Barrierefreiheit.

Die Stufen AA und AAA erklärt

AA (empfohlenes Minimum)

Die Stufe, die die meisten Barrierefreiheitsvorschriften verlangen, darunter der European Accessibility Act.

Normaler Text
4,5:1
Großer Text / UI
3:1

AAA (erhöhte Stufe)

Empfohlen für kritische Inhalte oder Zielgruppen mit höheren Anforderungen an Barrierefreiheit, aber nicht immer für die gesamte Website verpflichtend.

Normaler Text
7:1
Großer Text
4,5:1

Kontrast in drei Schritten prüfen

  1. Text und Hintergrund wählen

    Klicke auf Textfarbe oder Hintergrundfarbe und passe sie mit dem Farbwähler, der Pipette oder per Code an. Transparenz wird unterstützt.

  2. Jeden Einsatz prüfen

    Du siehst das Verhältnis und ob AA und AAA für normalen Text, großen Text und UI-Elemente wie Icons oder Feldränder erfüllt sind.

  3. Vorschlag übernehmen

    Besteht die Kombination nicht, schlägt das Werkzeug die ähnlichste Farbe vor, die besteht – mit demselben Farbton. Ein Klick genügt.

Was als großer Text gilt

Die WCAG betrachten als großen Text alles ab 18 Punkt (24 px) oder 14 Punkt fett (etwa 18,66 px). Da die Striche dicker sind, ist er mit weniger Kontrast lesbar: 3:1 reicht für AA und 4,5:1 für AAA.

Alles andere ist normaler Text und braucht 4,5:1 für AA und 7:1 für AAA. Vorsicht bei kleinen Begleittexten wie Hinweisen, Labels oder Bildunterschriften: Sie fallen am häufigsten durch.

Kontrast bei Buttons, Icons und Feldern

Kontrast betrifft nicht nur Text. Die WCAG verlangen mindestens 3:1 für UI-Elemente, die man sehen muss, um die Seite zu bedienen: den Rand eines Formularfelds, informationstragende Icons, den Fokusindikator oder die Zustände eines Bedienelements.

Ein sehr hellgrauer Rand auf Weiß mag elegant wirken, aber viele Menschen erkennen dann nicht, wo das Feld ist.

Ausgenommen

  • Logos
  • Dekorativer Text
  • Deaktivierte Bedienelemente
  • Bilder und Fotos

So wird das Kontrastverhältnis berechnet

Das Verhältnis vergleicht die relative Leuchtdichte der beiden Farben, also wie viel Licht jede ausstrahlt, korrigiert um die Empfindlichkeit des Auges.

L1
Relative Leuchtdichte der helleren Farbe, von 0 (Schwarz) bis 1 (Weiß).
L2
Relative Leuchtdichte der dunkleren Farbe.
0.05
Gleicht das vom Bildschirm reflektierte Umgebungslicht aus. Deshalb liegt das Maximum bei 21:1 (Weiß auf Schwarz) und das Minimum bei 1:1 (dieselbe Farbe).

(L1 + 0.05) / (L2 + 0.05)

Aa(1 + 0.05) / (0 + 0.05) = 21:1

Häufige Fragen

Bei normalem Text erfüllt ein Verhältnis von mindestens 4,5:1 die WCAG-Stufe AA, das empfohlene Minimum. Für erhöhten Kontrast (Stufe AAA) braucht es 7:1.

AA ist die Mindeststufe, die die meisten Barrierefreiheitsvorschriften verlangen. AAA ist eine strengere, erhöhte Stufe, empfohlen für kritische Inhalte, aber nicht immer für eine ganze Website verpflichtend.

Weil Größe und Strichstärke großer Buchstaben das Lesen bereits erleichtern. Daher erlauben die WCAG ein geringeres Verhältnis (3:1 bei AA) statt 4,5:1 bei normalem Text.

Text ab 18 Punkt (24 px) oder 14 Punkt fett (etwa 18,66 px). Er braucht 3:1 für AA und 4,5:1 für AAA, gegenüber 4,5:1 und 7:1 bei normalem Text.

In vielen Ländern ja, besonders für öffentliche Stellen und zunehmend auch für private Unternehmen im Rahmen von Vorschriften wie dem European Accessibility Act. Auch ohne gesetzliche Pflicht verbessert die Einhaltung der WCAG die Erfahrung aller Nutzer.

Es wird aus der relativen Leuchtdichte beider Farben berechnet, einem Maß dafür, wie viel Licht sie reflektieren, und als Verhältnis zwischen 1:1 (kein Kontrast, gleiche Farbe) und 21:1 (das Maximum, reines Weiß auf reinem Schwarz) angegeben.

Nein. Die WCAG nehmen Logos, dekorativen Text und deaktivierte Bedienelemente aus. Für aktive Buttons, Formularfelder, bedeutungstragende Icons und den Fokusindikator gilt aber mindestens 3:1.

Das Verhältnis wird anhand der tatsächlich sichtbaren Farbe berechnet: Halbtransparenter Text wird vor der Messung mit seinem Hintergrund gemischt, ein halbtransparenter Hintergrund mit Weiß. Transparenz kannst du im Farbfeld des Werkzeugs hinzufügen.

Nutze die Vorschläge des Werkzeugs: Es schlägt die ähnlichste Text- oder Hintergrundfarbe vor, die AA oder AAA erfüllt, bei gleichem Farbton, damit sich deine Marke nicht ändert. Du kannst auch Varianten der Farbe im Farbwähler erkunden.

Weitere Tools