# 无障碍热力图生成器

从 UI 截图或 HTML 输入生成聚焦对比度的无障碍热力图，并给出建议修补色值

> 标准页面: https://elysiatools.com/zh/tools/accessibility-heatmap-generator

- **分类:** Design

- **关键词:** 无障碍, 热力图, wcag, 对比度, 截图

## 概述

上传 UI 截图或粘贴含内联颜色的 HTML，工具会生成热力图，高亮可能不符合 WCAG 对比度阈值的区域。截图模式会做局部色块采样并叠加红色热区，HTML 模式会检查前景/背景组合并输出建议色值。

## 输入项

- **HTML 输入** (textarea): Low contrast text
- **设计截图** (file)
- **WCAG 等级** (select)
- **显示修补建议** (checkbox)

## 适用场景

- 在设计评审阶段，需要快速验证 UI 稿件的色彩对比度是否满足无障碍标准时。
- 前端开发人员在交付页面前，希望通过 HTML 代码排查内联样式的对比度问题时。
- 产品经理或测试人员对现有网页或 App 进行无障碍合规性抽查与评估时。

## 工作原理

- 选择输入方式：上传 UI 设计截图（支持 PNG、JPG、WEBP）或直接粘贴包含内联颜色样式的 HTML 代码。
- 配置检测标准：在设置中选择目标 WCAG 等级（AA 级对比度阈值为 4.5:1，AAA 级为 7:1），并勾选是否需要显示修补建议。
- 生成热力图分析：工具会对截图进行局部色块采样并叠加红色热区，或解析 HTML 中的前景与背景色组合。
- 获取优化建议：输出一份包含热力图高亮和建议修补色值的报告文件，帮助您快速修复低对比度问题。

## 使用案例

- UI 设计师在 Figma 或 Sketch 导出设计图后，上传截图检查文字与背景的对比度，确保设计符合无障碍规范。
- 前端工程师在编写包含复杂内联样式的邮件模板或落地页时，粘贴 HTML 代码以批量排查对比度缺陷。
- 无障碍测试专家在编写审计报告时，利用生成的热力图作为直观的视觉证据，向团队展示需要改进的低对比度区域。

## 常见问题

### 支持哪些格式的图片上传？

工具支持上传 PNG、JPEG 和 WEBP 格式的 UI 设计截图，单张图片文件大小限制为 15MB。

### WCAG 的 AA 和 AAA 级别有什么区别？

AA 级是基本的无障碍标准，要求普通文本对比度至少为 4.5:1；AAA 级是更严格的标准，要求普通文本对比度至少达到 7:1。

### HTML 输入模式如何工作？

工具会解析您粘贴的 HTML 代码，提取带有内联样式（如 color 和 background-color）的元素，计算其对比度并标记不达标的组合。

### 修补建议是如何生成的？

当检测到对比度不足的区域或代码时，工具会基于原有的背景色，计算并推荐一个视觉上最接近但满足所选 WCAG 阈值的前景色。

### 生成的结果是什么格式？

工具会生成并导出一个 HTML 格式的分析报告文件，包含直观的热力图叠加效果以及具体的颜色修改建议。

## 相关工具

- [PDF发票生成器](https://elysiatools.com/zh/tools/pdf-invoice-generator): 使用结构化明细生成带品牌的发票PDF
- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [深度图生成器](https://elysiatools.com/zh/tools/image-depth-map): 从图像生成深度图，使用亮度、饱和度和边缘分析。生成灰度深度图，较亮像素表示较近物体，较暗像素表示较远物体。
- [视差动画生成器](https://elysiatools.com/zh/tools/image-parallax): 从图像生成视差动画。创建基于深度的动画，不同层以不同速度移动，产生3D效果。
- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
- [红青3D立体图生成器](https://elysiatools.com/zh/tools/image-anaglyph): 从普通照片生成红青3D立体图。创建可使用红青3D眼镜观看的立体3D图像。
- [照片马赛克生成器](https://elysiatools.com/zh/tools/image-mosaic-generator): 用数百张小图片组合成一张大图，创造令人惊叹的照片马赛克效果。每张拼图都经过精心挑选以匹配底层图像的颜色。
- [SVG Favicon 生成器](https://elysiatools.com/zh/tools/svg-favicon-generator): 将 SVG 或位图 Logo 生成完整的 favicon 套件，包括 ICO、多个 PNG 尺寸、Apple Touch Icon 和 site.webmanifest

## 示例

- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换
- [Web Rust 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-rust): Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换

## 相关内容

- [网页发布前无障碍审查](https://elysiatools.com/zh/hubs/web-accessibility-audits): 检查网页或 UI 组件的结构、阅读顺序、截图对比度和色觉风险，并把自动发现整理成由人工复核的发布记录。