Tokenlabor

Kontrast prüfen: WCAG-Kontrastrechner

Kontrast prüfen nach WCAG 2.2: Kontrastverhältnis von Text- und Hintergrundfarbe berechnen, AA und AAA ablesen und passende Farbtöne vorgeschlagen bekommen.

–

 

Vorschau

Normaler Text in 16 Pixel: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.

Großer Text ab 24 Pixel

Großer fetter Text ab 18,66 Pixel

Schaltfläche mit Rahmen
Kriterium nach WCAG 2.2MindestwertErgebnis
Vorschläge für ausreichenden Kontrast

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Kontrastverhältnis nach WCAG berechnen

Mit diesem Kontrastrechner können Sie den Kontrast prüfen, den zwei Farben nach den Web Content Accessibility Guidelines (WCAG) haben. Geben Sie Textfarbe und Hintergrundfarbe ein, das Werkzeug berechnet das Kontrastverhältnis und zeigt, welche Stufen erfüllt sind. Reicht der Farbkontrast nicht, schlägt es den nächsten passenden Farbton vor: Farbton und Sättigung bleiben gleich, nur die Helligkeit wird so wenig wie möglich verändert.

Das Kontrastverhältnis liegt zwischen 1:1 (gleiche Farbe) und 21:1 (Schwarz auf Weiß). Es wird aus der relativen Luminanz beider Farben berechnet: (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist. WCAG verlangt für normalen Text mindestens 4,5:1 (Stufe AA) und 7:1 (Stufe AAA). Für großen Text, also ab 24 Pixel oder ab etwa 18,66 Pixel in Fettschrift, genügen 3:1 (AA) und 4,5:1 (AAA). Rahmen von Eingabefeldern, Symbole und andere grafische Bedienelemente brauchen nach Kriterium 1.4.11 mindestens 3:1.

Für die Barrierefreiheit von Websites ist Kontrast eines der häufigsten Probleme und zugleich eines der am leichtesten zu behebenden. In Deutschland gilt seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz für viele digitale Produkte und Dienstleistungen; die zugehörige Norm EN 301 549 verweist auf die WCAG-Kriterien der Stufe AA. Grenzen: Der Rechner bewertet einfarbige Flächen. Bei Text auf Bildern oder Farbverläufen prüfen Sie die ungünstigste Stelle. Das Ergebnis wird abgerundet angezeigt, weil schon 4,49:1 die Stufe AA verfehlt.

Anleitung: Kontrast prüfen in 4 Schritten

  1. Textfarbe (Vordergrund) und Hintergrundfarbe eingeben oder „Beispiel: Grau auf Weiß“ laden.
  2. In der Vorschau normalen Text, großen Text, großen fetten Text und die Schaltfläche mit Rahmen ansehen.
  3. In der Tabelle für jedes Kriterium nach WCAG 2.2 Mindestwert und Ergebnis ablesen.
  4. Reicht der Kontrast nicht, einen der Vorschläge übernehmen; mit „Farben tauschen“ die Rollen umdrehen und mit „Ergebnis kopieren“ dokumentieren.

Typische Anwendungsfälle

  • Markenfarben prüfen: Vor dem Relaunch kontrollieren, ob Primär- und Akzentfarben auf Weiß oder Dunkel für Fließtext reichen.
  • Barrierefreiheit nachweisen: Für das Barrierefreiheitsstärkungsgesetz die Farbpaare einer Website gegen Stufe AA prüfen.
  • Dunkelmodus gestalten: Helle Schrift auf dunklem Hintergrund getrennt testen, weil sich die Werte vom hellen Design unterscheiden.
  • Bedienelemente prüfen: Rahmen von Eingabefeldern und Symbole gegen die Mindestanforderung von 3:1 halten.
Fragen

Häufige Fragen

Welches Kontrastverhältnis brauche ich für normalen Text?

Für die Stufe AA mindestens 4,5:1, für AAA mindestens 7:1. Die meisten gesetzlichen Vorgaben und Richtlinien verlangen AA.

Was gilt als großer Text?

Nach WCAG Text ab 18 Punkt oder ab 14 Punkt in Fettschrift. Im Web entspricht das etwa 24 Pixel beziehungsweise 18,66 Pixel fett. Für großen Text genügt 3:1 für AA und 4,5:1 für AAA.

Gelten die Werte auch für Logos und deaktivierte Schaltflächen?

Nein. WCAG nimmt Logos, Schriftzüge in Markennamen, rein dekorativen Text und inaktive Bedienelemente von den Kontrastanforderungen aus. Für aktive Bedienelemente und informative Grafiken gilt 3:1.

Wie geht der Rechner mit transparenten Farben um?

Eine halbtransparente Textfarbe wird zuerst mit dem Hintergrund gemischt; geprüft wird die tatsächlich sichtbare Farbe. Ein transparenter Hintergrund wird auf Weiß gerechnet.

Ist der Kontrast nach WCAG 3 (APCA) anders?

WCAG 3 ist noch ein Entwurf und diskutiert ein anderes Kontrastmodell. Verbindlich ist heute die Formel aus WCAG 2.x, die dieser Kontrastrechner verwendet.

Wie prüfe ich den Kontrast in den Chrome-Entwicklertools?

Element untersuchen und im Bereich Styles auf das Farbfeld der Eigenschaft color klicken. Der Farbwähler zeigt das Kontrastverhältnis und ob AA und AAA erreicht werden.

Welcher Grauton ist auf Weiß nach WCAG noch lesbar?

Für normalen Text braucht es mindestens 4,5:1. Auf reinem Weiß erreicht #767676 diesen Wert knapp und gilt als hellstes neutrales Grau für Stufe AA; #999999 liegt deutlich darunter.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen

CSS-Grid-Generator

Spalten, Zeilen und Abstände für CSS Grid festlegen, Vorschau prüfen und CSS kopieren.

Öffnen