Elysia Tools
导航
Design
从 UI 截图或 HTML 输入生成聚焦对比度的无障碍热力图，并给出建议修补色值
详情
上传 UI 截图或粘贴含内联颜色的 HTML，工具会生成热力图，高亮可能不符合 WCAG 对比度阈值的区域。截图模式会做局部色块采样并叠加红色热区，HTML 模式会检查前景/背景组合并输出建议色值。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
无障碍热力图生成器是一款专为设计师和前端开发者打造的实用工具。通过上传 UI 设计截图或输入包含内联样式的 HTML 代码，该工具能够快速生成聚焦对比度的热力图，直观高亮出不符合 WCAG（Web 内容无障碍指南）标准的区域。无论是进行设计评审还是代码交付前的自查，它都能帮助您迅速定位低对比度文本，并自动提供符合 AA 或 AAA 级标准的修补色值建议，大幅提升产品的无障碍体验。
背景
设计师完成了一套数据仪表盘的 UI 设计，其中使用了大量的浅灰色文字和低饱和度背景。
问题
需要在设计交付前确认这些浅色文字是否满足基本的无障碍阅读标准。
如何使用
上传仪表盘的 PNG 截图，选择 WCAG 等级为 AA，并勾选显示修补建议。
WCAG 等级: AA
显示修补建议: 开启结果
工具输出了一份热力图报告，将对比度低于 4.5:1 的浅灰色文字区域用红色高亮，并给出了加深文字颜色的具体 HEX 色值建议。
背景
开发人员正在制作一封营销 EDM 邮件，邮件中包含大量带有内联样式的 HTML 标签。
问题
邮件客户端对外部 CSS 支持有限，必须确保内联样式中的文字颜色在不同背景下清晰可读。
如何使用
将邮件的 HTML 代码粘贴到 HTML 输入框中，选择更严格的 AAA 级标准进行检测。
WCAG 等级: AAA
显示修补建议: 开启结果
工具解析了 HTML 代码，找出了几处低对比度组合，并建议将前景色修改为更深的色值以满足 7:1 的对比度要求。
工具支持上传 PNG、JPEG 和 WEBP 格式的 UI 设计截图，单张图片文件大小限制为 15MB。
AA 级是基本的无障碍标准，要求普通文本对比度至少为 4.5:1；AAA 级是更严格的标准，要求普通文本对比度至少达到 7:1。
工具会解析您粘贴的 HTML 代码，提取带有内联样式（如 color 和 background-color）的元素，计算其对比度并标记不达标的组合。
当检测到对比度不足的区域或代码时，工具会基于原有的背景色，计算并推荐一个视觉上最接近但满足所选 WCAG 阈值的前景色。
工具会生成并导出一个 HTML 格式的分析报告文件，包含直观的热力图叠加效果以及具体的颜色修改建议。