Farbkontrast Checker – WCAG Kontrast prüfen

Inhaltsverzeichnis

             Schnellübersicht
            Farbkontrast Checker: WCAG AA und AAA prüfen
Live-Vorschau: Text-Beispiele mit deinen Farben
Vorschläge: Verbesserte Farben mit einem Klick
Presets: Bewährte Kombinationen
Theorie: Was ist Kontrast? (Anfängerfreundlich)
Geschichte: Von WCAG 1.0 zu WCAG 2.1
FAQ: Häufige Fragen zur Barrierefreiheit

        

1. Farbkontrast Checker

Wähle Text- und Hintergrundfarbe – der Kontrast wird sofort berechnet.

Textfarbe

Hintergrundfarbe

Ergebnis

Kontrastverhältnis

21.00:1

Ausgezeichnet

WCAG AA

Normaler Text (≥ 4.5:1)

Bestanden

WCAG AA (Groß)

Großer Text (≥ 3:1)

Bestanden

WCAG AAA

Normaler Text (≥ 7:1)

Bestanden

WCAG AAA (Groß)

Großer Text (≥ 4.5:1)

Bestanden

Live-Vorschau

Überschrift (2rem, bold)

Unterüberschrift (1.4rem, semibold)

Dies ist ein Beispieltext, um den Kontrast zu testen. Er zeigt, wie normaler Fließtext mit deinen gewählten Farben aussieht. Guter Kontrast ist entscheidend für die Lesbarkeit.

Kleiner Text (0.8rem) – besonders kritisch für die Lesbarkeit.

Beispiel-Button

Verbesserungsvorschläge

Der Kontrast ist ausgezeichnet. Keine Änderungen nötig!

Wussten Sie schon?

Das WCAG AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text.
WCAG AAA verlangt mindestens 7:1 für normalen Text und 4.5:1 für großen Text.
Der maximale Kontrast ist 21:1 (Schwarz auf Weiß oder umgekehrt).
Der minimale Kontrast ist 1:1 (gleiche Farbe).
Etwa 8% der Männer und 0,5% der Frauen haben eine Farbfehlsichtigkeit.

2. Theorie – Kontrast & Barrierefreiheit

Verstehe die Grundlagen von Kontrast und Barrierefreiheit – ohne Vorkenntnisse.

Was ist Kontrastverhältnis?

Das Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen zwei Farben.

Bereich: 1:1 (kein Kontrast) bis 21:1 (maximal)
Formel: (L1 + 0.05) / (L2 + 0.05)
L: Relative Luminanz (0-1)

Schwarz auf Weiß = 21:1

Warum ist Kontrast wichtig?

Guter Kontrast ist essentiell für:

Lesbarkeit: Text muss klar erkennbar sein
Barrierefreiheit: Auch für Menschen mit Sehschwäche
Mobile Nutzung: Bei Sonnenlicht draußen
Rechtliches: WCAG ist in vielen Ländern Pflicht

Über 2 Milliarden Menschen haben Sehprobleme

Was ist WCAG?

Die Web Content Accessibility Guidelines sind der internationale Standard:

WCAG 2.0: 2008 veröffentlicht
WCAG 2.1: 2018, mit mobilen Anforderungen
WCAG 2.2: 2023, aktuelle Version
Stufen: A (Minimum), AA (Standard), AAA (Erhöht)

Behörden in der EU müssen WCAG AA erfüllen

Tipps für gute Kontraste

Nicht nur Farbe: Auch Fett, Größe, Icons nutzen
Testen: Regelmäßig mit Tools prüfen
Farbfehlsichtigkeit: Simulatoren verwenden
Fokus-Zustände: Auch für Tastaturnutzer sichtbar
Zielgruppe: Ältere Menschen brauchen mehr Kontrast

Ziel: WCAG AA oder besser

Wussten Sie schon? Die WCAG wurde 1999 erstmals veröffentlicht – noch vor dem Aufkommen von Smartphones. Tim Berners-Lee, der Erfinder des World Wide Web, setzt sich seit Jahren für Barrierefreiheit ein. Heute ist WCAG in über 30 Ländern gesetzlich verankert, darunter die EU, USA, Kanada, Australien und Japan. In der EU müssen öffentliche Stellen seit 2019 WCAG 2.1 AA erfüllen.

3. WCAG-Anforderungen im Detail

Die verschiedenen WCAG-Stufen und ihre Anforderungen:

WCAG A (Minimum)

Die grundlegendste Stufe:

Text auf Bildern: Vermeiden
Farbkontrast: Nicht festgelegt
Bedeutung: Minimum für Barrierefreiheit

Wird oft nicht als ausreichend angesehen

WCAG AA (Standard)

Der internationale Standard:

Normaler Text: Mindestens 4.5:1
Großer Text: Mindestens 3:1
UI-Komponenten: Mindestens 3:1
Gesetzlich: In EU, USA, u.a. verpflichtend

WCAG AAA (Erhöht)

Die strengste Stufe:

Normaler Text: Mindestens 7:1
Großer Text: Mindestens 4.5:1
Schwierig: Nicht immer praktikabel
Ziel: Für spezielle Anwendungen

Für medizinische Geräte, Behörden

Was ist "großer Text"?

Die WCAG definiert "großen Text" als:

18pt (24px) oder größer, normal
14pt (18.66px) oder größer, fett
Faustregel: Ab 24px = großer Text

Überschriften sind oft "großer Text"

4. Geschichte der Barrierefreiheit

Von den ersten Richtlinien bis zum heutigen Standard.

1995

Erste Bemühungen

Das W3C (World Wide Web Consortium) beginnt, sich mit Web-Barrierefreiheit zu beschäftigen. Erste Empfehlungen für Screenreader und alternative Texte werden veröffentlicht.

1999

WCAG 1.0

Die erste Version der Web Content Accessibility Guidelines wird veröffentlicht. Sie enthält 14 Richtlinien mit Checkpunkten für Barrierefreiheit.

2008

WCAG 2.0

Die überarbeitete Version WCAG 2.0 wird veröffentlicht. Sie führt die vier Prinzipien Wahrnehmbar, Bedienbar, Verständlich, Robust (POUR) ein.

2016

EU-Richtlinie

Die EU verabschiedet die Web-Barrierefreiheitsrichtlinie. Öffentliche Stellen müssen ab 2019 WCAG 2.1 AA erfüllen. In den USA gilt ähnliches durch den ADA.

2018

WCAG 2.1

WCAG 2.1 erweitert die Richtlinien um mobile Anforderungen, Gesten und neue Erfolgskriterien. Die Kontrastanforderungen bleiben gleich.

2023

WCAG 2.2

Die neueste Version WCAG 2.2 wird veröffentlicht. Sie ergänzt Anforderungen an Fokus-Anzeige, Drag-and-Drop und die Barrierefreiheit von Anmeldungen.

Heute

Barrierefreiheit als Standard

Über 30 Länder haben WCAG gesetzlich verankert. Barrierefreies Design ist nicht mehr optional, sondern Standard. Auch privatwirtschaftliche Unternehmen investieren zunehmend in Accessibility.

5. FAQ – Spannende Fragen & Antworten

Häufige Fragen zu Kontrast & Barrierefreiheit

Warum ist 21:1 das maximale Kontrastverhältnis?

Das maximale Kontrastverhältnis von 21:1 ergibt sich aus der WCAG-Formel:

(L1 + 0.05) / (L2 + 0.05)

Die relative Luminanz L reicht von 0 (Schwarz) bis 1 (Weiß).

Schwarz auf Weiß: (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21:1
Gleiche Farbe: (0.5 + 0.05) / (0.5 + 0.05) = 1:1

Der Wert 0.05 im Nenner ist eine Konstante, die verhindert, dass sich durch Division durch Null unendliche Werte ergeben.

Interessant: 21:1 ist deshalb das Maximum, weil Weiß die hellste und Schwarz die dunkelste darstellbare Farbe ist.

Welche Farbe hat den besten Kontrast zu Blau?

Das hängt vom konkreten Blauton ab. Aber hier eine Faustregel:

Dunkles Blau (#0000FF): Weißer Text (Kontrast ~8.6:1)
Mittleres Blau (#3B82F6): Weißer Text (~3.7:1) oder schwarzer Text (~5.6:1)
Helles Blau (#87CEEB): Schwarzer Text (~13:1)

Warum ist das so?

Die relative Luminanz von Blau ist sehr niedrig, weil unser Auge Blau weniger empfindlich wahrnimmt als Rot oder Grün. Deshalb:

Dunkelblau wirkt fast wie Schwarz → weißer Text nötig
Hellblau wirkt fast wie Weiß → schwarzer Text nötig

Tipp: Verwende unser Tool, um den genauen Kontrast für dein Blau zu prüfen!

Was ist der Unterschied zwischen WCAG AA und AAA?

Die beiden Stufen unterscheiden sich hauptsächlich in den Kontrastanforderungen:

Kriterium	WCAG AA	WCAG AAA
Normaler Text	4.5:1	7:1
Großer Text	3:1	4.5:1
UI-Komponenten	3:1	3:1
Schwierigkeit	Mittel	Hoch
Empfehlung	Standard	Spezialanwendungen

Wann AAA verwenden?

Medizinische Anwendungen
Behörden und öffentliche Einrichtungen
Bildungsplattformen für Sehbehinderte
Finanzanwendungen für ältere Menschen

Wichtig: WCAG AAA ist nicht immer praktikabel. Manche Markenfarben können 7:1 nicht erreichen, ohne unkenntlich zu werden. In solchen Fällen ist AA ausreichend.

Wie teste ich Kontrast mit einem Smartphone?

Es gibt mehrere Möglichkeiten, den Kontrast auf dem Smartphone zu testen:

1. Apps verwenden:

Color Contrast Analyzer (iOS/Android)
Contrast Checker (Android)
Accessibility Scanner (Android, von Google)

2. Browser-Entwicklertools:

Chrome/Safari DevTools öffnen (auf Desktop)
Farbwähler verwenden – zeigt Kontrast an
Responsive Mode für Mobil-Ansicht

3. Screenshots analysieren:

Screenshot machen
In einem Analyse-Tool hochladen
Kontrast prüfen lassen

4. Live-Test mit Sonnenlicht:

Geh mit dem Smartphone nach draußen
Bei direkter Sonneneinstrahlung prüfen
Was gut lesbar ist, hat guten Kontrast

Tipp: Verwende unseren Online-Checker – funktioniert auch auf dem Smartphone!

Was ist Farbfehlsichtigkeit und wie wirkt sie sich aus?

Farbfehlsichtigkeit (umgangssprachlich "Farbenblindheit") betrifft etwa 8% der Männer und 0,5% der Frauen.

Arten:

Rot-Grün-Schwäche: Häufigste Form (Protanopie/Deuteranopie)
Blau-Gelb-Schwäche: Selten (Tritanopie)
Monochromasie: Sehr selten (nur Hell-Dunkel)

Auswirkungen auf Webdesign:

Rote und grüne Buttons sehen ähnlich aus
Fehlermeldungen in Rot werden nicht erkannt
Diagramme mit ähnlichen Farben sind unlesbar

Lösungen:

Nicht nur Farbe: Auch Icons, Text, Muster verwenden
Kontrast: Guter Kontrast hilft allen
Simulatoren: Tools wie Coblis zum Testen
Alternativtexte: Für Screenreader

Wichtig: Guter Kontrast ist auch für farbenblinde Nutzer essentiell – die Helligkeitsunterschiede bleiben erhalten!

Wie kann ich einen Kontrast von 4.5:1 berechnen?

Die WCAG-Formel für das Kontrastverhältnis lautet:

Kontrast = (L1 + 0.05) / (L2 + 0.05)

Wobei L1 die hellere und L2 die dunklere relative Luminanz ist.

Schritt 1: Relative Luminanz berechnen

Für jeden RGB-Kanal:
RsRGB = R / 255
if RsRGB <= 0.03928: R = RsRGB / 12.92
else: R = ((RsRGB + 0.055) / 1.055) ^ 2.4

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Schritt 2: Kontrast berechnen

Kontrast = (heller + 0.05) / (dunkler + 0.05)

Beispiel:

Schwarz (#000000): L = 0
Weiß (#FFFFFF): L = 1
Kontrast = (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21:1

Tipp: Verwende unser Tool – es berechnet alles automatisch!

Welche Tools gibt es für Barrierefreiheit?

Es gibt viele Tools für verschiedene Anforderungen:

1. Kontrast-Checker:

WebAIM Contrast Checker (online, kostenlos)
Contrast Ratio (contrast-ratio.com)
Adobe Color (mit Accessibility-Check)

2. Browser-Erweiterungen:

WAVE (Web Accessibility Evaluation Tool)
axe DevTools (Chrome/Firefox)
Lighthouse (in Chrome integriert)

3. Screenreader:

NVDA (Windows, kostenlos)
JAWS (Windows, kommerziell)
VoiceOver (macOS/iOS, integriert)
TalkBack (Android, integriert)

4. Farbfehlsichtigkeits-Simulatoren:

Coblis (Colblindor)
Color Oracle (Desktop-App)
Sim Daltonism (macOS)

5. Automatisierte Tests:

Pa11y (Kommandozeile)
axe-core (JavaScript-Bibliothek)
Lighthouse CI (in CI/CD integrierbar)

Für Entwickler: Integriere axe-core in deine Tests – so findest du Probleme automatisch.

Gilt WCAG auch für Apps und Software?

Ja, WCAG ist auch für Apps und Software relevant – auch wenn es ursprünglich für Webseiten entwickelt wurde.

Wie WCAG auf Apps angewendet wird:

Mobile Apps: WCAG 2.1 enthält spezifische Kriterien für Touch-Gesten und mobile Anforderungen.
Desktop-Software: Ähnliche Prinzipien gelten – Kontrast, Fokus, Tastaturnutzung.
Native Plattformen: Apple (Human Interface Guidelines) und Google (Material Design) haben eigene Barrierefreiheits-Richtlinien, die auf WCAG basieren.

Plattform-spezifische Guidelines:

iOS: Apple Accessibility Guidelines
Android: Material Design Accessibility
Windows: Microsoft Accessibility Insights
macOS: Apple Accessibility Programming Guide

Wichtig für Entwickler:

Kontrast: Gleiche Anforderungen wie Web (4.5:1 für Text)
Screenreader: VoiceOver, TalkBack, Narrator unterstützen
Tastaturnutzung: Auch ohne Maus bedienbar
Touch-Ziele: Mindestens 44x44 Pixel (Apple) / 48x48 (Google)

Fazit: Barrierefreiheit ist ein universelles Prinzip – egal ob Web, App oder Software!

Zusammenfassung

Die wichtigsten Punkte

Kontrastverhältnis: 1:1 (kein) bis 21:1 (maximal)
WCAG AA: 4.5:1 (normal), 3:1 (groß) – Standard
WCAG AAA: 7:1 (normal), 4.5:1 (groß) – Erhöht
Großer Text: Ab 18pt (24px) oder 14pt fett
Formel: (L1 + 0.05) / (L2 + 0.05)
Barrierefreiheit: In über 30 Ländern gesetzlich verankert
Farbfehlsichtigkeit: 8% der Männer, 0.5% der Frauen
Unser Tool: Live-Check mit WCAG AA und AAA

Weitere Tools

Farbkonverter

Konvertiere Farben zwischen HEX, RGB, HSL, HSV, CMYK und mehr.

Zum Tool

Farbpalette Generator

Erstelle harmonische Farbpaletten mit 6 Harmonie-Modi.

Zum Tool

Timestamp Converter

Unix-Zeitstempel in lesbare Daten umwandeln und umgekehrt.

Zum Tool

.gitignore Generator

Erstelle .gitignore-Dateien für alle gängigen Sprachen und Tools.

Zum Tool