# 色彩视觉无障碍检查器

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

> 标准页面: https://elysiatools.com/zh/tools/color-vision-accessibility-checker

- **分类:** Design

- **关键词:** 色盲, 无障碍, wcag, 对比度, 截图

## 概述

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

徽标含义：
- 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 阈值的区域。

## 输入项

- **前景色** (color)
- **背景色** (color)
- **设计稿图片** (file)
- **WCAG 等级** (select)

## 适用场景

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

## 工作原理

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

## 使用案例

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

## 常见问题

### WCAG AA 和 AAA 有什么区别？

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

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

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

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

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

### 什么是 Protanopia 和 Deuteranopia？

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

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

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

## 相关工具

- [无障碍合规检测器](https://elysiatools.com/zh/tools/accessibility-checker): 检测 HTML、网页或设计稿图片中的常见 WCAG 2.1 问题，并给出可直接修复的建议
- [图片配色提取器](https://elysiatools.com/zh/tools/image-color-palette-extractor): 上传图片后提取主色调，导出代码可用的色板片段，并检查对比度
- [VP8 图像分析器](https://elysiatools.com/zh/tools/vp8-image-analyzer): 使用 Sharp 分析 WebP/VP8 图像，生成灰度位移图，并用 Three.js 渲染可旋转的 3D 浮雕表面
- [无障碍热力图生成器](https://elysiatools.com/zh/tools/accessibility-heatmap-generator): 从 UI 截图或 HTML 输入生成聚焦对比度的无障碍热力图，并给出建议修补色值
- [图片颜色通道提取器](https://elysiatools.com/zh/tools/image-channel): 提取、操作和分析单个颜色通道（RGB、Alpha、亮度），提供专业处理选项
- [图片主要颜色提取器](https://elysiatools.com/zh/tools/image-color-extractor): 使用多种算法从图片中提取主要颜色，包括K-means聚类和直方图分析
- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
- [电影感调色](https://elysiatools.com/zh/tools/image-cinematic-color): 为图片应用专业电影调色效果。选择好莱坞大片、独立电影、复古胶片等流行电影风格，让照片呈现电影般的质感。

## 示例

- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换
- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Web Rust 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-rust): Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换

## 相关内容

- [CSS 效果、配色板与设计 Token 生成工具](https://elysiatools.com/zh/hubs/design-generate): 围绕CSS 视觉效果、配色构建与设计 Token 生成整理的一组工具。
- [网页无障碍审查与可读配色工具](https://elysiatools.com/zh/hubs/web-accessibility-audits): 在一个专题中检查 WCAG 问题、读屏顺序、低对比度区域、色觉缺陷风险和可读配色选择，适合网页与 UI 无障碍工作流。
- [图片格式转换与动画导出工具](https://elysiatools.com/zh/hubs/image-convert): 在一个专题里比较 JPG、PNG、GIF、AVIF、WebP、TIFF、ICO、base64 以及动画导出相关的图片格式转换工具。
- [图片整理、修饰与批处理准备工具](https://elysiatools.com/zh/hubs/image-utility): 把图片清理、裁边、补边、加框、批量缩放压缩、水印和视觉修饰工具集中到一个专题中，适合素材整理流程。