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

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

前端设计 可访问性 WCAG 对比度 检测
77
0
0
0
颜色设置
标题文字示例 Heading
这是一段正文文字，用于展示普通文本在选定颜色下的可读性效果。The quick brown fox jumps over the lazy dog.
小号文字 / Small text · 辅助说明文字 · 14px
粗体正文 Bold body text — 模拟大文字效果
对比度比率
12.63 : 1
标准级别 普通文字 大文字 (≥24px)
AA 通过 通过
AAA 通过 通过
对比度表现优秀！通过所有WCAG无障碍标准，适合各类用户阅读。
常见问题与知识点

WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）是由W3C（万维网联盟）制定的国际标准，旨在确保网页内容对所有用户（包括视力障碍、色盲、听力障碍等残疾人士）都可访问。WCAG基于四项原则：可感知、可操作、可理解、健壮性。颜色对比度属于"可感知"原则下的核心要求，直接影响视觉障碍用户能否清晰辨识网页内容。全球许多国家已将WCAG合规纳入法律要求。

AA级是最低推荐标准，要求普通文字对比度≥4.5:1，大文字≥3:1。这是大多数网站应达到的基本无障碍水平。
AAA级是最高标准，要求普通文字对比度≥7:1，大文字≥4.5:1。AAA级更难达成，通常用于专门服务残障用户的网站或对无障碍有极高要求的项目。大多数商业网站以AA级为目标。

根据WCAG定义，大文字指：
· 字体大小≥18pt（通常为24px）的任意文字，或
· 字体大小≥14pt（约18.67px）的粗体文字。
大文字的对比度要求较低（AA级仅需3:1），因为较大的字体本身就更容易辨认。在网页设计中，标题、导航菜单项等通常属于大文字范畴。

对比度比率基于两个颜色的相对亮度（Relative Luminance）计算：
1. 将RGB各通道值除以255，进行sRGB非线性变换
2. 计算相对亮度：L = 0.2126×R + 0.7152×G + 0.0722×B
3. 对比度 = (L_较亮 + 0.05) / (L_较暗 + 0.05)
结果范围从1:1（相同颜色）到21:1（纯黑与纯白）。数值越高，对比度越强，可读性越好。

全球约有2.17亿人患有中度至重度视力障碍，约3亿人患有色盲。低对比度文字对这些用户来说可能完全无法辨认。此外，在强光环境（如户外阳光下）、低质量屏幕、或者老年人使用设备时，高对比度能显著提升阅读体验。确保足够的对比度不仅是法律合规要求，更是对用户的尊重和关怀。

提高对比度的实用技巧：
· 加深文字颜色：将浅灰色文字改为深灰色或纯黑色
· 调亮背景色：避免使用深色或鲜艳的背景搭配深色文字
· 使用工具检测：在设计阶段使用本工具实时检测对比度
· 遵循设计系统：建立符合WCAG标准的色彩调色板
· 注意灰色文字：灰色文字（如#999）在白色背景上对比度仅约2.85:1，不达标

需要满足对比度要求的元素：
· 正文文本、标题、导航链接、按钮文字
· 表单输入框中的文字、占位符文字
· 信息图表中的关键文字
不需要满足对比度要求的元素：
· 纯装饰性文字或图片
· Logo中的文字（但建议尽量保证可读性）
· 禁用状态下的控件文字
· 不可见的文字（如用于屏幕阅读器的隐藏文字）

本工具遵循WCAG 2.1标准。对比度计算基于sRGB相对亮度公式。支持HEX颜色格式（如#FF0000或ff0000）。

🔧 相关工具