Farbkontrast – Kontrastanforderungen für barrierefreie PDFs

Farbkontrast

Farbkontrast (Color Contrast) bezeichnet das Helligkeitsverhältnis zwischen Vordergrund- und Hintergrundfarben. Für barrierefreie Dokumente fordert WCAG mindestens 4,5:1 für normalen Text und 3:1 für großen Text sowie grafische Elemente. Ausreichender Kontrast ermöglicht Menschen mit Sehbehinderungen, Inhalte zu lesen.

Was ist Farbkontrast?

Farbkontrast ist das mathematisch berechnete Verhältnis der relativen Leuchtdichte (Luminanz) zwischen zwei Farben. Er wird als Verhältnis ausgedrückt, z.B. „4,5:1“.

Das Kontrastverhältnis verstehen:

Verhältnis	Interpretation	Beispiel
1:1	Kein Kontrast	Weiß auf Weiß
2:1	Sehr niedrig	Hellgrau auf Weiß
3:1	Minimum für große Elemente	Hellblau auf Weiß
4,5:1	WCAG AA für Text	Dunkelgrau auf Weiß
7:1	WCAG AAA	Schwarz auf Weiß
21:1	Maximum	Schwarz (#000) auf Weiß (#FFF)

### WCAG-Kontrastanforderungen:

Element	Level AA	Level AAA
Normaler Text	4,5:1	7:1
Großer Text (≥18pt oder ≥14pt fett)	3:1	4,5:1
UI-Komponenten, Grafiken	3:1	nicht definiert
Dekorative Elemente	keine	keine

### Berechnung des Kontrastverhältnisses:

„`
Kontrast = (L1 + 0,05) / (L2 + 0,05)

L1 = Luminanz der helleren Farbe
L2 = Luminanz der dunkleren Farbe
„`

In der Praxis: Tools nutzen!

Warum ist Farbkontrast wichtig für Barrierefreiheit?

Kontrast ist entscheidend für die Lesbarkeit:

Betroffene Nutzergruppen:

• Sehbehinderte Menschen: ~1,2 Mio in Deutschland
• Ältere Menschen: Sehkraft nimmt ab 50 ab
• Farbenblinde: ~8% der Männer
• Situativ: Sonne auf dem Bildschirm, schlechte Displays

WCAG-Kriterien:

• 1.4.3 (Level AA): Kontrast (Minimum) – 4,5:1 für Text
• 1.4.6 (Level AAA): Kontrast (Erweitert) – 7:1 für Text
• 1.4.11 (Level AA, WCAG 2.1): Non-text Contrast – 3:1 für Grafiken/UI

Für PDFs bedeutet das:

• Text muss ausreichenden Kontrast zum Hintergrund haben
• Infografiken müssen unterscheidbar sein
• Diagrammfarben müssen kontrastreich sein
• Formularfelder müssen erkennbar sein

Farbkontrast in der Praxis

Beispiel 1: Häufige Kontrastprobleme

Kombination	Kontrast	Bewertung
Hellgrau (#999) auf Weiß	2,85:1	Zu niedrig
Rot (#F00) auf Weiß	4,0:1	Knapp unter 4,5:1
Dunkelgrau (#595959) auf Weiß	7,0:1	AAA-Level
Blau (#0066CC) auf Weiß	5,57:1	AA-Level
Schwarz auf Weiß	21:1	Perfekt

### Beispiel 2: Infografik prüfen

Szenario: Ein Tortendiagramm mit 5 Farben.

Prüfung:

1. Jede Farbe gegen Weiß/Hintergrund messen
2. Benachbarte Segmente gegeneinander messen
3. Minimum 3:1 für alle (WCAG 1.4.11)

Zusätzlich: Muster oder Labels verwenden, nicht nur Farbe!

Beispiel 3: Kontrast in einem PDF prüfen

Mit Colour Contrast Analyser (kostenlos):

1. Tool starten
2. Pipette für Vordergrundfarbe → auf Text klicken
3. Pipette für Hintergrundfarbe → auf Hintergrund klicken
4. Ergebnis zeigt Pass/Fail für AA und AAA

Für PDFs:

• PDF öffnen, Screenshot machen, Farben messen
• Oder: Farbwerte aus InDesign/Word notieren und berechnen

Beispiel 4: Kontrast verbessern

Vorher: Text #888888 auf Weiß → 3,54:1

Lösung 1: Text dunkler machen → #595959 (7:1)
Lösung 2: Hintergrund dunkler machen → #F0F0F0 (4,6:1)
Lösung 3: Schrift vergrößern auf 18pt+ → 3:1 reicht

Kontrast-Tools:

Tool	Typ	Funktion
Colour Contrast Analyser	Desktop	Pipetten-Tool für Bildschirm
WebAIM Contrast Checker	Web	Hex-Werte eingeben
WAVE	Browser-Extension	Website-Kontrast automatisch
Adobe Color	Web	Farbpaletten-Generator mit Kontrastprüfung
Figma/Sketch Plugins	Design	Integration in Design-Workflow

## Verwandte Begriffe

• WCAG – Kriterien 1.4.3, 1.4.6, 1.4.11
• Accessibility – Kontrast ist Grundanforderung
• PDF/UA – Verweist auf WCAG-Kontraste
• Sehbehinderung – Hauptzielgruppe
• WCAG 2.1 – Erweitert um Grafikkontraste

Häufige Fragen zum Farbkontrast

1. Warum reicht 4,5:1 nicht für alles?

4,5:1 ist der Mindeststandard für normalen Text nach WCAG AA. Für Nutzer mit stärkeren Sehbehinderungen empfiehlt Level AAA ein Verhältnis von 7:1. Großer Text (≥18pt) ist leichter lesbar, daher reicht 3:1. Dekorative Elemente ohne Information brauchen keinen Kontrast. Die 4,5:1-Regel ist ein Kompromiss zwischen Lesbarkeit und Design-Freiheit.

2. Wie prüfe ich Farbkontrast in einem PDF?

Am einfachsten: 1) PDF öffnen, 2) Screenshot machen, 3) Colour Contrast Analyser (kostenlos) nutzen – Pipette auf Text und Hintergrund. Alternativ: Farbwerte aus dem Quellprogramm (Word: Format → Schriftfarbe; InDesign: Farbfelder) notieren und in WebAIM Contrast Checker eingeben.

3. Was bedeutet „Farbe allein darf nicht informationstragend sein“?

WCAG 1.4.1: Wenn Information nur durch Farbe vermittelt wird (z.B. „Pflichtfelder sind rot“), können Farbenblinde sie nicht wahrnehmen. Lösung: Zusätzlich Symbole, Text oder Muster verwenden. Beispiel: Pflichtfeld rot + Sternchen (*). Diagramm: Farben + Muster + Beschriftung.

4. Gilt der Kontrast auch für Bilder in PDFs?

Für Text auf Bildern: Ja! Text über einem Foto muss lesbaren Kontrast haben. Für Fotos selbst: Nein, der Inhalt eines Fotos unterliegt nicht den Kontrastanforderungen. Für Infografiken und Diagramme: Ja, die vermitteln Information und brauchen 3:1 Kontrast (WCAG 1.4.11).

5. Mein Design-Team will „modernes“ Hellgrau – was tun?

Zeigen Sie die Zahlen: Hellgrau auf Weiß erreicht oft nur 2-3:1 (unter Minimum). Kompromisse: 1) Dunkleres Grau wählen (#595959 statt #999999), 2) Hintergrund leicht abdunkeln, 3) Schriftgröße erhöhen. Mit dem Colour Contrast Analyser können Designer alternative Farben finden, die modern UND zugänglich sind.

---

„Kontrast“ in bold white text with high contrast black shadow, color comparison squares showing low vs high contrast, 4.5:1 badge, eye icon with visibility concept, slider going from light gray to dark, before/after text readability demo, visual contrast demonstration, warm yellow and cool blue colors, 1280×720 YouTube thumbnail style

---

Barrierefreie PDFs erstellen? Jetzt kostenlos starten →