无障碍热力图生成器

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

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

示例结果

1 个示例

从低对比度仪表盘截图生成热力图

高亮可能不符合 AA/AAA 的区域，并附上建议修补色值。

accessibility-heatmap-example-report.html 查看文件

查看输入参数

{ "htmlInput": "", "designImage": "/public/samples/images/logo.png", "wcagLevel": "AA", "showPatchSuggestions": true }

HTML 输入

设计截图

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

WCAG 等级

显示修补建议

关键信息

分类: 设计与颜色
输入类型: textarea, file, select, checkbox
输出类型: file
样本覆盖: 4
支持 API: Yes

概览

无障碍热力图生成器是一款专为设计师和前端开发者打造的实用工具。通过上传 UI 设计截图或输入包含内联样式的 HTML 代码，该工具能够快速生成聚焦对比度的热力图，直观高亮出不符合 WCAG（Web 内容无障碍指南）标准的区域。无论是进行设计评审还是代码交付前的自查，它都能帮助您迅速定位低对比度文本，并自动提供符合 AA 或 AAA 级标准的修补色值建议，大幅提升产品的无障碍体验。

适用场景

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

工作原理

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

使用场景

UI 设计师在 Figma 或 Sketch 导出设计图后，上传截图检查文字与背景的对比度，确保设计符合无障碍规范。

前端工程师在编写包含复杂内联样式的邮件模板或落地页时，粘贴 HTML 代码以批量排查对比度缺陷。

无障碍测试专家在编写审计报告时，利用生成的热力图作为直观的视觉证据，向团队展示需要改进的低对比度区域。

用户案例

1. 仪表盘设计稿无障碍审查

UI 设计师

背景原因: 设计师完成了一套数据仪表盘的 UI 设计，其中使用了大量的浅灰色文字和低饱和度背景。
解决问题: 需要在设计交付前确认这些浅色文字是否满足基本的无障碍阅读标准。
如何使用: 上传仪表盘的 PNG 截图，选择 WCAG 等级为 AA，并勾选显示修补建议。
示例配置: WCAG 等级: AA 显示修补建议: 开启
效果: 工具输出了一份热力图报告，将对比度低于 4.5:1 的浅灰色文字区域用红色高亮，并给出了加深文字颜色的具体 HEX 色值建议。

2. 营销邮件模板对比度检测

前端开发

背景原因: 开发人员正在制作一封营销 EDM 邮件，邮件中包含大量带有内联样式的 HTML 标签。
解决问题: 邮件客户端对外部 CSS 支持有限，必须确保内联样式中的文字颜色在不同背景下清晰可读。
如何使用: 将邮件的 HTML 代码粘贴到 HTML 输入框中，选择更严格的 AAA 级标准进行检测。
示例配置: WCAG 等级: AAA 显示修补建议: 开启
效果: 工具解析了 HTML 代码，找出了几处低对比度组合，并建议将前景色修改为更深的色值以满足 7:1 的对比度要求。

用 Samples 测试

html, image, png

Web Python 图像处理示例

Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换

preferred input family image

Windows C++ 图像处理示例

Windows C++ 图像处理示例，包括读取/保存图像、调整大小和使用Windows Imaging Component进行格式转换

preferred input family image

Web Rust 图像处理示例

Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换

preferred input family image

macOS Objective-C 图像处理示例

macOS Objective-C 图像处理示例，包括图像读取保存、图像缩放和格式转换

preferred input family image

相关专题

HtmlConvert工具专题

探索 13 个围绕 html 的 convert 工作流工具，快速找到相近能力。

ImageConvert工具专题

探索 100 个围绕 image 的 convert 工作流工具，快速找到相近能力。

Image 工具专题

探索 40 个围绕 image 的 utility 工作流工具，快速找到相近能力。

JsonConvert工具专题

探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。

常见问题

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

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

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

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

HTML 输入模式如何工作？

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

修补建议是如何生成的？

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

生成的结果是什么格式？

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

API 文档

请求端点

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

请求参数

参数名	类型	必填	描述
htmlInput	textarea	否	-
designImage	file (需要先上传)	否	-
wcagLevel	select	否	-
showPatchSuggestions	checkbox	否	-

文件类型参数需要先通过 POST /upload/accessibility-heatmap-generator 上传获取 filePath，然后将 filePath 传递给对应的文件字段。

响应格式

{
  "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)"
}

文件: 文件

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中：

{
  "mcpServers": {
    "elysiatools-accessibility-heatmap-generator": {
      "name": "accessibility-heatmap-generator",
      "description": "从 UI 截图或 HTML 输入生成聚焦对比度的无障碍热力图，并给出建议修补色值",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessibility-heatmap-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

支持 URL 文件链接或 Base64 编码作为文件参数。

如果遇见问题，请联系我们：[email protected]