颜色对比度(WCAG)
输入前景/背景颜色,计算对比度与 AA/AAA 通过情况。
输入颜色
输入文本颜色的 HEX 值
输入背景颜色的 HEX 值
💡 使用说明
什么是 WCAG?
WCAG(Web Content Accessibility Guidelines)是网页内容无障碍指南,定义了文本与背景颜色对比度的最低标准,确保视觉障碍人士能够轻松阅读网页内容。
WCAG 等级说明
- AA 级: AA 级(最低要求):正常文本对比度 ≥ 4.5:1,大文本 ≥ 3:1
- AAA 级: AAA 级(增强要求):正常文本对比度 ≥ 7:1,大文本 ≥ 4.5:1
文本大小定义
- 正常文本:小于 18pt(24px)或小于 14pt(18.5px)粗体
- 大文本:大于等于 18pt(24px)或大于等于 14pt(18.5px)粗体
功能特点
- 实时计算颜色对比度
- WCAG AA/AAA 等级检测
- 区分正常文本和大文本标准
- 实时颜色预览
- 显示相对亮度值
应用场景
- 网页设计无障碍检查
- UI 配色方案验证
- 文本可读性测试
- WCAG 合规性审查
使用技巧
- 深色文本配浅色背景通常对比度更高
- 大文本对对比度要求较低
- 至少要满足 AA 级标准
- 尽量争取达到 AAA 级以获得最佳可读性
对比度结果
21.00:1
对比度比值
正常文本
AA 级✓ 通过
AAA 级✓ 通过
大文本
AA 级✓ 通过
AAA 级✓ 通过
✓ 对比度良好,易于阅读
颜色预览
正常文本示例
示例文本 AaBbCc 123
大文本示例
大文本 AaBbCc
颜色信息
前景色
#000000
前景相对亮度0.0000
背景色
#ffffff
背景相对亮度1.0000