Farbkontrast-Checker
Farbkontrast-Checker
Prüfe die Barrierefreiheit von Farbkombinationen nach den WCAG 2.1 Richtlinien. Mit visueller Vorschau, Farbenblind-Simulation und detaillierter Analyse.
Hinweis: Dieses Tool dient zu Lern- und Testzwecken. Alle Berechnungen und Verarbeitungen erfolgen lokal in Ihrem Browser – es werden keine Daten an einen Server gesendet.
Inhaltsverzeichnis
Schnellübersicht
Auf dieser Seite findest du:
- Farbkontrast-Checker: Prüfe Vorder- und Hintergrundfarben
- WCAG-Konformität: AA, AAA und AA Large Standards
- Live-Vorschau: Textbeispiele in Originalgröße
- Farbenblind-Simulation: 4 verschiedene Simulationen
- Farbtheorie: Luminanz und Kontrastverhältnis
- FAQ: Häufige Fragen zur Barrierefreiheit
1. Farbkontrast-Checker
Wähle Vorder- und Hintergrundfarbe und prüfe die Lesbarkeit nach WCAG 2.1 Richtlinien.
Kontrast prüfen
Je höher der Wert, desto besser die Lesbarkeit.
WCAG-Kontrastskala
Live-Vorschau
Farbenblind-Simulation
Wie sieht diese Farbkombination für Menschen mit Farbenblindheit aus?
2. Die Theorie hinter dem Kontrast
Das Kontrastverhältnis ist der Schlüssel zur Barrierefreiheit. Hier die Grundlagen:
WCAG 2.1 Richtlinien
Die Web Content Accessibility Guidelines definieren Mindestkontraste für barrierefreie Inhalte:
- Level AA: 4.5:1 (normal), 3:1 (groß)
- Level AAA: 7:1 (normal), 4.5:1 (groß)
Relative Luminanz
Die relative Helligkeit einer Farbe, berechnet aus den RGB-Werten:
Wobei R, G, B zuvor in den linearen Farbraum umgewandelt werden.
Kontrastverhältnis
Das Verhältnis der Luminanzen zweier Farben:
Wobei L₁ die hellere und L₂ die dunklere Farbe ist. Je höher das Verhältnis, desto besser der Kontrast.
Farbenblindheit
Etwa 8% der Männer und 0.5% der Frauen haben eine Form von Farbenblindheit.
- Protanopie: Keine Rot-Rezeptoren
- Deuteranopie: Keine Grün-Rezeptoren
- Tritanopie: Keine Blau-Rezeptoren
3. FAQ – Häufige Fragen
Häufige Fragen zur Barrierefreiheit
WCAG steht für Web Content Accessibility Guidelines – internationale Richtlinien für barrierefreie Webinhalte.
Warum wichtig?
- Inklusion: Menschen mit Sehbehinderungen können Inhalte lesen
- Gesetzliche Anforderungen: In vielen Ländern ist WCAG-Konformität gesetzlich vorgeschrieben
- Bessere User Experience: Gute Kontraste verbessern die Lesbarkeit für alle
- SEO: Barrierefreie Seiten werden von Suchmaschinen bevorzugt
Level AA (empfohlen):
- Normaler Text: Kontrastverhältnis ≥ 4.5:1
- Großer Text (18pt oder 14pt fett): ≥ 3:1
Level AAA (strenger Standard):
- Normaler Text: Kontrastverhältnis ≥ 7:1
- Großer Text: ≥ 4.5:1
Empfehlung: Mindestens Level AA für alle Inhalte anstreben.
Luminanz ist die physikalische Helligkeit einer Farbe, berechnet aus den RGB-Werten mit Gewichtung nach der menschlichen Wahrnehmung.
Helligkeit (auch Value oder Lightness) ist ein subjektiverer Wert, der in Farbsystemen wie HSL oder HSV verwendet wird.
Wichtig: Für die WCAG-Berechnung wird die relative Luminanz verwendet, nicht die HSL-Helligkeit.
Klassische Kombinationen mit hohem Kontrast:
- Schwarz auf Weiß: 21:1 – perfekt
- Weiß auf Schwarz: 21:1 – perfekt
- Dunkelblau auf Weiß: ~12:1 – sehr gut
- Weiß auf Dunkelblau: ~12:1 – sehr gut
- Schwarz auf Hellgrau: ~8:1 – gut
- Dunkelgrün auf Weiß: ~10:1 – gut
Tipp: Verwende immer einen Kontrast von mindestens 4.5:1 für normalen Text.
Menschen mit Farbenblindheit haben Schwierigkeiten, bestimmte Farben voneinander zu unterscheiden.
Typen von Farbenblindheit:
- Protanopie: Kann Rot nicht wahrnehmen (ca. 1% der Männer)
- Deuteranopie: Kann Grün nicht wahrnehmen (ca. 6% der Männer)
- Tritanopie: Kann Blau nicht wahrnehmen (selten)
Lösung: Verwende nicht nur Farben, sondern auch Kontraste, Muster oder Symbole, um Informationen zu vermitteln.
Es gibt verschiedene Methoden, die Barrierefreiheit von Farben zu testen:
- Mit diesem Tool: Gib Vorder- und Hintergrundfarbe ein und prüfe das Kontrastverhältnis
- Farbenblind-Simulatoren: Zeige, wie die Farben für verschiedene Formen von Farbenblindheit aussehen
- Browser-Erweiterungen: Chrome/Edge haben integrierte Barrierefreiheits-Tools
- WCAG-Validatoren: Online-Tools wie WAVE oder AChecker prüfen ganze Websites
Unser Tool: Bietet einen integrierten Farbenblind-Simulator und live Kontrast-Check!
Die WCAG unterscheidet zwischen normalem und großem Text:
- Normaler Text: Weniger als 18pt (24px) oder weniger als 14pt (18.66px) fett
- Großer Text: Mindestens 18pt (24px) oder 14pt (18.66px) fett
Kontrastanforderungen:
- Normaler Text: AA = 4.5:1, AAA = 7:1
- Großer Text: AA = 3:1, AAA = 4.5:1
Tipp: Großer Text hat niedrigere Kontrastanforderungen – eine gute Option für wichtige Inhalte.
Ein guter Kontrast verbessert die Lesbarkeit für alle Nutzer:
- Bessere Lesbarkeit: Texte sind schneller und leichter zu erfassen
- Weniger Augenbelastung: Besonders bei längerer Bildschirmarbeit
- Bessere Sichtbarkeit: Auch bei ungünstigen Lichtverhältnissen (Sonne, schlechte Beleuchtung)
- Ältere Nutzer: Mit zunehmendem Alter nimmt die Kontrastempfindlichkeit ab
- Mobile Geräte: Kleine Bildschirme profitieren von gutem Kontrast
Fazit: Gute Kontraste sind eine Win-Win-Situation für alle Nutzer.
Zusammenfassung
Die wichtigsten Punkte
- Kontrastverhältnis: Das Verhältnis der Helligkeiten zweier Farben
- WCAG AA: Mindeststandard – 4.5:1 für normalen Text
- WCAG AAA: Strenger Standard – 7:1 für normalen Text
- Großer Text: Niedrigere Anforderungen (AA: 3:1, AAA: 4.5:1)
- Luminanz: Die relative Helligkeit einer Farbe
- Farbenblindheit: Betrifft ~8% der Männer – Kontrast ist wichtig
- Unser Tool: Prüft Kontraste, simuliert Farbenblindheit und zeigt Live-Vorschauen
Weitere Design-Tools
HEX, RGB, HSL umwandeln – mit Farbharmonien und Kontrast-Check.
Zum ToolErstelle harmonische Farbpaletten mit 5 Farben und Export-Funktionen.
Zum ToolQR-Codes für URLs, Texte, WiFi, vCards und mehr mit Farbanpassung.
Zum ToolDie vollständige ASCII-Tabelle mit Suche, Filter und Dark Mode.
Zum Tool