Kontrast-Checker
nach WCAG 2.1.
Farbkontrast zwischen zwei Farben prüfen — mit AA/AAA-Bewertung für Normal-Text, Large-Text und UI-Komponenten. Inkl. Live-Vorschau und Color-Picker.
Standard-Fließtext (< 18 px bzw. < 14 px bold)
Maximalstandard für barrierefreien Fließtext
Headlines (≥ 18 px bzw. ≥ 14 px bold)
Maximalstandard für Headlines
Icons, Buttons, Form-Borders, Grafiken
Headline auf 32 px Bold.
Subline mit 18 px Bold — gilt als „Large Text“.
Standard-Fließtext mit 16 px ist dein Daily-Driver. Hier läuft die meiste Lesezeit — und hier muss der Kontrast stimmen, sonst springen Nutzer ab und Google straft im Page-Experience-Score.
Kleinere Texte mit 14 px (Captions, Footer-Links, Badges) sind für viele Nutzer die größte Hürde. AA reicht hier technisch — AAA ist die ehrlichere Latte.
Berechnung gemäß W3C WCAG 2.1 — Definition Kontrastverhältnis. Die WCAG-Schwellen sind weltweit anerkannte Standards für Barrierefreiheit; in Deutschland verbindlich für öffentliche Stellen (BITV 2.0) und für viele kommerzielle Anbieter durch das BFSG ab 2025.
Vorteile
Was dir der Kontrast-Checker bringt.
WCAG 2.1 vollständig
Bewertung für alle relevanten Kriterien: Normal Text AA/AAA, Large Text AA/AAA und UI-Komponenten. Genau nach W3C-Formel mit korrekter sRGB-Gamma-Korrektur.
Live-Vorschau
Du siehst sofort, wie deine Farbkombination in Headlines, Fließtext, Kleintext und auf Buttons wirkt. Keine Tab-Wechsel zwischen Tool und Designvorschau mehr.
Color-Picker + Hex
Farben per Color-Picker auswählen oder Hex-Werte direkt einfügen. Beim Color-Picker wird der Hex-Wert live mitgeführt — und der Tausch-Button schaltet Vorder- und Hintergrund in einem Klick.
Tipps zur Kontrast-Praxis
6 Regeln für barrierefreien Farbeinsatz.
Was du jenseits des reinen WCAG-Wertes beachten solltest, wenn dein Design wirklich für alle funktionieren soll.
AA als Minimum, AAA als Anspruch
WCAG AA (4,5:1 für Fließtext) ist der gesetzliche Standard für Barrierefreiheit in der EU ab 2025. Wer Wert auf wirklich gute Lesbarkeit legt — auch bei schlechtem Display oder Sonneneinstrahlung — sollte AAA (7:1) anpeilen.
Marken-Farben nicht heilig
Wenn dein Mint-CI auf Weiß einen Kontrast von 2,8:1 hat, ist es als Fließtext-Farbe ungeeignet — egal, was das Brand Manual sagt. Lösung: helleres/dunkleres Pendant für Body-Text, Markenfarbe nur für Akzente.
Größe und Gewicht zählen
„Large Text“ laut WCAG: ≥ 18 px regular oder ≥ 14 px bold. Headlines dürfen also etwas kontrastärmer sein (3:1) — Body-Text in 16 px regular braucht aber zwingend 4,5:1.
UI-Elemente nicht vergessen
Form-Borders, Icons, aktive vs. inaktive Buttons, Fokus-Ringe — UI-Komponenten brauchen 3:1 zum Hintergrund. Das wird in der Praxis sehr oft übersehen, fällt aber bei jedem Audit auf.
Hover, Focus, Disabled separat
Jeder Interaktionszustand hat eigene Farben. Disabled-Buttons oft mit 1,8:1 — technisch ok (sie sind „dekorativ“), aber inhaltlich schlecht. Lieber etwas dunkler grau als „verschwindend“.
Im Realkontext testen
Tool-Werte sind ein Anfang. Echte Tests: Smartphone in der Sonne draußen anschauen, ältere Display-Generationen prüfen, Kollegen mit nachlassendem Sehen einladen. Kontrast ist Praxis-, kein Tabellen-Thema.
Hintergrundwissen
Alles, was du über Farbkontrast und WCAG wissen musst.
Was sind die WCAG?
Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Websites, herausgegeben vom W3C. Sie definieren auf drei Ebenen — A, AA und AAA — Mindestanforderungen, damit Websites auch für Menschen mit Sehbeeinträchtigungen, motorischen oder kognitiven Einschränkungen nutzbar sind.
In Deutschland sind WCAG-Anforderungen über die BITV 2.0 für öffentliche Stellen verpflichtend. Mit dem Barrierefreiheitsstärkungsgesetz (BFSG), das ab Juni 2025 in Kraft tritt, gelten sie zusätzlich für viele kommerzielle Anbieter — von B2C-Shops über Banken bis E-Books. Ein Verstoß kann rechtliche Konsequenzen haben.
Wie wird das Kontrastverhältnis berechnet?
Die WCAG-Formel basiert auf der relativen Luminanz (Helligkeit) der beiden Farben. Für jede Farbe wird:
- der RGB-Wert auf 0–1 normiert,
- eine Gamma-Korrektur (sRGB → lineares Licht) angewendet,
- die gewichtete Summe gebildet: 0,2126 × R + 0,7152 × G + 0,0722 × B (Grün wirkt für unser Auge am stärksten).
Das Kontrastverhältnis ergibt sich dann aus:
Daraus ergeben sich Werte zwischen 1:1 (gleiche Farbe, unsichtbar) und 21:1 (Schwarz auf Weiß, maximaler Kontrast). WCAG-Bestehen liegt je nach Kriterium zwischen 3:1 und 7:1.
AA vs. AAA — was ist der Unterschied?
Die WCAG kennen drei Konformitätsstufen — A (Minimum), AA (Standard) und AAA (Höchste). Beim Kontrast bedeutet das konkret:
- Normal Text: 4,5:1
- Large Text: 3,0:1
- UI-Komponenten: 3,0:1
Gesetzlicher Standard in der EU. BFSG-Mindestlevel.
- Normal Text: 7,0:1
- Large Text: 4,5:1
- (UI-Komponenten unverändert)
Höchster Standard. Sinnvoll für YMYL- und Senior-Zielgruppen.
AAA ist nicht überall sinnvoll erreichbar — Markenfarben würden teils komplett umkippen. Realistisches Ziel: Body-Text immer AA, Headlines bevorzugt AA, dekorative Elemente A. AAA für besonders kritische Inhalte (Formulare, Fehlermeldungen, Disclaimer).
Häufige Fehler im Farbeinsatz
- Helle Marken-Akzente als Body-Text: Mint, Gelb oder Pastell-Tönen reicht der Kontrast auf Weiß fast nie. Marke darf akzentuieren — lesen muss Anthrazit oder Tiefgrau.
- Graue Disabled-Buttons mit 2:1: Ja, Disabled gilt als „dekorativ“ und ist von der Kontrastpflicht ausgenommen — aber Nutzer denken, der Button sei kaputt. Lieber 3:1 + visuelle Markierung (Strichelung, Lock-Icon).
- Hover-Color verschwindet: Klassiker bei Mint-Buttons mit Mint-Hover. Hover-Zustand immer mit 3:1 zum Resting-Zustand prüfen, sonst merken Nutzer den Hover gar nicht.
- Farbe als einziges Signal: Rot = Fehler, Grün = OK funktioniert nicht für Menschen mit Rot-Grün-Schwäche (~8 % aller Männer). Immer Icon oder Text-Label dazu.
- Kontrast nur im Light Mode getestet: Im Dark Mode kippen viele Farb-Skalen. Sobald du Dark Mode anbietest, sind das zwei separate Audits.
Verwandte Tools
Mehr aus der experics-Toolbox.
SERP-Snippet-Generator
Title-Tag und Meta-Description live als Google-Snippet testen, mit Pixelmessung.
Tool öffnenCTR-Rechner
Click-Through-Rate aus Impressionen und Klicks berechnen — mit SEO-Position-Mapping.
Tool öffnenSchema-Markup-Generator
Strukturierte Daten als JSON-LD generieren — für Rich Snippets und AI-Search.
Tool öffnenBarrierefreiheit ist kein Häkchen-Thema
Kontrast ist nur der Anfang. UX, SEO und CRO greifen ineinander.
Eine wirklich nutzerfreundliche Website ist barrierefrei, schnell, suchmaschinenoptimiert und konvertiert. Sprich mit uns, wenn du wissen willst, wo deine größten Hebel liegen.
Potenzialgespräch buchen45 Minuten. Kostenlos. Unverbindlich.