# Accessibility-Heatmap-Generator Erzeugt eine kontrastfokussierte Accessibility-Heatmap aus Screenshot oder HTML und schlaegt Patch-Farben vor > Kanonische Seite: https://elysiatools.com/de/tools/accessibility-heatmap-generator - **Kategorie:** Design - **Schlagwörter:** barrierefreiheit, heatmap, wcag, kontrast ## Überblick Laden Sie einen UI-Screenshot hoch oder fuegen Sie HTML mit Inline-Farben ein. Das Tool erzeugt eine Heatmap potenzieller WCAG-Risiken und schlaegt Patch-Farben vor. ## Eingaben - **HTML-Eingabe** (textarea): Low contrast text - **Designbild** (file) - **WCAG-Stufe** (select) - **Patch-Vorschlaege zeigen** (checkbox) ## Wann verwenden - Vor dem Entwicklungs-Handoff, um Design-Entwürfe auf ausreichende Kontrastwerte zu prüfen. - Beim Audit bestehender Webseiten, um schnell problematische Text-Hintergrund-Kombinationen im HTML zu finden. - Während der Qualitätssicherung, um visuelle Barrierefreiheitsberichte für Stakeholder zu erstellen. ## Funktionsweise - Laden Sie einen UI-Screenshot (PNG, JPG, WebP) hoch oder fügen Sie HTML-Code mit Inline-Farben ein. - Wählen Sie die gewünschte WCAG-Stufe (AA für 4.5:1 oder AAA für 7:1) als Prüfstandard aus. - Aktivieren Sie bei Bedarf die Patch-Vorschläge, um alternative, barrierefreie Farbcodes zu erhalten. - Laden Sie den generierten HTML-Bericht herunter, der die Heatmap der Risikobereiche und konkrete Lösungsvorschläge enthält. ## Anwendungsfälle - Visuelle Überprüfung von Dashboard-Screenshots auf Lesbarkeit bei schlechten Lichtverhältnissen. - Automatisierte Kontrastprüfung von E-Mail-Templates durch Einfügen des HTML-Quellcodes. - Erstellung von Accessibility-Reports für Kundenpräsentationen zur Begründung von Design-Anpassungen. ## Häufig gestellte Fragen ### Welche Dateiformate werden für Screenshots unterstützt? Das Tool unterstützt gängige Bildformate wie PNG, JPG, JPEG und WebP bis zu einer Dateigröße von 15 MB. ### Was ist der Unterschied zwischen WCAG AA und AAA? WCAG AA erfordert ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text, während die strengere AAA-Stufe ein Verhältnis von 7:1 verlangt. ### Wie funktionieren die Patch-Vorschläge? Das Tool berechnet auf Basis der fehlerhaften Farbkombination automatisch neue Hex-Werte für den Vordergrund, die den gewählten WCAG-Standard erfüllen. ### Kann ich auch reinen HTML-Code prüfen? Ja, Sie können HTML-Code mit Inline-Styles (z.B. color und background-color) in das Textfeld einfügen, um die Kontraste direkt zu analysieren. ### In welchem Format erhalte ich das Ergebnis? Sie erhalten eine herunterladbare HTML-Datei, die die visuelle Heatmap sowie eine Liste der gefundenen Probleme und Farbvorschläge enthält. ## Ähnliche Tools - [PDF-Rechnungsgenerator](https://elysiatools.com/de/tools/pdf-invoice-generator): Erstellt eine gebrandete PDF-Rechnung aus strukturierten Positionen - [Data-URI-Generator](https://elysiatools.com/de/tools/data-uri-generator): Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten - [Tiefenkarten-Generator](https://elysiatools.com/de/tools/image-depth-map): Erstellt Tiefenkarten aus Bildern unter Verwendung von Helligkeits-, Sättigungs- und Kantenanalyse. Erstellt Tiefenkarten in Graustufen, wobei hellere Pixel nähere Objekte und dunklere Pixel entferntere Objekte anzeigen. - [Parallax-Animation-Generator](https://elysiatools.com/de/tools/image-parallax): Erstellt Parallax-Animationen aus Bildern. Erstellt eine tiefenbasierte Animation, bei der verschiedene Ebenen mit unterschiedlichen Geschwindigkeiten bewegt werden und einen 3D-Effekt erzeugen. - [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 - [Rot-Cyan 3D-Anaglyph-Generator](https://elysiatools.com/de/tools/image-anaglyph): Erstellt Rot-Cyan 3D-Anaglyph-Bilder aus normalen Fotos. Erstellt stereoskopische 3D-Bilder, die mit Rot-Cyan 3D-Brille betrachtet werden können. - [Foto-Mosaik-Generator](https://elysiatools.com/de/tools/image-mosaic-generator): Erstellen Sie atemberaubende Fotomosaiken, indem Sie Hunderte kleiner Bilder zu einem großen Hauptbild kombinieren. Jede Kachel wird sorgfältig ausgewählt, um mit den Farben des darunterliegenden Bildes übereinzustimmen. - [SVG-Favicon-Generator](https://elysiatools.com/de/tools/svg-favicon-generator): Erzeugt aus einem SVG- oder Rasterlogo ein komplettes Favicon-Paket mit ICO, PNG-Varianten, Apple-Touch-Icon und Web-Manifest ## Beispiele - [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 - [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 Rust Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/web-image-processing-rust): Web Rust Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung ## Verwandte Inhalte - [Web-Accessibility-Audit vor der Veröffentlichung](https://elysiatools.com/de/hubs/web-accessibility-audits): Prüfen Sie Struktur, Vorlesereihenfolge, Screenshot-Kontrast und Risiken bei Farbsehschwächen einer Seite oder UI-Komponente und überführen Sie automatische Befunde in ein von Menschen geprüftes Veröffentlichungsprotokoll.