Elysia Tools
导航
Design
计算 WCAG 对比度，模拟主要色觉缺陷，并可对 UI 截图中的低对比区域做标记。
详情
这个检查器既看对比度是否达标，也看同一组颜色在不同色觉条件下会不会变得难以辨认。
徽标含义：
为什么要区分：
字段说明：
怎么看结果：
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
色彩视觉无障碍检查器是一款专为设计师和开发者打造的实用工具。它不仅能精准计算前景色与背景色的 WCAG 对比度，还能模拟红色盲、绿色盲、蓝色盲及全色盲等多种色觉缺陷下的视觉效果。通过上传设计稿截图，工具会自动扫描并标记出不符合所选 WCAG 等级（AA 或 AAA）的低对比度区域，帮助您轻松打造对所有用户友好的无障碍界面。
背景
团队正在开发一个新的 SaaS 平台，需要确保主按钮（深灰色文字配白色背景）符合基本的无障碍标准。
问题
确认默认配色在正常视觉和色盲视觉下是否都能清晰阅读。
如何使用
在前景色输入 `#1f2937`，背景色输入 `#ffffff`，WCAG 等级选择 `AA`。
{"foreground": "#1f2937", "background": "#ffffff", "wcagLevel": "AA"}结果
结果显示正常视觉下对比度远超 4.5:1，且在红色盲、绿色盲等所有模拟卡片中均保持了极高的对比度，完美通过测试。
背景
设计师完成了一版包含复杂背景图和多层文本的营销落地页设计，担心部分文字融入了背景。
问题
快速找出设计稿中对比度不足、可能导致用户阅读困难的区域。
如何使用
上传落地页的 PNG 截图至“设计稿图片”字段，并将 WCAG 等级设定为更严格的 `AAA`。
{"designImage": "landing_page.png", "wcagLevel": "AAA"}结果
工具自动扫描整张图片，并在深色背景上使用了浅灰色字体的区域打上标记框，提示设计师修改该处字体颜色以满足 7:1 的对比度要求。
AA 是基本的无障碍标准，普通文本对比度需达到 4.5:1；AAA 是更严格的标准，普通文本需达到 7:1。大字号文本的阈值要求相对较低。
色盲用户对某些光谱的感知较弱或缺失，导致原本在正常视觉下对比鲜明的颜色在他们眼中可能变得非常接近，因此工具会重新计算模拟后的真实对比度。
支持上传 PNG、JPEG 和 WEBP 格式的图片，文件大小限制为 10MB。
Protanopia 指红色盲，Deuteranopia 指绿色盲，它们是最常见的红绿色觉障碍类型。工具会展示您的配色在这两种情况下的实际观感。
标记框标出了图片中局部对比度低于您所选 WCAG 阈值（AA 或 AAA）的区域，提示您这些地方的文本或图形可能难以看清。