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.

Elysia Tools

Mobile Navigation

Design

Accessibility-Heatmap-Generator

Erzeugt eine kontrastfokussierte Accessibility-Heatmap aus Screenshot oder HTML und schlaegt Patch-Farben vor

Einzelheiten

Wobei dieses Tool hilft

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.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

1 Beispiele

Eine Heatmap aus einem kontrastarmen Dashboard-Screenshot erzeugen

Markiert riskante Bereiche und schlaegt Patch-Farben vor.

{
  "type": "file",
  "filePath": "/public/samples/html/accessibility-heatmap-example-report.html"
}

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

4 Optionen

DateienQuelldateien für diesen Workflow hochladen.1

DesignbildfileOptionales Feld

Maximale Größe pro Datei: 15 MBUnterstützte Typen: image/png, image/jpeg, image/webp, .png, .jpg, .jpeg, .webp

InhaltHaupteingaben einfügen oder eingeben.1

HTML-EingabetextareaOptionales Feld

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.1

WCAG-StufeselectOptionales Feld

SchalterOptionales Verhalten aktivieren oder deaktivieren.1

Patch-Vorschlaege zeigencheckboxOptionales FeldAktiviert, wenn ausgewählt

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

Accessibility-Heatmap-Generator

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Kontrastprüfung eines Dashboard-Designs

2. Accessibility-Audit für ein Newsletter-Template

FAQ

Web Python Bildverarbeitung Beispiele

Android Java Bildverarbeitungsbeispiele

Android Kotlin Bildverarbeitungsbeispiele

Web Rust Bildverarbeitungsbeispiele

PDF-Rechnungsgenerator

Data-URI-Generator

Tiefenkarten-Generator

Parallax-Animation-Generator

Tools fuer Web-Accessibility-Audits und lesbare Farbpruefung

Tools fur Bildformat-Konvertierung und animierten Export

HTML-Extraktions-, Bereinigungs- und Markdown/PDF-Export-Tools

Werkzeuge fur Bildbereinigung, Rahmen und Batch-Vorbereitung