颜色对比检查器
检查文本与背景颜色之间的颜色对比度。测试 WCAG 2.x AA/AAA 对普通文本和大文本的合规性,提供实时预览、颜色建议及详细的无障碍分析。
检测到广告拦截,导致我们无法展示广告
MiniWebtool 依靠广告收入免费提供服务。如果这个工具帮到了你,欢迎开通 Premium(无广告 + 更快),或将 MiniWebtool.com 加入白名单后刷新页面。
- 或升级 Premium(无广告)
- 允许 MiniWebtool.com 显示广告,然后刷新
颜色对比检查器
颜色对比检查器帮助设计师、开发人员和无障碍专家确保颜色组合符合 WCAG 2.x 无障碍标准。文本和背景颜色之间适当的对比度对于可读性至关重要,特别是对于低视力或色觉障碍用户而言。
什么是颜色对比度?
颜色对比度衡量两种颜色之间感知的亮度差异。其范围从 1:1(颜色相同,无对比)到 21:1(最大对比:白底黑字)。该比例是根据两种颜色的相对亮度值,使用 WCAG 2.x 公式计算得出的。
WCAG 对比度要求
Web 内容无障碍指南 (WCAG) 为颜色对比度定义了两个符合性级别:
| 元素类型 | WCAG AA | WCAG AAA |
|---|---|---|
| 普通文本 (<18pt / <14pt 加粗) | 4.5 : 1 | 7 : 1 |
| 大文本 (≥18pt / ≥14pt 加粗) | 3 : 1 | 4.5 : 1 |
| UI 组件和图形 | 3 : 1 | — |
什么算作“大文本”?
WCAG 将大文本定义为至少 18 磅 (24px) 常规字重,或至少 14 磅 (18.66px) 加粗字重。大文本的对比度要求较低,因为较大的字符自然更容易阅读。
如何使用此工具
- 输入您的颜色: 使用颜色选择器选取前景色(文本)和背景色,或输入十六进制代码,也可以点击预设示例。
- 查看实时预览: 即时查看您的颜色在实际 UI 元素(标题、正文、按钮、链接、表单输入框)上的效果。
- 点击“检查对比度”: 获取准确的对比度数值以及普通文本、大文本和 UI 组件的 WCAG 合规状态。
- 应用建议: 如果您的颜色不符合标准,请使用自动建议功能来查找最接近的符合无障碍要求的替代方案。
理解结果
对比度
主数值(例如 8.59:1)告诉您两种颜色的视觉差异程度。数值越高,可读性越好。至少 4.5:1 的比例可确保大多数用户能够舒适地阅读普通大小的文本。
综合等级
- AAA (优秀): 通过所有 WCAG 标准,包括增强标准 (7:1+)。达到最佳无障碍程度。
- AA (良好): 通过标准要求 (4.5:1+)。符合大多数地区的法律要求。
- AA 大文本 (部分通过): 仅通过大文本或 UI 组件标准 (3:1+)。普通文本未通过。
- 失败 (差): 不符合任何 WCAG 对比度标准。对于许多用户来说,文本将难以阅读。
颜色建议
当您的颜色不符合对比度要求时,该工具会通过调整亮度同时保留色相和饱和度,来建议最接近的无障碍颜色。您可以点击一次即可应用建议。
为什么颜色对比度很重要
- 法律合规: 许多国家法律要求符合 WCAG AA 标准(如 ADA、Section 508、EN 301 549、EAA)。
- 用户体验: 良好的对比度可以提高所有用户的可读性,而不仅仅是残障人士。
- SEO 影响: 搜索引擎越来越多地将无障碍性纳入排名因素。
- 受众覆盖: 大约每 12 名男性中就有 1 人,每 200 名女性中就有 1 人患有色觉障碍。
选择无障碍颜色的技巧
- 从足够的对比度开始,然后优化设计——事后修复对比度会更加困难。
- 避免在没有测试的情况下在彩色背景上放置彩色文字。即使看起来“截然不同”的颜色也可能无法通过对比度检查。
- 白色背景上的浅灰色文本是最常见的无障碍失败案例之一。
- 在设计过程中使用此工具,而不仅仅是在审计期间——尽早发现问题可以节省大量返工时间。
- 不要仅依靠颜色来传达信息;也要使用形状、图案或标签。
常见问题解答
什么是颜色对比度?
颜色对比度衡量两种颜色之间感知亮度的差异。其范围从 1:1(无对比,颜色相同)到 21:1(最大对比,白底黑字)。该比例使用 WCAG 2.x 公式计算:(L1 + 0.05) / (L2 + 0.05),其中 L1 是较亮颜色的相对亮度,L2 是较暗颜色的相对亮度。
WCAG AA 合规需要多少对比度?
WCAG AA 要求普通文本(18pt 以下或 14pt 加粗以下)的最小对比度为 4.5:1,大文本(18pt+ 或 14pt+ 加粗)的最小对比度为 3:1。对于非文本 UI 组件和图形对象,最小值为 3:1。
WCAG AA 和 AAA 有什么区别?
WCAG AA 是标准合规级别,要求普通文本为 4.5:1,大文本为 3:1。WCAG AAA 是增强级别,要求普通文本为 7:1,大文本为 4.5:1。大多数无障碍法律要求达到 AA 级,而 AAA 级是推荐做法,通常不强制要求整个网站都达到该标准。
WCAG 指南中什么是大文本?
在 WCAG 指南中,大文本定义为至少 18 磅 (24px) 的常规字重,或至少 14 磅 (约 18.66px) 的加粗字重。大文本的对比度要求较低,因为较大的字符在较低对比度下也更容易阅读。
如何修复低颜色对比度?
修复低颜色对比度的方法:(1) 加深文字颜色或减浅背景颜色,反之亦然。(2) 使用我们的颜色建议功能,它会自动寻找最接近的通过颜色。(3) 增加字体大小以符合对比度要求较低的“大文本”标准。(4) 避免仅依靠颜色来传达信息。
颜色对比度只适用于文本吗?
不是。WCAG 2.1 成功标准 1.4.11 要求非文本元素(包括表单输入框边框、图标和对理解内容至关重要的图形对象)的最小对比度为 3:1。这适用于按钮、表单字段和焦点指示器等 UI 组件。
更多资源
引用此内容、页面或工具为:
"颜色对比检查器" 于 https://MiniWebtool.com/zh-cn/颜色对比检查器/,来自 MiniWebtool,https://MiniWebtool.com/
由 miniwebtool 团队开发。更新日期:2026年2月11日