# Pruefer fuer Farbseh-Barrierefreiheit Misst WCAG-Kontrast, simuliert Farbsehstoerungen und markiert optional schwache Bildbereiche. > Kanonische Seite: https://elysiatools.com/de/tools/color-vision-accessibility-checker - **Kategorie:** Design - **Schlagwörter:** farbenblindheit, barrierefreiheit, wcag, kontrast ## Überblick Dieses Tool bewertet sowohl die Kontrast-Konformitaet als auch, wie sich ein Farbpaar fuer Nutzer mit verschiedenen Farbsehstoerungen verhaelt. Bedeutung der Badges: - AA normal: zeigt, ob das Kontrastverhaeltnis WCAG AA fuer normal grossen Text erfuellt. Der Grenzwert ist 4.5:1. - AAA normal: zeigt, ob das Kontrastverhaeltnis WCAG AAA fuer normal grossen Text erfuellt. Der Grenzwert ist 7:1. Warum das wichtig ist: - "Normal" meint normalen Fliesstext, kleine Labels und den meisten ueblichen UI-Text. - Grosser Text hat niedrigere WCAG-Schwellen: AA large besteht ab 3:1, AAA large ab 4.5:1. - Ein Farbpaar kann also AAA normal verfehlen und dennoch fuer grosse Ueberschriften oder fetten Anzeigetext akzeptabel sein. Felder: - Vordergrundfarbe: Text-, Icon- oder Haupt-UI-Farbe im Vordergrund - Hintergrundfarbe: die dahinterliegende Flaechenfarbe - Designbild: optionaler Screenshot zur Analyse lokaler Bereiche mit zu wenig Kontrast - WCAG-Stufe: bestimmt den Schwellenwert, nach dem Bildbereiche markiert werden Ergebnis lesen: - Die Karten Normal / Protanopia / Deuteranopia / Tritanopia / Achromatopsia zeigen das Farbpaar unter jeder Simulation. - Das Kontrastverhaeltnis wird nach jeder Simulation neu berechnet, damit sichtbar wird, ob ein Paar ausserhalb normaler Sicht problematisch wird. - Die Screenshot-Analyse markiert Kacheln, deren lokaler Kontrast unter den gewaehlten WCAG-Schwellenwert faellt. ## Eingaben - **Vordergrundfarbe** (color) - **Hintergrundfarbe** (color) - **Designbild** (file) - **WCAG-Stufe** (select) ## Wann verwenden - Wenn Sie neue Farbpaletten für Websites oder Apps auf WCAG-Konformität prüfen möchten. - Wenn Sie sicherstellen müssen, dass Texte und Icons auch für Nutzer mit Farbfehlsichtigkeit (z. B. Rot-Grün-Schwäche) lesbar bleiben. - Wenn Sie Screenshots von Benutzeroberflächen auf lokale Kontrastprobleme untersuchen wollen, bevor das Design in die Entwicklung geht. ## Funktionsweise - Geben Sie die gewünschte Vordergrundfarbe (z. B. für Text) und Hintergrundfarbe als Hex-Code ein. - Wählen Sie optional die WCAG-Stufe (AA oder AAA) und laden Sie ein Designbild hoch, um eine detaillierte Bildanalyse durchzuführen. - Das Tool berechnet das Kontrastverhältnis und zeigt eine Vorschau der Farben unter verschiedenen Sehbedingungen wie Protanopie oder Achromatopsie. - Bei hochgeladenen Bildern werden Bereiche, die den gewählten WCAG-Schwellenwert unterschreiten, visuell hervorgehoben. ## Anwendungsfälle - Überprüfung von Button-Farben und Texten auf ausreichenden Kontrast für barrierefreies Webdesign. - Analyse von UI-Mockups, um schwer lesbare Bereiche in komplexen Layouts frühzeitig zu erkennen. - Anpassung von Corporate-Design-Farben, um sicherzustellen, dass sie für alle Nutzergruppen zugänglich sind. ## Häufig gestellte Fragen ### Was bedeuten die WCAG-Stufen AA und AAA? WCAG AA erfordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text, während AAA strenger ist und 7:1 verlangt. Für großen Text gelten niedrigere Schwellenwerte (3:1 bzw. 4,5:1). ### Welche Arten von Farbfehlsichtigkeit werden simuliert? Das Tool simuliert Protanopie (Rotschwäche), Deuteranopie (Grünschwäche), Tritanopie (Blauschwäche) und Achromatopsie (vollständige Farbenblindheit). ### Warum ändert sich das Kontrastverhältnis bei den Simulationen? Farben wirken für Menschen mit Farbsehschwächen anders, was den wahrgenommenen Kontrast verringern kann. Das Tool berechnet den Kontrast für jede Simulation neu, um diese Effekte aufzuzeigen. ### Welche Bildformate werden für die Design-Analyse unterstützt? Sie können Screenshots oder Mockups in den Formaten PNG, JPEG und WebP hochladen. ### Was bedeutet 'Normal' bei der Textgröße? 'Normal' bezieht sich auf Standard-Fließtext, kleine Labels und die meisten üblichen UI-Texte, für die strengere Kontrastregeln gelten als für große Überschriften. ## Ähnliche Tools - [Barrierefreiheitspruefer](https://elysiatools.com/de/tools/accessibility-checker): Erkennt haeufige WCAG-2.1-Probleme in HTML, Seiten oder Designbildern und liefert direkt umsetzbare Hinweise - [Bild-Farbpaletten-Extraktor](https://elysiatools.com/de/tools/image-color-palette-extractor): Laedt ein Bild hoch, extrahiert dominante Farben und exportiert codefertige Tokens mit Kontrastpruefung - [VP8-Bildanalysator](https://elysiatools.com/de/tools/vp8-image-analyzer): Analysiert WebP/VP8-Bilder mit Sharp, erzeugt eine Graustufen-Displacement-Map und rendert ein 3D-Relief mit Three.js - [Accessibility-Heatmap-Generator](https://elysiatools.com/de/tools/accessibility-heatmap-generator): Erzeugt eine kontrastfokussierte Accessibility-Heatmap aus Screenshot oder HTML und schlaegt Patch-Farben vor - [Bild-Kanal-Extraktor](https://elysiatools.com/de/tools/image-channel): Extrahiert, manipuliert und analysiert individuelle Farbkanäle (RGB, Alpha, Luminanz) mit professionellen Verarbeitungsoptionen - [Bild-Farb-Extraktor](https://elysiatools.com/de/tools/image-color-extractor): Extrahiert dominante Farben aus Bildern mit verschiedenen Algorithmen einschließlich K-Means-Clustering und Histogrammanalyse - [Bild-Palette zu Design-Tokens](https://elysiatools.com/de/tools/image-to-design-tokens): Extrahiert dominante Farben per k-Means und exportiert sie als CSS-/SCSS-Variablen, Tailwind-Config oder JSON-Tokens mit Namen und Farbskala - [Film-Farbkorrektur](https://elysiatools.com/de/tools/image-cinematic-color): Wenden Sie professionelle Film-Farbkorrektur auf Ihre Bilder an. ## Beispiele - [Android Java Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-java): Android Java Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Android Kotlin Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-kotlin): Android Kotlin Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung - [Web Rust Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/web-image-processing-rust): Web Rust Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung ## Verwandte Inhalte - [Generatoren fur CSS-Effekte, Paletten und Design-Tokens](https://elysiatools.com/de/hubs/design-generate): Gebundelte Werkzeuge fur CSS-Visualeffekte, Palettenaufbau und Design-Token-Generierung in einem Hub. - [Tools fuer Web-Accessibility-Audits und lesbare Farbpruefung](https://elysiatools.com/de/hubs/web-accessibility-audits): Pruefen Sie WCAG-Probleme, Screenreader-Reihenfolge, Kontrastfehler, Risiken bei Farbsehschwaechen und zugaengliche Farbwahl in einem Hub fuer Web-Accessibility-Workflows. - [Tools fur Bildformat-Konvertierung und animierten Export](https://elysiatools.com/de/hubs/image-convert): Vergleiche Bildkonverter fur JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 und animationsgeeignete Exporte in einem Hub. - [Werkzeuge fur Bildbereinigung, Rahmen und Batch-Vorbereitung](https://elysiatools.com/de/hubs/image-utility): Bunde Bildbereinigung, Beschneiden, Padding, Rahmen, Batch-Resize/Kompression, Wasserzeichen und visuelle Veredelung in einem Hub fur Asset-Vorbereitung.