Elysia Tools
导航
Validation
检测 HTML、网页或设计稿图片中的常见 WCAG 2.1 问题，并给出可直接修复的建议
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
无障碍合规检测器是一款专为开发者和设计师打造的实用工具，支持快速检测 HTML 代码片段、网页 URL 或设计稿图片中的常见 WCAG 2.1 无障碍问题。通过自动扫描缺失的 alt 标签、空按钮、表单控件缺陷以及色彩对比度风险，该工具能生成直观的检测报告，并提供可直接落地的修复建议，帮助您轻松满足 WCAG AA 或 AAA 级合规要求，提升产品的普适性与用户体验。
背景
开发者正在编写一个新的产品落地页，其中包含多个图标按钮和自定义表单输入框。
问题
担心图标按钮对屏幕阅读器不可见，且表单缺少关联的 label 标签，可能导致无障碍测试不通过。
如何使用
将落地页的 HTML 片段粘贴到“HTML 输入”框中，并将“WCAG 等级”设置为“AA”。
{
"htmlInput": "<img src=\"/hero.png\"><a href=\"/pricing\"><svg></svg></a><button><svg></svg></button><input type=\"email\" />",
"wcagLevel": "AA"
}结果
生成一份 HTML 报告，精准指出图片缺失 alt 属性、链接和按钮缺少可访问名称，以及输入框缺少 label，并提供修复代码示例。
背景
设计师完成了一套包含浅色背景和灰色文本的登录界面设计稿，准备交付给开发团队。
问题
需要确认浅灰色文本在白色背景上是否满足严格的无障碍对比度要求。
如何使用
上传登录界面的设计稿图片，并在“WCAG 等级”中选择“AAA”。
{
"designImage": "/public/samples/images/logo.png",
"wcagLevel": "AAA"
}结果
报告显示调色板级别的对比度警告，指出浅灰文本与背景的对比度低于 7:1，提示设计师加深文本颜色以满足 AAA 级标准。
支持直接粘贴 HTML 代码片段、输入公开的网页 URL，或上传 PNG、JPEG、WEBP、SVG 格式的设计稿图片进行检测。
AA 是大多数网站的通用无障碍合规标准，而 AAA 是最高标准，对色彩对比度、文本大小和多媒体替代内容有更严格的要求。
工具会对上传的设计稿图片进行调色板级别的启发式分析，提取主要颜色并计算对比度，从而发现潜在的低对比度文本或图形风险。
工具目前主要提供检测报告和具体的修复建议（如提示补充特定的 aria 属性或 alt 文本），需要您根据建议手动调整代码。
有的，上传的图片文件大小不能超过 20MB。