What image formats are supported?

You can upload PNG, JPG, or WEBP images up to 15MB for screenshot analysis.

What is the difference between WCAG AA and AAA?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text, while AAA is stricter and requires a 7:1 ratio.

How does the tool analyze HTML?

It inspects inline style attributes for foreground and background color pairs, calculates their contrast ratio, and flags those that fail the selected WCAG level.

What are patch suggestions?

If enabled, the tool calculates and recommends a new foreground color that is visually similar but dark or light enough to pass the contrast threshold.

Can it analyze an entire live website?

No, the tool is designed for specific UI screenshots or raw HTML snippets to provide focused, component-level triage.

Elysia Tools

Navigation

Design

Accessibility Heatmap Generator

Generate a contrast-focused accessibility heatmap from a UI screenshot or HTML input and suggest stronger patch colors

Details

What this tool helps you do

Upload a UI screenshot or paste HTML with inline colors, then generate a heatmap that highlights regions likely to fail WCAG contrast thresholds. The tool is designed for quick visual triage before design review or implementation handoff.

How it works:

For screenshots, it samples local color tiles, estimates contrast hotspots, and renders a red overlay heatmap.
For HTML, it inspects inline foreground/background pairs and returns low-contrast findings plus suggested patch colors.
WCAG Level controls the threshold: AA uses 4.5:1 and AAA uses 7:1 for normal text.
Show Patch Suggestions adds recommended foreground color values to help lift contrast faster.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Prepared example runs

Click an example to fill the form automatically. File inputs still need an upload.

1 examples

Generate a heatmap from a low-contrast dashboard screenshot

Highlight UI regions likely to fail AA/AAA and attach suggested patch colors for faster design iteration.

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

Inputs

Set the required fields, then run the tool.

4 options

FilesUpload source files for this workflow.1

Design ImagefileOptional

Single file max size: 15 MBSupported types: image/png, image/jpeg, image/webp, .png, .jpg, .jpeg, .webp

ContentPaste or type the main input values.1

HTML InputtextareaOptional

SettingsAdjust formats, ranges, numbers, and modes.1

WCAG LevelselectOptional

TogglesEnable or disable optional behavior.1

Show Patch SuggestionscheckboxOptionalEnabled when checked

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Accessibility Heatmap Generator

What this tool helps you do

Run this tool

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Prepared example runs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Auditing a Dashboard Mockup

2. Fixing Inline HTML Component Colors

FAQ

Web Image Processing Python Samples

Android Image Processing Java Samples

Android Image Processing Kotlin Samples

Web Image Processing Rust Samples

PDF Invoice Generator

Data URI Generator

Depth Map Generator

Parallax Animation Generator

Web Accessibility Audit and Accessible Color Tools

Image Format Conversion and Animated Export Tools

HTML Extraction, Cleanup, and Markdown/PDF Export Tools

Image Cleanup, Framing, and Batch Prep Tools