本地安全处理免费工具
色彩对比度检测器 (WCAG 2.1)
确保你的网页对所有用户均清晰可读。即时检测前景色与背景色的相对亮度比率，评估 WCAG 2.1 AA/AAA 无障碍合规性，提供真实排版与组件预览。
#0f172a
#ffffff
对比度比率17.85 : 1
符合 WCAG AAA 极致标准
普通正文 (Regular Text)< 18pt
AA 级标准 (≥ 4.5:1) 通过
AAA 级标准 (≥ 7.0:1) 通过
大字号文本 (Large Text)≥ 18pt 或 14pt粗体
AA 级标准 (≥ 3.0:1) 通过
AAA 级标准 (≥ 4.5:1) 通过
UI 组件与图标 (UI / Icons)按钮/边框
AA 级标准 (≥ 3.0:1) 通过
行业推荐标准3.0:1 推荐
实际排版与组件实时效果#0f172a on #ffffff
大标题展示文字 (Large Heading 24px)
这是普通正文段落文字示范。根据 WCAG 2.1 无障碍标准，正文字体在浅色或深色背景中必须满足足够的明度差，以确保低视力人群、强光环境下屏幕阅读者均能清晰识别。
次级幽灵标签 (Ghost Badge)
WCAG 2.1 色彩对比度合规层级标准速查表
| 评估维度 | AA 级要求 (最低合规) | AAA 级要求 (最高标准) | 适用场景 |
|---|---|---|---|
| 普通正文 (Regular Text) | 4.5 : 1 | 7.0 : 1 | 正文段落、表单文本、表格内容 (<18pt) |
| 大字号文本 (Large Text) | 3.0 : 1 | 4.5 : 1 | 大标题、横幅标语 (≥18pt 或 ≥14pt 粗体) |
| UI 交互控件与图标 | 3.0 : 1 | 建议 4.5 : 1 | 输入框边框、按钮轮廓、核心导航图标 |
| 纯装饰性内容 / 禁用态 | 无限制 | 无限制 | Disabled 按钮、版权纯水印、背景插画 |
下表为国际 W3C 官方公布的各级别最低对比度要求。
使用指南
- 1分别输入或点选前景色（文字）与背景色的 HEX 十六进制代码。
- 2工具即时计算精确对比度比率，并标明普通正文、大字号文本及 UI 控件的 AA/AAA 达标状态。
- 3若对比度不足，可点击“一键应用合规建议”，自动微调明度达到 4.5:1 无障碍标准。
原理解析与标准规范
Web 内容无障碍指南（WCAG 2.1）由 W3C 制定，是全球现代网站开发的通用法律与设计门禁。人眼对不同明度的辨识力基于非线性相对亮度（Relative Luminance）。WCAG 规范要求普通正文对比度必须达到 4.5:1（AA 级）或 7.0:1（AAA 级）；大号文字及关键图形 UI 控件必须达到 3.0:1。合规的对比度设计能够保障老龄群体、视障用户及户外阳光强光下的良好阅读体验。
常见问题解答 (FAQ)
什么是 WCAG 2.1 的 AA 级与 AAA 级标准？
AA 级是大多数国际法规（如美加欧洲政府网站）所强制要求的最低合规基线：普通正文（<18pt）需达到 4.5:1，大字号（≥18pt 或 14pt 粗体）需达到 3.0:1；AAA 级是最高级别的极致可读性标准：普通正文需达到 7.0:1，大字号需达到 4.5:1。
如果对比度恰好是 4.4:1 会被判定为失败吗？
是的。在各大无障碍审计工具（如 Lighthouse、Axe）中，4.5:1 是不可通融的硬性阈值，4.49:1 亦会直接报错。此时你可以使用本工具的“一键微调”功能，仅需微移 1% 亮度即可无感达标。
图标和输入框边框也需要符合对比度规范吗？
是的。WCAG 2.1 明确将非文本内容（如按钮边框、表单激活态下划线、状态图标）纳入评估范围，最低需满足 3.0:1 的对比度。
推荐相关工具
随时在 Google 或百度搜索「OUCloud 对比度检测」，快速找回本工具