对比度检查器
专业的在线对比度检测工具，帮助设计师和开发者确保文本与背景颜色的对比度符合WCAG可访问性标准。实时检测对比度比率，提供改进建议。
对比度检测工具
选择或输入前景色和背景色，实时检测对比度比率。
对比度预览文本
WCAG 2.1 标准符合性
改进建议
当前颜色组合具有优秀的对比度，符合所有WCAG可访问性标准。
常见颜色组合示例
以下是一些常见颜色组合的对比度示例：
对比度与可访问性指南
什么是色彩对比度？
色彩对比度是指前景色（通常是文本）与背景色之间的亮度差异比率。足够的对比度确保文本内容对所有用户（包括视力障碍用户）清晰可读。
WCAG 2.1 标准
Web内容可访问性指南(WCAG) 2.1定义了色彩对比度的最低要求：
- AA级：普通文本对比度至少4.5:1，大文本至少3:1
- AAA级：普通文本对比度至少7:1，大文本至少4.5:1
为什么对比度重要？
足够的对比度：
- 提高文本可读性
- 帮助色盲用户辨识内容
- 在强光环境下保持可读性
- 符合法律和行业标准
如何增强对比度？
如果对比度不足：
- 加深文本颜色或减淡背景色
- 为文本添加阴影或描边
- 使用半透明背景增强对比
- 提供高对比度模式选项
对比度计算公式
对比度比率使用以下公式计算：
对比度 = (L1 + 0.05) / (L2 + 0.05)
其中L1是较浅颜色的相对亮度，L2是较深颜色的相对亮度。相对亮度基于sRGB色彩空间计算，考虑人眼对不同波长光的敏感度。
特殊情况的考虑
- 大文本：18pt（约24px）以上的普通文本或14pt（约18.5px）以上的粗体文本被视为"大文本"，适用较低的对比度要求
- 装饰性文本：纯装饰性、不可读或作为logo一部分的文本不受对比度要求限制
- 非文本内容：用户界面组件和图形对象需要至少3:1的对比度
- 悬停状态：交互元素的悬停和焦点状态也需要足够的对比度
测试最佳实践
- 在实际设备上测试对比度，不同屏幕显示效果可能不同
- 考虑不同光照条件下的可读性
- 测试色盲用户视角下的对比度效果
- 使用多种工具验证结果，确保准确性
- 定期审查和更新设计，确保持续符合标准
浏览器兼容性
大多数现代浏览器都支持CSS色彩对比度检测相关的API：
- CSS Color Module Level 4：Chrome 62+, Firefox 57+, Safari 12.1+
- APCA（高级感知对比度算法）：新兴标准，提供更精确的对比度计算
建议同时使用工具检测和人工验证，确保最佳的可访问性。