什么是颜色对比度检查器?

颜色对比度检查器是一款帮助设计师和开发者验证其颜色组合是否符合 WCAG(网页内容无障碍指南)标准的工具。它计算文本和背景颜色之间的对比度,显示您的设计对于视觉障碍用户是否具有无障碍性。

为什么颜色对比度很重要

适当的颜色对比度对于创建包容性、用户友好的数字体验至关重要:

无障碍性

确保低视力或色盲人士能够舒适地阅读您的内容

法律合规

许多国家要求网站符合无障碍标准(ADA、Section 508、EAA)

更好的用户体验

高对比度提高了所有用户的可读性,尤其是在强光下或低质量屏幕上

SEO 优势

搜索引擎青睐无障碍网站,可能提高您的排名

WCAG 对比度要求

该工具根据以下 WCAG 2.1 标准进行检查,以确保您的设计符合无障碍标准:

内容类型	AA 级	AAA 级	说明
普通文本	4.5:1	7:1	标准正文和标题
大号文本	3:1	4.5:1	18px+ 常规或 14px+ 粗体
UI 组件	3:1	—	图标、边框、交互元素

建议:尽可能达到 AAA 合规,特别是对于正文和关键内容。AA 是大多数网站的最低标准。

您的数据保持私密

所有处理都在您的浏览器中进行,完全保护隐私:

无需上传 - 颜色在您的设备上本地处理
无跟踪 - 我们不收集您的颜色选择或设计数据
无服务器通信 - 一切都使用 JavaScript 在客户端运行
即时结果 - 无需等待服务器处理

如何使用颜色对比度检查器

按照以下简单步骤验证您的颜色组合是否符合无障碍标准:

输入您的颜色

您有两种便捷的方式输入颜色:

颜色选择器 - 点击颜色方块打开原生颜色选择器并可视化选择
HEX 输入 - 直接输入 HEX 代码(例如 #1F2937 或不带井号的 1F2937)

分别输入您的前景色(文本)和背景色以进行准确测试。

查看结果

该工具即时显示全面的无障碍信息:

对比度 - 从 1:1 到 21:1 的数值(越高越好)
WCAG 徽章 - 每个标准的绿色(通过)或红色(失败)
实时预览 - 实时查看文本在背景上的显示效果
合规摘要 - 快速概览您符合哪些标准

修复低对比度(如需要)

如果您的颜色未通过无障碍标准,该工具会提供智能解决方案:

查看建议替代方案部分获取无障碍颜色选项
点击任何建议即可立即应用并查看改进效果
使用交换按钮快速切换前景色和背景色
逐步调整颜色,直到达到所需的对比度

色盲测试

展开更多工具访问高级测试功能:

色盲模拟 - 查看您的颜色在 Protanopia、Deuteranopia 或 Tritanopia 用户眼中的效果
快速预设 - 一键测试常见颜色组合
并排比较 - 同时查看正常视觉和模拟视觉

获得最佳结果的专业提示:

始终测试设计的浅色和深色模式版本
考虑用户在不同设备和光照条件下的查看情况
尽可能达到 AAA 合规,特别是对于正文
使用实际内容长度进行测试 - 较长的文本需要更好的对比度
不要仅依靠颜色传达信息(使用图标、标签或图案)

功能特性

全面的工具确保您的设计符合无障碍标准并适用于所有用户:

实时对比度计算

在调整颜色时获得即时反馈。对比度会立即更新,显示您的组合是否通过 WCAG 标准。

输入时即时显示结果
无需刷新页面
流畅、响应式界面

完整 WCAG 合规检查

一次性检查所有相关的 WCAG 2.1 标准,并提供清晰的通过/失败指示:

普通文本(AA 和 AAA 级)
大号文本(AA 和 AAA 级)
UI 组件和图形对象

智能颜色建议

当您的颜色未通过无障碍标准时,该工具会自动建议无障碍替代方案。每个建议显示:

调整后的颜色值
产生的对比度
调整的是文本还是背景
一键应用

实时预览

通过真实文本样本准确查看您的颜色组合效果:

标题文本(大号、粗体)
正文文本(正常大小)
小号文本(说明文字、小字)
带边框的按钮

色盲模拟

为不同类型色觉缺陷的用户测试您的颜色:

Protanopia - 红色盲(约 1% 的男性)
Deuteranopia - 绿色盲(约 1% 的男性,最常见)
Tritanopia - 蓝色盲(约 0.01% 的人,罕见)

快速预设

一键测试常见颜色组合。包括高对比度配对和流行设计系统颜色。

Material Design 颜色
Tailwind CSS 调色板
高对比度组合

交换颜色

即时切换前景色和背景色,测试反向对比度场景并探索替代设计。

复制到剪贴板

一键复制任何颜色值,方便在设计工具、CSS 或代码编辑器中使用。

重要提示:虽然此工具有助于确保颜色对比度合规,但请记住,无障碍性不仅仅涉及对比度。还要考虑字体大小、粗细、行高和整体设计清晰度。

常见问题

什么是良好的对比度?

对于普通文本,至少应达到 4.5:1(WCAG AA)或 7:1(WCAG AAA)以获得更好的无障碍性。对于大号文本(18px+ 或 14px 粗体),AA 合规的最低要求是 3:1。

更高的比率提供更好的可读性,特别是对于视觉障碍用户或在具有挑战性的观看条件下。

AA 和 AAA 有什么区别?

AA 级是大多数网站的最低推荐标准,在许多司法管辖区具有法律要求。它为大多数用户提供良好的无障碍性。

AAA 级是更高的标准,提供更好的无障碍性,但对于某些调色板可能更难实现。建议用于针对有严重视觉障碍用户的内容。

大多数组织以 AA 合规作为基准,对关键内容达到 AAA。

为什么我的设计即使使用白底深色文本也不合格?

浅灰色文本(#999999 或更浅)在白色背景上通常无法满足对比度要求。即使是您看起来"足够深"的颜色也可能无法达到无障碍所需的 4.5:1 比率。

常见的不合格组合包括:

#999999 在 #FFFFFF 上(2.8:1 - AA 不合格)
#CCCCCC 在 #FFFFFF 上(1.6:1 - 所有标准均不合格)
#767676 在 #FFFFFF 上(4.5:1 - 勉强通过 AA)

使用工具的建议找到合规所需的最小深度。

如何修复低对比度?

您有几种选择来提高对比度:

加深文本颜色 - 使前景色更深,同时保持背景色
调浅背景 - 使背景更浅,同时保持文本颜色
使用建议 - 工具会自动计算所需的最小调整
尝试预设 - 测试经过验证的无障碍颜色组合

建议替代方案部分显示通过 WCAG 标准所需的最小更改。

此工具支持 RGB 或 HSL 颜色吗?

目前,该工具接受 HEX 颜色代码(例如 #1F2937 或 1F2937)。您可以使用任何在线颜色转换器将 RGB 或 HSL 值转换为 HEX 格式后再进行测试。

常见转换:

RGB(31, 41, 55) → #1F2937
HSL(217, 28%, 17%) → #1F2937

什么是色盲模拟?

约 8% 的男性和 0.5% 的女性患有某种形式的色觉缺陷。模拟显示您的颜色在不同类型色盲用户眼中的效果,帮助您确保设计适用于所有人。

模拟的三种主要类型:

Protanopia - 难以区分红色和绿色
Deuteranopia - 难以区分绿色和红色(最常见)
Tritanopia - 难以区分蓝色和黄色(罕见)

即使您的对比度通过,颜色对色盲用户来说可能看起来相似。使用模拟来验证您的设计保持清晰。

21:1 的对比度可以实现吗?

可以,但只能使用纯黑色(#000000)在纯白色(#FFFFFF)上或反之。这是可能的最大对比度。

大多数设计使用较柔和的颜色,导致较低的比率,只要满足最低要求(普通文本 4.5:1,大号文本 3:1)就完全没问题。

常见的高对比度组合:

#000000 在 #FFFFFF 上 - 21:1(最大值)
#1F2937 在 #FFFFFF 上 - 15.6:1(优秀)
#374151 在 #FFFFFF 上 - 11.4:1(优秀)

我需要检查图片的对比度吗?

是的,叠加在图片上的文本仍应满足对比度要求。由于图片背景各不相同,请考虑以下技术:

在文本后面添加半透明叠加层(例如 rgba(0,0,0,0.5))
使用文本阴影以获得更好的分离效果
对文本后面的图片区域应用模糊或变暗
针对图片的最暗/最亮部分测试对比度

对于文本图片(不推荐),整个图片必须满足对比度要求。

对比度计算有多准确?

此工具使用官方 WCAG 2.1 公式计算相对亮度和对比度。结果与其他无障碍测试工具和浏览器开发者工具的结果一致。

计算遵循 W3C 标准:

将 HEX 转换为 RGB 值
计算每种颜色的相对亮度
应用对比度公式:(L1 + 0.05) / (L2 + 0.05)

结果在数学上是精确的,符合国际无障碍标准。