颜色对比度检查器

什么是对比度检查器？

对比度检查器是一款在线工具，用于测量文本与背景颜色之间的对比度，并实时验证是否符合WCAG（网页内容无障碍指南）标准。确保所有人（包括低视力用户和色觉障碍用户）都能阅读网页内容的充足颜色对比度，是网页无障碍访问的核心要素。

本工具支持HEX和RGB颜色代码输入以及可视化取色器，即时计算对比度并显示WCAG 2.1 AA和AAA级别的合规性。通过色盲模拟、推荐无障碍颜色、保存颜色组合等功能，让创建符合无障碍标准的设计变得前所未有的简单。根据中国GB/T 37668-2019信息无障碍标准，网站应确保文本颜色与背景颜色有足够的对比度。

适用场景

• 网页开发 – 在网站上线前验证按钮、链接和正文文本颜色是否符合WCAG标准
• UI/UX设计 – 在设计中使用品牌色时确认文本可读性
• 无障碍审计 – 在现有网站上查找并修复颜色对比度问题，进行无障碍改进工作
• 文档制作 – 审查PDF、演示文稿、报告等数字文档的文本可读性
• 应用开发 – 确保iOS和Android应用的颜色组合符合无障碍指南
• 合规要求 – 为政府机构、教育机构等需要符合GB/T 37668或WCAG合规要求的组织检查内容
• 色觉无障碍 – 通过模拟验证信息是否能传达给色盲用户

主要功能

• 实时对比度计算 – 输入颜色后立即计算对比度。显示从21:1（最大）到1:1（最小）的精确对比度值。
• WCAG合规检查 – 通过直观的视觉指示器显示4项标准（AA/AAA级别的正常文本和大号文本）的通过/未通过状态。
• 多种颜色输入方式 – 支持直接输入HEX代码、单独输入RGB值以及可视化取色器，方便选择颜色。
• 实时预览 – 通过大号文本和正常文本示例，查看所选文本/背景颜色组合的实际效果。
• 色盲模拟 – 从红色盲（Protanopia）、绿色盲（Deuteranopia）、蓝色盲（Tritanopia）和全色盲（Achromatopsia）用户的视角查看颜色组合。
• 颜色建议 – 当前对比度不足时，自动建议符合WCAG AA或AAA标准的替代颜色。
• 颜色交换 – 立即交换文本和背景颜色，快速检查反转组合的对比度。
• CSS代码复制 – 将验证过的颜色组合以CSS代码形式（color: #000000; background-color: #FFFFFF;）复制，立即用于项目。
• 历史记录保存 – 将常用或验证过的颜色组合保存到本地，方便以后快速访问。最多可保存12个组合。
• 随机颜色生成 – 一键生成符合WCAG AA标准的颜色组合。从各种调色板中随机选择，每次都提供新鲜的组合。

使用方法

1. 选择文本颜色 – 在左侧”文本颜色”区域，点击取色器或直接输入HEX代码（如：333333）或RGB值。
2. 选择背景颜色 – 在右侧”背景颜色”区域，用同样的方法指定背景色。使用中间的箭头按钮可以交换两种颜色。
3. 查看结果 – 在顶部预览区域查看实际文本效果，然后在下方查看对比度和WCAG合规结果。
4. 查看色盲模拟 – 在色盲模拟部分，查看不同类型色觉障碍用户看到的颜色效果。
5. 保存和使用 – 找到合适的颜色组合后，点击”保存”将其存储到历史记录，点击”复制CSS”复制代码用于项目。

WCAG颜色对比度标准详解

什么是对比度？

对比度是根据两种颜色的相对亮度计算得出的。最亮颜色（白色）与最暗颜色（黑色）之间的对比度为21:1，相同颜色的对比度为1:1。WCAG使用这个对比度来评估文本的可读性。

WCAG 2.1 AA级（最低标准）

• 正常文本 – 至少需要4.5:1的对比度。适用于小于18px或小于14px粗体的文本。
• 大号文本 – 至少需要3:1的对比度。适用于18px（24px CSS）或更大，或14px（19px CSS）或更大的粗体文本。
• UI组件 – 按钮边框、输入框、图标等用户界面元素至少需要3:1的对比度。

WCAG 2.1 AAA级（增强标准）

• 正常文本 – 至少需要7:1的对比度。提供最高级别的可读性。
• 大号文本 – 至少需要4.5:1的对比度。与AA级正常文本要求相同。

虽然大多数法律要求只要求达到AA级，但建议追求AAA级以实现更广泛的用户无障碍访问。

大号文本的定义

WCAG对”大号文本”的定义如下：

• 常规粗细：18pt（24px）或更大
• 粗体：14pt（约19px）或更大

大号文本在较低对比度下也更容易阅读，因此适用放宽的标准。

中国的无障碍标准 GB/T 37668

中国发布了GB/T 37668-2019《信息技术 互联网内容无障碍可访问性技术要求与测试方法》国家标准。该标准参考了WCAG 2.0/2.1，对颜色对比度有类似的要求。随着数字包容性的重视程度不断提高，越来越多的中国企业和政府机构开始关注网页无障碍访问。

色盲与网页无障碍访问

色觉障碍的类型

• 红色盲（Protanopia） – 缺少红色感光细胞，无法感知红色。约影响1%的男性。
• 绿色盲（Deuteranopia） – 缺少绿色感光细胞，无法感知绿色。是最常见的色盲类型，约影响5%的男性。
• 蓝色盲（Tritanopia） – 缺少蓝色感光细胞，无法感知蓝色。非常罕见，男女均约0.01%受影响。
• 全色盲（Achromatopsia） – 以灰度感知所有颜色。极其罕见，约每30,000人中有1人。

考虑色觉无障碍的设计建议

• 切勿仅使用红绿颜色组合来区分信息。应结合图案、图标和文字标签。
• 确保足够的亮度对比，色觉障碍用户可以通过亮度差异来区分元素。
• 为链接添加下划线或其他视觉指示器，使其不仅仅依靠颜色来识别。
• 在图表中使用图案、标签和直接的数值显示。

实用技巧

• 品牌色验证 – 将企业CI颜色用于文本和背景时，务必检查对比度。考虑在品牌指南中包含无障碍验证结果。
• 检查所有按钮状态 – 验证按钮默认、悬停、聚焦和禁用状态的对比度。
• 深色模式支持 – 在浅色和深色模式下都检查对比度。相同的文本颜色在不同背景下可能产生不同的结果。
• 半透明背景注意 – 半透明叠加层上的文本可能因背景图像而有不同的可读性，请针对最坏情况进行验证。
• 真实环境测试 – 通过对比度检查并不保证实际可读性。在各种设备和光照条件下进行测试。

常见问题