什么是色盲模拟器?

色盲模拟器帮助您了解图像和颜色在色觉缺陷 (CVD) 人群中的显示效果。约 8% 的男性和 0.5% 的女性患有某种形式的色盲,因此设计师测试作品的无障碍访问性至关重要。

无障碍访问很重要:全球约每 12 名男性中有 1 人、每 200 名女性中有 1 人存在某种形式的色觉缺陷。测试您的设计可确保每个人都能有效访问您的内容。

为什么使用此工具?

在设计网站、应用或图形时,对您来说看起来截然不同的颜色,对色盲人士可能看起来完全相同。此工具可让您:

提前测试设计

在发布前发现无障碍访问问题,避免代价高昂的重新设计。

比较 CVD 类型

同时查看不同色觉缺陷如何影响感知效果。

检查调色板

测试单个颜色,确保您的调色板对所有人都友好。

支持的色盲类型

Deuteranopia 最常见

绿色盲,影响约 6% 的男性。这是最常见的色觉缺陷形式。

Protanopia

红色盲,影响约 1% 的男性。难以区分红色和绿色以及深色。

Tritanopia 罕见

蓝色盲,影响不到 0.1% 的人群。难以区分蓝色和黄色。

Achromatopsia 极其罕见

全色盲,世界呈现为灰度。极其罕见的病症。

您的数据保持私密

所有处理均在您的浏览器中进行,提供完整的隐私保护:

无需上传 - 图像不会离开您的设备
无跟踪 - 我们不收集或存储您的图像
即时结果 - 无服务器处理延迟
离线工作 - 加载后无需互联网连接

100% 客户端处理:您的图像完全在浏览器中使用 JavaScript 和 Canvas API 处理。零数据传输意味着完全的隐私和安全。

如何使用色盲模拟器

测试图像的无障碍访问性

测试您的图像在色觉缺陷人群中的显示效果:

上传图像

点击上传区域、拖放或从剪贴板粘贴 (Ctrl+V)。您也可以使用摄像头直接拍照。

选择 CVD 类型

从 Deuteranopia、Protanopia、Tritanopia 或 Achromatopsia 中选择,模拟特定的色觉缺陷。

比较结果

拖动滑块并排比较原始视图与模拟视图。这有助于识别有问题的颜色组合。

查看所有类型

点击"全部"以网格布局同时查看您的图像在所有 CVD 类型下的效果。

下载结果

保存模拟图像用于文档记录、与团队成员共享或无障碍访问报告。

测试单个颜色

测试单个颜色在所有 CVD 类型下的无障碍访问性:

切换到颜色选项卡

点击界面顶部的"颜色"按钮以访问颜色测试模式。

输入颜色

使用颜色选择器进行可视化选择,或直接输入 HEX 代码(例如 #FF5733)。

查看结果

即时查看您的颜色在所有 CVD 类型下的显示效果。比较不同缺陷如何影响同一颜色。

获得最佳效果的快速提示

尝试示例图像

使用内置的彩色示例了解不同颜色如何受各种 CVD 类型影响。

使用摄像头测试

直接拍照测试现实场景,如印刷材料或实体产品。

重点关注 Deuteranopia

这是最常见的类型,影响约 6% 的男性。从这里开始可获得最大的无障碍访问影响。

专业提示:测试设计时,特别注意关键 UI 元素,如按钮、链接和状态指示器。这些元素在所有 CVD 类型下都应保持可区分。

功能特性

多种输入方式

灵活的图像加载选项用于测试:

文件上传

点击浏览或直接将图像拖放到界面中。

支持 JPEG、PNG、GIF、WebP
保留 PNG 的透明度

剪贴板粘贴

按 Ctrl+V 即时粘贴截图或复制的图像。

快速截图测试
无需保存文件

摄像头拍摄

直接从相机拍照进行现实测试。

测试实体材料
捕捉印刷设计

示例图像

内置彩色示例,用于快速测试和学习。

即时演示
无需上传

四种 CVD 类型

全面模拟涵盖所有主要色觉缺陷:

Deuteranopia (绿色盲) 约6%

Protanopia (红色盲) 约1%

Tritanopia (蓝色盲) <0.1%

Achromatopsia (全色盲) 极其罕见

比较工具

强大的可视化选项用于分析无障碍访问性:

滑块比较 - 拖动以并排显示原始与模拟效果,进行精确比较
全部类型网格 - 一次性查看所有 CVD 模拟,快速比较不同缺陷类型
颜色模式 - 测试单个 HEX 颜色在所有 CVD 类型下的效果,验证您的调色板

导出选项

保存和分享您的无障碍访问测试结果:

下载模拟图像 - 保存为 PNG,文件名自动包含 CVD 类型
即时处理 - 无需等待服务器响应,立即获得结果
高质量输出 - 保持原始图像质量和分辨率

隐私优先

您的数据安全是我们的首要任务:

传统工具

基于服务器的处理

图像上传到服务器
可能收集数据
需要互联网连接
处理延迟

我们的模拟器

客户端处理

100% 基于浏览器的处理
零数据收集
加载后可离线工作
即时结果

客户端图像处理确保完全隐私。您的图像不会离开您的设备,使此工具可安全用于测试机密设计和未发布产品。
— Web 无障碍访问最佳实践

常见问题

什么是色盲?

色盲,或称色觉缺陷 (CVD),是一种难以区分某些颜色的病症。最常见的类型影响红绿感知,而较罕见的形式影响蓝黄感知或导致全色盲。

关键事实:

全球约影响 8% 的男性和 0.5% 的女性
通常通过 X 染色体遗传
红绿缺陷最常见(Deuteranopia 和 Protanopia)
也可能因衰老、药物或眼部疾病而获得

此模拟器的准确度如何?

此模拟器使用 Brettel-Viénot 算法,这是一种经过科学验证的色觉缺陷模拟方法。虽然没有模拟能完美复制 CVD 患者的视觉效果,但它为无障碍访问测试提供了可靠的近似值。

科学依据:Brettel-Viénot 算法基于人类色觉的生理模型,并已通过色觉缺陷患者的研究得到验证。

我应该测试哪种 CVD 类型?

从 Deuteranopia(绿色盲)开始,因为它是最常见的类型,影响约 6% 的男性。如果您的设计通过此测试,还应检查 Protanopia 和 Tritanopia 以获得全面覆盖。

推荐的测试优先级:

优先级 1 Deuteranopia - 最常见,影响约 6% 的男性
优先级 2 Protanopia - 第二常见,影响约 1% 的男性
优先级 3 Tritanopia - 罕见但对全面测试很重要
可选 Achromatopsia - 极其罕见,如果服务于关键应用则测试

我的图像会上传到服务器吗?

不会。所有图像处理完全在您的浏览器中使用 JavaScript 和 Canvas API 进行。您的图像不会离开您的设备,确保完全隐私。

隐私保证:此工具 100% 在客户端运行。不会发生数据传输,因此可安全用于测试机密设计、未发布产品或敏感材料。

支持哪些图像格式?

模拟器支持所有常见图像格式,包括:

JPEG/JPG - 标准照片格式
PNG - 支持透明度(保留 Alpha 通道)
GIF - 动画和静态图像
WebP - 现代网络格式

完全支持带透明度的 PNG 图像 - 模拟期间保留 Alpha 通道。

为什么有些颜色在模拟后看起来相同?

这正是模拟器旨在展示的效果。当两种颜色在模拟视图中看起来相同时,意味着患有该类型色盲的人无法区分它们。

设计建议:当颜色变得无法区分时,考虑使用不同的颜色或添加其他视觉提示,如图案、纹理、标签或图标来传达信息。

常见的有问题组合:

红色和绿色(Deuteranopia/Protanopia)
蓝色和紫色(Deuteranopia)
蓝色和绿色(Tritanopia)
粉色和灰色(Protanopia)

我可以使用此工具进行 WCAG 合规性测试吗?

此工具有助于识别潜在的颜色无障碍访问问题,但 WCAG 合规性还需要满足特定的对比度比率。将此模拟器与对比度检查器结合使用,进行全面的无障碍访问测试。

WCAG 要求包括:

对比度比率 - 普通文本最低 4.5:1,大文本 3:1(AA 级)
颜色独立性 - 信息不应仅依赖颜色
焦点指示器 - 具有足够对比度的可见键盘焦点

最佳实践:将此 CVD 模拟器与对比度比率检查器和人工测试相结合,以确保完全符合 WCAG 2.1 AA 级或 AAA 级。

最大图像尺寸是多少?

大于 2000 像素的图像会自动调整大小以确保流畅性能。调整大小期间保留宽高比。

技术细节:

最大尺寸:2000px(宽度或高度)
宽高比:始终保留
质量:高质量调整大小算法
性能:优化以实现即时处理

此限制确保模拟器保持快速响应,同时保持足够的细节用于无障碍访问测试。