色盲，又称色觉异常，是"一种影响区分特定色调能力的色觉异常，最常见的是红色和绿色的混淆"（来源：INSERM，法国国家健康与医学研究院）。这种状况影响约8%的男性和0.5%的女性（欧洲血统人群），即全球约3亿人。
但将对比度问题简单归结为色盲是错误的。对比度不足影响每个人：在阳光下看手机的人、一天结束后疲惫的用户、视力逐渐下降的老年人，甚至在完美校准的屏幕上测试网站的开发者——他们没有意识到90%的用户并没有相同的屏幕。
对比度不是功能问题。你的按钮能用，你的链接可点击，你的表单能提交数据。但如果没人能读懂文字或区分按钮和背景，功能就毫无意义。这是一个视觉问题，需要用视觉工具来解决。
目录
- 色盲对网站感知的实际影响
- WCAG对比度标准：你需要知道的数字
- 为什么传统工具不够用
- 带色盲模拟的视觉测试
- 如何将对比度验证集成到你的工作流程中
- 常见问题
色盲对网站感知的实际影响
色盲在大多数情况下并不是完全丧失色觉。存在多种类型，每种对感知的影响不同。
绿色弱（Deuteranomaly） 是最常见的形式。它影响约6%的男性，降低对绿色的敏感度。绿色和红色混淆，橙色和黄色变得难以区分。这是大多数设计师模糊了解的类型，但并不总能衡量其实际后果。
红色弱（Protanomaly）（约1%的男性）降低对红色的敏感度。红色看起来更暗，与棕色和深绿色混淆。深色背景上的红色错误消息对这些用户来说可能完全消失。
蓝色弱（Tritanomaly）（不到0.01%的人口）影响对蓝色和黄色的感知。罕见但存在。
全色盲（Achromatopsia）（灰度视觉）极为罕见，但代表了只有亮度对比度重要的极端情况。
对于网站，后果是具体而多样的。
仅使用红色和绿色（成功/错误）的状态指示器对绿色盲用户来说无法使用。没有下划线的彩色链接如果颜色与周围文本混淆可能不可见。对正常视力来说背景色对比度足够的操作按钮在绿色弱条件下可能变得不可读。
这些问题不是边缘案例。8%的男性受到影响，在一个25人的开发团队中，统计上有1到2人是色盲。在你10万用户的基础中，约有4000名男性看到的网站与你设计的不同。
WCAG对比度标准：你需要知道的数字
WCAG定义了文本与背景之间的最小对比度比率。这些比率根据两种颜色的相对亮度计算，范围从1:1（无对比度）到21:1（最大对比度，黑色在白色上）。
对于AA级别——法规最常要求的级别：
普通文本（小于18磅或小于14磅粗体）的对比度比率必须至少为 4.5:1。大文本（18磅及以上，或14磅粗体及以上）需要至少 3:1 的比率。非文本界面元素（图标、字段边框、状态指示器）也必须达到 3:1 的比率（标准1.4.11）。
对于AAA级别，要求更严格：普通文本 7:1，大文本 4.5:1。
这些数字并非随意设定。它们源自视觉感知研究，并考虑了与年龄相关的对比度敏感度下降。一位80岁的老人需要大约三倍于20岁年轻人的对比度才能在相同条件下阅读相同的文本。
问题在于这些比率是基于正常色觉计算的。深红色文本与深绿色背景之间4.5:1的对比度在技术上符合WCAG标准，但对于无法区分这两种颜色的绿色盲用户来说可能不够。WCAG在标准1.4.1（颜色的使用）中也承认了这一点：信息不应仅依赖颜色来传达。
这就是为什么仅检查对比度比率是不够的。还需要验证不同类型色盲所感知的对比度。
为什么传统工具不够用
最常用的对比度分析工具（Chrome DevTools内置的对比度检查器、WAVE或axe DevTools等扩展、Lighthouse审计）在其功能范围内表现出色：计算两种特定颜色之间的对比度比率。
但它们有几个局限性。
它们检查声明的对比度，而非渲染的对比度。 如果背景图片、渐变或透明效果降低了实际对比度，这些工具可能无法检测到。浅蓝到深蓝渐变背景上的白色文本可能在区域顶部有足够的对比度，但在底部不足。工具只测量一对颜色，而非渲染的实际情况。
它们不能在自动化测试环境中模拟色盲。 Chrome DevTools允许手动模拟色盲，但这种检查无法在CI/CD流水线中自动化。你可以为一个页面模拟绿色弱，但不能在每次部署时为200个页面模拟。
它们不检测回归。 Lighthouse审计给你一个时间点的分数。当开发者修改了降低对比度的背景颜色时，它不会发出警报。你只有在下次审计时才会发现——如果有人记得运行它的话。
它们单独分析元素，而非整体渲染。 元素的对比度取决于其视觉上下文。中灰色文本在白色背景上可能完全可读，但如果在布局修改后将彩色面板放在其后面，它可能变得不可读。DOM分析工具无法捕捉这些视觉交互。
带色盲模拟的视觉测试
自动化视觉测试提供了一种根本不同的方法。它不分析CSS代码，而是捕获页面在浏览器中的实际渲染效果，然后将该渲染与参考进行比较以检测任何变化。
应用于对比度和色盲时，这种机制提供了强大的能力。
捕获实际渲染。 视觉测试截取浏览器实际显示的内容。渐变、背景图片、透明度、阴影——所有内容都被考虑在内。测量的对比度是真实的对比度，而非从CSS计算的理论对比度。
集成的色盲模拟。 通过对捕获的截图应用色盲模拟滤镜（绿色盲、红色盲和蓝色盲的色度转换矩阵），视觉测试可以验证每种色觉类型的对比度是否仍然足够。一次性的手动测试变成了系统化的自动测试。
回归检测。 如果开发者更改了颜色、背景或渐变，视觉测试会检测到差异。如果这个差异显著（超过配置的容差阈值），测试失败并阻止部署。对比度回归在到达生产环境之前就被捕获。
跨浏览器验证。 浏览器渲染颜色的方式不同。字体渲染、抗锯齿和颜色配置文件管理的差异可能影响感知的对比度。跨浏览器视觉测试捕获这些差异，确保在所有目标浏览器中有足够的对比度。
全面覆盖。 与仅检查几个代表性页面的手动审计不同，自动化视觉测试可以在每次部署时覆盖整个网站。每个页面、每个组件、在每种模拟条件下。
如何将对比度验证集成到你的工作流程中
通过视觉测试设置对比度验证遵循结构化的方法。
识别关键组件。 表单、操作按钮、错误和成功消息、状态指示器、导航链接——这些是对比度问题对用户体验影响最大的元素。从它们开始。
在正常条件下创建基线。 在参考状态下捕获你的页面和组件。这些截图作为检测未来回归的比较点。
添加带色盲模拟的基线。 对于每个关键页面或组件，创建带有模拟滤镜的额外基线：绿色盲、红色盲和蓝色盲。这给你三组额外的基线，反映色盲用户实际看到的内容。
设置严格的容差阈值。 对于对比度测试，差异容差必须较低。几个色调的颜色变化可能使对比度比率降到WCAG阈值以下。1到2%的差异阈值适合这些测试。
集成到CI/CD。 配置你的测试在每个pull request时自动运行。如果对比度测试失败，pull request将被阻止直到修正。这是确保对比度回归不会进入生产环境的唯一方法。
教育你的团队。 颜色无障碍的最大障碍不是技术——而是无知。与你的设计师和开发者分享色盲模拟测试的结果。具体地向他们展示色盲用户看到的内容。意识改变行为是永久的。
像Delta-QA这样的工具允许你在没有高级技术技能的情况下设置这种监控。你在可视界面中配置页面、测试条件和容差阈值。捕获和比较是自动的。
超越色盲：对比度作为普遍问题
色盲是最有据可查的案例，但对比度影响更广泛的人群。
光照条件。 根据Google的一项研究（2018），70%的移动设备使用时间是在非最佳光照条件下。在空调办公室里可读的内容在强烈阳光下变得不可读。
衰老。 在60岁时，到达视网膜的光量与20岁相比减少了约三分之一。老年人是越来越活跃的数字用户。
视觉疲劳。 在屏幕前数小时后，区分低对比度的能力下降。这是一种有据可查的现象，几乎影响所有办公室工作人员。
屏幕质量。 廉价屏幕、会议室投影仪、交互式信息亭——实际对比度因硬件而异。
为对比度设计不仅仅是遵守WCAG以避免诉讼。它是承认可读性是任何交互的先决条件，而最佳阅读条件是例外而非常态。
常见问题
如何知道我的网站是否存在色盲用户的对比度问题？
最直接的方法是模拟不同类型的色盲并视觉检查结果。Chrome DevTools提供手动功能（Rendering标签，Emulate vision deficiencies）。对于系统化和自动化的验证，带有集成模拟滤镜的视觉测试可以在每次部署时覆盖整个网站。
WCAG对比度比率是否保证色盲用户的可读性？
不一定。WCAG对比度比率基于相对亮度，与色调无关。两种亮度差异足够大的颜色之间4.5:1的对比度是合规的，但如果这些颜色在绿色盲条件下混淆，文本可能仍然难以辨别。WCAG标准1.4.1还要求颜色不应是传达信息的唯一手段。
应该首先测试哪些类型的色盲？
绿色弱和绿色盲（与绿色通道相关的红绿混淆）影响约6%的男性，是优先级。红色弱和红色盲（与红色通道相关的红绿混淆）影响约2%的男性。蓝色盲（蓝黄混淆）非常罕见，是补充测试。至少测试绿色盲覆盖了大多数情况。
视觉测试能否替代手动对比度审计？
视觉测试检测对比度回归（相对于基线降低对比度的变化）。它不会为每对文本/背景执行对比度比率计算。两种方法互补：手动或自动审计（通过axe-core）识别初始违规，视觉测试防止未来的回归。
如何从设计阶段避免对比度问题？
三个基本规则：永远不要将颜色用作唯一指示器（始终添加文本、图标或图案），使用经过色盲测试的调色板（Sim Daltonism或Color Oracle等工具允许实时验证），并始终在批准颜色选择之前检查对比度比率。现代design system在其颜色token中集成了这些检查。
有多少人真正受到对比度问题的影响？
除了全球3亿色盲人群外，对比度问题根据使用条件可能影响每个人。世卫组织估计22亿人有视力障碍，其中10亿例是未矫正的老花眼。在不良光照条件下查看屏幕的任何用户都会暂时受到对比度不足的影响。
延伸阅读
结论
对比度是一个视觉问题。不是功能问题，不是结构问题，不是代码问题。它是人们在真实使用条件下、用真实视力看你的网站时看到的问题。
代码分析工具检测CSS中的对比度比率违规。这是必要的，但不充分。视觉测试在实际渲染中验证对比度，带有色盲模拟，跨所有浏览器和分辨率，以自动化和持续的方式进行。
8%的男性是色盲。100%的用户受到光照条件、视觉疲劳和屏幕质量差异的影响。对比度不是一个小众话题。它是你界面可读性的基础。