Was ist der Unterschied zwischen WCAG AA und AAA?

AA ist der gesetzliche Mindeststandard und in der EU für viele Websites verpflichtend (4.5:1 Normaltext, 3:1 Large Text). AAA ist die erweiterte Anforderung mit 7:1 für Normaltext und 4.5:1 für Large Text – ideal für Behörden-Sites oder Anwendungen für Menschen mit Sehbehinderung. AAA ist mit Marken-Farben oft nur schwer durchgängig erreichbar.

Warum sind 4.5:1 für normalen Text vorgeschrieben?

Der Wert ist wissenschaftlich validiert: Er gewährleistet Lesbarkeit für Personen mit moderater Sehbehinderung (etwa 20/40-Visus ohne Korrektur) und für ältere Nutzer:innen, deren Kontrastempfinden mit dem Alter nachlässt. Auch ohne Behinderung verbessert hoher Kontrast die Lesbarkeit signifikant – besonders bei kleinen Schriften oder schlechten Lichtverhältnissen.

Gilt das Kontrast-Verhältnis auch für UI-Elemente?

Ja, seit WCAG 2.1 (Kriterium 1.4.11 „Non-text Contrast“) müssen Buttons, Form-Borders, Icons und andere bedeutungstragende UI-Komponenten mindestens 3:1 gegen ihren Hintergrund erreichen. Ausgenommen sind reine Dekoration und Elemente, die durch eine separate Komponente erkennbar sind (z. B. ein Submit-Button mit deutlichem Text-Label).

Was ist Large Text genau?

Large Text ist Text mit mindestens 18 pt regulär oder 14 pt fett. In Browser-Pixel sind das circa 24 px bzw. 18.66 px. Kursiver Text gilt unabhängig von der Größe als Normaltext, wenn er nicht parallel die Pt-Schwelle überschreitet. Headlines sind in der Regel groß genug, um als Large Text zu zählen.

Sind Logos vom WCAG-Kontrast ausgenommen?

Ja. Logotypes und reine Dekoration (z. B. Hintergrundbilder ohne Funktion) unterliegen den Kontrast-Anforderungen nicht. Das heißt aber nicht, dass das Logo unleserlich sein darf – wenn der Markenname Teil des Logos ist, ist eine gute Lesbarkeit trotzdem im Sinne der Marke.

Was bedeutet BFSG für meine Webseite?

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist seit dem 28. Juni 2025 in Deutschland in Kraft und setzt den European Accessibility Act um. Betroffen sind unter anderem E-Commerce, Banking-Apps, Verkehrsmittel-Buchung und viele Dienstleistungs-Plattformen. Bei Nicht-Konformität drohen Bußgelder bis zu 100.000 €. Kontrast-Konformität nach WCAG 2.1 AA ist dabei eine der wichtigsten und am leichtesten messbaren Anforderungen.

WCAG Contrast Checker

Farbkontraste nach WCAG 2.1 prüfen – AA/AAA-Bewertung für Text und UI-Komponenten mit Live-Vorschau.

Vordergrundfarbe (Text)

Hintergrundfarbe

Farbe aus Color Picker holen

Presets

Kontrast-Ratio

17.85:1

Sehr gut

Wertebereich 1:1 (gleiche Farben) bis 21:1 (Schwarz auf Weiß).

WCAG-Bewertung

Normal Text · AA

≥ 4.5:1

Fließtext (≥ 16 px) – gesetzlicher Mindeststandard.

Normal Text · AAA

≥ 7:1

Erweiterte Anforderung für maximale Lesbarkeit.

Large Text · AA

≥ 3:1

≥ 18 pt regulär oder ≥ 14 pt fett.

Large Text · AAA

≥ 4.5:1

Erweiterte Anforderung für Headlines.

UI Components · AA

≥ 3:1

Buttons, Form-Borders, aussagekräftige Icons.

Live-Vorschau

Der schnelle braune Fuchs springt über den faulen Hund.

Headline mit großer Schrift

Fetter Großtext für prominente Buttons

Border-Kontrast wirkt für 3:1-UI-Regel.

CSS Custom Properties

:root {
  --color-text: #0F172A;
  --color-bg: #FFFFFF;
}

Tailwind (Annäherung)

text-slate-700 bg-white

Das Wichtigste auf einen Blick

WCAG-2.1-Kontrast-Ratio zwischen Vordergrund- und Hintergrundfarbe berechnen.
Bewertung für 4 Kategorien: Normal-AA (4.5:1), Normal-AAA (7:1), Large-AA (3:1), Large-AAA (4.5:1).
UI-Components-Check (3:1) für Buttons, Form-Borders und Icons.
Live-Vorschau mit echtem Text – sofort sehen, wie die Kombination wirkt.
Seit Juni 2025 gesetzliche Pflicht für viele Websites in der EU (BFSG / EAA).

Die Web Content Accessibility Guidelines (WCAG) sind der globale Standard für barrierefreie Webinhalte. Eine der konkretesten und am häufigsten verletzten Anforderungen betrifft das Kontrast-Verhältnis zwischen Text und Hintergrund: Für Menschen mit eingeschränktem Sehvermögen, bei schlechten Lichtverhältnissen oder auf günstigen Bildschirmen entscheidet dieses Verhältnis, ob ein Text überhaupt lesbar ist. WCAG 2.1 definiert klare Schwellenwerte – AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text, AAA hebt das auf 7:1 bzw. 4.5:1 an. Seit WCAG 2.1 gilt zusätzlich 3:1 für UI-Komponenten wie Buttons, Form-Borders und aussagekräftige Icons. In der EU ist die Einhaltung seit Juni 2025 für viele Websites gesetzlich vorgeschrieben (BFSG / European Accessibility Act) – Verstöße können in Deutschland mit Bußgeldern bis 100.000 € geahndet werden.

Was unser Tool besonders macht: eine deutsche, schnörkellose UI mit Live-Vorschau in echtem Text – nicht nur eine Zahl. Du wählst Vorder- und Hintergrundfarbe per Color-Picker oder Hex-Eingabe und siehst sofort die Kontrast-Ratio plus Bewertung für alle vier Text-Kategorien (Normal-AA, Normal-AAA, Large-AA, Large-AAA) und UI-Komponenten. Drei Vorschau-Texte (Normal 16 px, Large 24 px, Bold-Large 18.66 px fett) zeigen direkt, wie die Kombination wirkt. Wenn der Kontrast fehlschlägt, schlägt das Tool mehrere Vordergrund-Variationen vor, die das gewählte Ziel-Ratio sicher erreichen – ein Klick übernimmt sie. Output gibt es als CSS-Custom-Properties und als Tailwind-Annäherung. Verlinkt mit dem Color Picker und dem CSS Gradient Generator zur durchgängigen Farb-Workflow-Familie.

Hintergrund & Anwendungen

WCAG-Schwellenwerte

AA Normal Text: 4.5:1 – Mindeststandard für Fließtext (≈ 16 px regulär).
AA Large Text: 3:1 – Für Texte ab 18 pt (24 px) oder 14 pt fett (18.66 px).
AAA Normal Text: 7:1 – Erweiterte Anforderung für maximale Lesbarkeit.
UI Components: 3:1 – Buttons, Form-Borders, Icons (seit WCAG 2.1).

Wann welche Stufe

AA Normal: Standard für die meisten Webseiten – in der EU gesetzliche Pflicht.
AA Large: Hero-Texte, Headlines, prominente Buttons.
AAA: Behörden-Webseiten, Apps für Sehbehinderte, hochgradige Lesbarkeit.
UI Components: Form-Felder, Icons, Trennlinien zwischen Bereichen.

Was zählt als Large Text

18 pt aufwärts: Entspricht etwa 24 px in der Default-Browser-Größe.
14 pt fett: Entspricht etwa 18.66 px in fett.
Bei kursiv: Gleiche Regeln wie Normal Text – kursiv ist nicht groß.
Headlines: In der Regel als Large Text einzustufen.

Gesetzlicher Hintergrund

BFSG: Barrierefreiheitsstärkungsgesetz – seit Juni 2025 in Deutschland.
EAA: European Accessibility Act – EU-Richtlinie für Barrierefreiheit.
Pflicht für: E-Commerce, Banking, Verkehrsmittel, Smartphone-Apps.
Strafen: Bis zu 100.000 € Bußgeld bei Nicht-Konformität (Deutschland).

Wie das Kontrast-Verhältnis berechnet wird

Die WCAG-Formel Schritt für Schritt.

1RGB-Werte beider Farben in den Bereich 0–1 normalisieren.
2Pro Kanal: wenn ≤ 0.03928, dividiere durch 12.92.
3Pro Kanal sonst: ((value + 0.055) / 1.055) ^ 2.4 (sRGB-Linearisierung).
4Relative Luminanz = 0.2126 × R + 0.7152 × G + 0.0722 × B.
5Kontrast-Ratio = (L1 + 0.05) / (L2 + 0.05) mit L1 > L2.
6Ergebnis liegt zwischen 1:1 (gleiche Farben) und 21:1 (Schwarz/Weiß).
7Vergleich gegen WCAG-Schwellenwerte für die Bewertung.
8Bewertung erfolgt für jede Kategorie separat.

WCAG-Anforderungen im Überblick

Mindest-Kontrast-Ratios pro Kategorie.

Kategorie	AA-Anforderung	AAA-Anforderung	Anwendung
Normal Text (< 18 pt)	4.5:1	7:1	Fließtext, normale Inhalte
Large Text (≥ 18 pt)	3:1	4.5:1	Headlines, Hero-Sections
Bold Large (≥ 14 pt)	3:1	4.5:1	Fette Headlines, prominente Buttons
UI Components	3:1	(nicht definiert)	Buttons, Form-Borders, Icons
Logos / Dekorativ	Keine	Keine	Ausgenommen von WCAG
Inaktive Elemente	Keine	Keine	Disabled Buttons etc.

Häufig gestellte Fragen

Anleitung

1
Vordergrundfarbe wählen
Text-Farbe per Color-Picker oder Hex-Eingabe – beide Eingabefelder sind synchron.
2
Hintergrundfarbe wählen
Hintergrund-Farbe per Color-Picker oder Hex-Eingabe.
3
Bewertung lesen
Tool zeigt Kontrast-Ratio plus Pass/Fail für 4 Text-Kategorien und UI-Komponenten.
4
Bei Fail anpassen
Color-Suggestions zeigen, welche Farb-Variation das Ziel-Ratio sicher erreicht – ein Klick übernimmt sie.

Über Selbststarter

Selbststarter ist deine Sammlung kostenloser Online-Tools – aktuell Generatoren, bald auch Konverter und mehr. Alle Tools laufen im Browser, ohne Anmeldung, ohne Tracking.

#css
#design
#frontend
#webentwicklung
#accessibility
#barrierefreiheit