色彩视觉无障碍检查器

计算 WCAG 对比度，模拟主要色觉缺陷，并可对 UI 截图中的低对比区域做标记。

这个检查器既看对比度是否达标，也看同一组颜色在不同色觉条件下会不会变得难以辨认。

徽标含义：

  • AA normal：这组颜色是否满足 WCAG AA 的普通文本标准，阈值是 4.5:1。
  • AAA normal：这组颜色是否满足 WCAG AAA 的普通文本标准，阈值是 7:1。

为什么要区分：

  • 这里的 normal 指正文、小标签、绝大多数常规 UI 文本。
  • 大字号文本的阈值更低：AA large 是 3:1，AAA large 是 4.5:1。
  • 所以一组颜色可能不满足 AAA normal，但对大标题或粗体大字仍然是可接受的。

字段说明：

  • 前景色：放在上层的文字、图标或主视觉颜色
  • 背景色：承载这些内容的底色
  • 设计稿图片：可选，用于分析截图中哪些区域局部对比不足
  • WCAG 等级：决定截图分析时用哪条阈值线去标记风险区域

怎么看结果：

  • Normal / Protanopia / Deuteranopia / Tritanopia / Achromatopsia 卡片展示了不同色觉模拟下的颜色效果。
  • 每种模拟都会重新计算对比度，因此你可以看到“正常视觉下没问题”的配色是否会在色盲场景中变差。
  • 截图分析会标出低于所选 WCAG 阈值的区域。

示例结果

1 个示例

检查按钮配色的色觉无障碍表现

在敲定 UI 主题前，对前景和背景颜色做 WCAG 与色觉模拟对比。

Color vision accessibility report
查看输入参数
{ "foreground": "#1f2937", "background": "#ffffff", "wcagLevel": "AA" }

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/webp

关键信息

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

概览

色彩视觉无障碍检查器是一款专为设计师和开发者打造的实用工具。它不仅能精准计算前景色与背景色的 WCAG 对比度，还能模拟红色盲、绿色盲、蓝色盲及全色盲等多种色觉缺陷下的视觉效果。通过上传设计稿截图，工具会自动扫描并标记出不符合所选 WCAG 等级（AA 或 AAA）的低对比度区域，帮助您轻松打造对所有用户友好的无障碍界面。

适用场景

  • •在确定品牌主色调或 UI 组件配色时，验证其是否满足 WCAG 无障碍对比度标准。
  • •需要评估现有设计稿在不同色盲（如红绿色盲）用户眼中的可辨识度时。
  • •审查复杂页面截图，快速定位并排查局部对比度不足的文本或图标区域。

工作原理

  • •输入前景色（如文本或图标颜色）与背景色，工具会实时计算正常视觉下的 WCAG 对比度并评定 AA/AAA 等级。
  • •算法会模拟 Protanopia（红色盲）、Deuteranopia（绿色盲）等多种色觉缺陷，并重新计算模拟后的对比度。
  • •如果上传了设计稿图片并选择了 WCAG 等级，工具会将图片切片并分析局部对比度，用醒目的标记框出不达标的区域。

使用场景

UI/UX 设计师在 Figma 或 Sketch 导出设计稿后，上传截图进行全局无障碍对比度审查。
前端开发者在实现按钮或警告提示框时，输入具体的 HEX 颜色值，确保文本在背景上清晰可见。
产品经理在进行产品无障碍（A11y）合规性测试时，生成包含多种色盲模拟结果的对比度报告。

用户案例

1. 检查主按钮配色的无障碍合规性

前端开发者
背景原因
团队正在开发一个新的 SaaS 平台，需要确保主按钮（深灰色文字配白色背景）符合基本的无障碍标准。
解决问题
确认默认配色在正常视觉和色盲视觉下是否都能清晰阅读。
如何使用
在前景色输入 `#1f2937`，背景色输入 `#ffffff`，WCAG 等级选择 `AA`。
示例配置
{"foreground": "#1f2937", "background": "#ffffff", "wcagLevel": "AA"}
效果
结果显示正常视觉下对比度远超 4.5:1，且在红色盲、绿色盲等所有模拟卡片中均保持了极高的对比度，完美通过测试。

2. 扫描落地页截图中的低对比度风险

UI 设计师
背景原因
设计师完成了一版包含复杂背景图和多层文本的营销落地页设计，担心部分文字融入了背景。
解决问题
快速找出设计稿中对比度不足、可能导致用户阅读困难的区域。
如何使用
上传落地页的 PNG 截图至“设计稿图片”字段，并将 WCAG 等级设定为更严格的 `AAA`。
示例配置
{"designImage": "landing_page.png", "wcagLevel": "AAA"}
效果
工具自动扫描整张图片，并在深色背景上使用了浅灰色字体的区域打上标记框，提示设计师修改该处字体颜色以满足 7:1 的对比度要求。

用 Samples 测试

image, png, jpg
Windows C++ 图像处理示例
Windows C++ 图像处理示例，包括读取/保存图像、调整大小和使用Windows Imaging Component进行格式转换
preferred input family image
image
Web Rust 图像处理示例
Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换
preferred input family image
image
macOS Objective-C 图像处理示例
macOS Objective-C 图像处理示例，包括图像读取保存、图像缩放和格式转换
preferred input family image
image
Web Python 图像处理示例
Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
preferred input family image
image

相关专题

ImageConvert工具专题
探索 100 个围绕 image 的 convert 工作流工具，快速找到相近能力。
Image 工具专题
探索 40 个围绕 image 的 utility 工作流工具，快速找到相近能力。
ValidationValidate工具专题
探索 16 个围绕 validation 的 validate 工作流工具，快速找到相近能力。

常见问题

WCAG AA 和 AAA 有什么区别？

AA 是基本的无障碍标准，普通文本对比度需达到 4.5:1；AAA 是更严格的标准，普通文本需达到 7:1。大字号文本的阈值要求相对较低。

为什么在色盲模拟下对比度会发生变化？

色盲用户对某些光谱的感知较弱或缺失，导致原本在正常视觉下对比鲜明的颜色在他们眼中可能变得非常接近，因此工具会重新计算模拟后的真实对比度。

设计稿图片支持哪些格式？

支持上传 PNG、JPEG 和 WEBP 格式的图片，文件大小限制为 10MB。

什么是 Protanopia 和 Deuteranopia？

Protanopia 指红色盲，Deuteranopia 指绿色盲，它们是最常见的红绿色觉障碍类型。工具会展示您的配色在这两种情况下的实际观感。

截图分析中的标记框代表什么？

标记框标出了图片中局部对比度低于您所选 WCAG 阈值（AA 或 AAA）的区域，提示您这些地方的文本或图形可能难以看清。

API 文档

请求端点

POST /zh/api/tools/color-vision-accessibility-checker

请求参数

参数名 类型 必填 描述
foreground color 是 -
background color 是 -
designImage file (需要先上传) 否 -
wcagLevel select 否 -

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

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

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

{
  "mcpServers": {
    "elysiatools-color-vision-accessibility-checker": {
      "name": "color-vision-accessibility-checker",
      "description": "计算 WCAG 对比度，模拟主要色觉缺陷，并可对 UI 截图中的低对比区域做标记。",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-vision-accessibility-checker",
      "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]