无需登录 数据私有 本地保存

WCAG 颜色对比度检查器 - 无障碍合规性测试

开发工具 设计工具 WCAG 对比度 无障碍 颜色
9
0
0
0
#
RGB: 26, 26, 46
#
RGB: 248, 249, 250
13.4 : 1
大标题文本预览 Large Text
正常正文文本预览。The quick brown fox jumps over the lazy dog. 这段文字展示了实际阅读体验。
小号文字 Small text · 辅助信息 · UI 组件文字
色盲模拟 了解不同视觉下的效果
正常视觉
红色盲 Protanopia
绿色盲 Deuteranopia
蓝黄色盲 Tritanopia
调整建议 对比度不足时提供

当前对比度已达标，无需调整。您可以尝试微调亮度来探索更多组合。

预设配色
深色/浅灰 白/深蓝 黑/白 白/深灰 蓝/白 红/白 白/红 绿/浅绿 紫/浅紫 灰/白⚠️
历史记录

暂无历史记录，调整颜色后将自动保存。

常见问题 FAQ

WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）是由W3C制定的国际标准。颜色对比度是指前景文字与背景颜色之间的亮度差异比率。足够的对比度确保所有用户（包括视力障碍者、色盲用户以及在强光环境下使用设备的用户）都能清晰辨认内容。WCAG 2.1定义了明确的对比度阈值，已成为全球网页无障碍合规的基准。

AA级（最低标准）：正常文本对比度需≥4.5:1，大文本（18px以上或14px以上加粗）需≥3:1。这是大多数网站应达到的基本无障碍水平。

AAA级（增强标准）：正常文本对比度需≥7:1，大文本需≥4.5:1。这是更严格的增强无障碍标准，适用于对无障碍要求极高的场景（如政府网站、教育平台）。

一般建议至少达到AA级，这是WCAG合规的底线要求。

对比度 = (L1 + 0.05) / (L2 + 0.05)，其中L1是较亮颜色的相对亮度，L2是较暗颜色的相对亮度。相对亮度基于sRGB颜色空间计算，先将颜色值线性化（gamma校正），然后按公式 0.2126×R + 0.7152×G + 0.0722×B 加权求和。这个公式模拟了人眼对不同波长的敏感度——绿色最敏感（71.52%），蓝色最不敏感（7.22%）。

根据WCAG定义，大文本是指：
• 常规字重下，字号≥18pt（约24px）的文本
• 粗体字重下，字号≥14pt（约18.67px）的文本

大文本由于本身更易辨认，其对比度要求较低（AA级仅需3:1）。在UI设计中，标题、按钮文字、导航标签等通常属于大文本范畴。

约8%的男性和0.5%的女性患有某种形式的色觉缺陷。最常见的类型包括红色盲（Protanopia）、绿色盲（Deuteranopia）和蓝黄色盲（Tritanopia）。色盲用户感知的颜色与正常视觉不同——某些颜色组合在他们眼中可能变得难以区分。本工具内置的色盲模拟功能可以帮助设计师预览不同色觉类型下的视觉效果。除了对比度之外，建议同时使用形状、图标、纹理等非颜色线索来传达信息。

几个实用技巧：
1. 使用亮度微调：保持色相不变，调整亮度是提高对比度最有效的方法。
2. 深色文字+浅色背景通常比浅色文字+深色背景更容易达标。
3. 避免纯黑(#000)+纯白(#FFF)：极端的21:1对比度虽然达标，但长时间阅读可能引起视觉疲劳，建议使用柔和的深灰和米白。
4. 测试你的品牌色：将品牌主色作为背景时，确保白色或深色文字能通过AA级标准。
5. 使用本工具的预设配色作为参考起点。

WCAG标准对移动端和桌面端的要求是完全一致的。但移动端面临额外的挑战：户外强光环境下屏幕可见度降低、设备亮度调节差异等。建议在移动端测试时，将设备亮度调至中等，并在自然光下验证实际阅读体验。移动端的UI元素通常更小，更需要确保对比度充足。
🔧 相关工具