Accessibility-Heatmap-Generator

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

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.

Beispielergebnisse

1 Beispiele

Eine Heatmap aus einem kontrastarmen Dashboard-Screenshot erzeugen

Markiert riskante Bereiche und schlaegt Patch-Farben vor.

accessibility-heatmap-example-report.html Datei anzeigen
Eingabeparameter anzeigen
{ "htmlInput": "", "designImage": "/public/samples/images/logo.png", "wcagLevel": "AA", "showPatchSuggestions": true }

Click to upload file or drag and drop file here

Maximum file size: 15MB Supported formats: image/png, image/jpeg, image/webp, .png, .jpg, .jpeg, .webp

Wichtige Fakten

Kategorie
Design & Farbe
Eingabetypen
textarea, file, select, checkbox
Ausgabetyp
file
Sample-Abdeckung
4
API verfügbar
Yes

Überblick

Der Accessibility-Heatmap-Generator analysiert UI-Screenshots oder HTML-Code und erstellt eine visuelle Heatmap, die Bereiche mit unzureichendem Farbkontrast hervorhebt. Durch die Prüfung gegen WCAG AA- oder AAA-Standards identifiziert das Tool schnell Barrierefreiheitsrisiken und schlägt automatisch optimierte Patch-Farben vor, um die Lesbarkeit für alle Nutzer zu gewährleisten.

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.

So funktioniert es

  • •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.

Beispiele

1. Kontrastprüfung eines Dashboard-Designs

UI/UX Designer
Hintergrund
Ein neues Dashboard-Design verwendet viele Grautöne, was modern aussieht, aber möglicherweise schwer lesbar ist.
Problem
Es muss schnell geprüft werden, ob die hellgrauen Texte auf weißem Grund den WCAG AA-Standard erfüllen.
Verwendung
Laden Sie den Dashboard-Screenshot hoch, setzen Sie die WCAG-Stufe auf 'AA' und aktivieren Sie 'Patch-Vorschläge zeigen'.
Beispielkonfiguration
wcagLevel: 'AA', showPatchSuggestions: true
Ergebnis
Eine Heatmap markiert alle hellgrauen Texte rot und schlägt dunklere Grautöne vor, die das 4.5:1 Verhältnis erreichen.

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

Frontend-Entwickler
Hintergrund
Ein HTML-Newsletter wurde mit Inline-CSS erstellt, aber einige Abonnenten beschweren sich über schlechte Lesbarkeit.
Problem
Identifizierung und Behebung von Kontrastproblemen direkt im HTML-Code nach den strengen AAA-Richtlinien.
Verwendung
Fügen Sie den HTML-Code in das Textfeld ein und wählen Sie 'AAA' als WCAG-Stufe.
Beispielkonfiguration
htmlInput: '<div style="color:#9ca3af;background-color:#ffffff">Low contrast text</div>', wcagLevel: 'AAA'
Ergebnis
Der Bericht listet die fehlerhaften Inline-Styles auf und liefert exakte Hex-Codes, um den Kontrast auf 7:1 zu erhöhen.

Mit Samples testen

html, image, png
Web Python Bildverarbeitung Beispiele
Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung
preferred input family image
image
Windows C++ Bildverarbeitung Beispiele
Windows C++ Bildverarbeitungsbeispiele einschließlich Bild-Laden/Speichern, Größenänderung und Formatkonvertierung mit Windows Imaging Component
preferred input family image
image
Web Rust Bildverarbeitungsbeispiele
Web Rust Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung
preferred input family image
image
Bildverarbeitung macOS Objective-C - Beispiele
macOS Objective-C Bildverarbeitungsbeispiele einschließlich Bild-Lesen/Schreiben, Bild-Skalierung und Formatkonvertierung
preferred input family image
image

Verwandte Hubs

Html-Convert-Tools
Entdecken Sie 13 html-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Image-Convert-Tools
Entdecken Sie 100 image-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Image-Tools
Entdecken Sie 40 image-Tools für utility-Workflows und vergleichen Sie ähnliche Utilities schnell.
Json-Convert-Tools
Entdecken Sie 100 json-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.

FAQ

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.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/accessibility-heatmap-generator

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
htmlInput textarea Nein -
designImage file (Upload erforderlich) Nein -
wcagLevel select Nein -
showPatchSuggestions checkbox Nein -

Dateitypparameter müssen erst über POST /upload/accessibility-heatmap-generator hochgeladen werden, um filePath zu erhalten, dann filePath an das entsprechende Dateifeld übergeben.

Antwortformat

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
Datei: Datei

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu: 

{
  "mcpServers": {
    "elysiatools-accessibility-heatmap-generator": {
      "name": "accessibility-heatmap-generator",
      "description": "Erzeugt eine kontrastfokussierte Accessibility-Heatmap aus Screenshot oder HTML und schlaegt Patch-Farben vor",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessibility-heatmap-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Unterstützt URL-Dateilinks oder Base64-Codierung für Dateiparameter.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]