确保您的设计符合可访问性标准
我们的颜色对比度检测工具可帮助您验证文本和背景颜色组合是否满足WCAG(Web Content Accessibility Guidelines)标准,确保所有用户都能清晰阅读您的内容。
检查对比度比率
验证WCAG AA/AAA标准
即时视觉反馈
移动友好设计
颜色对比度检测
16px
这是标题文本
这是普通大小的正文文本示例。颜色对比度是否足够清晰?
这是小文本示例,通常用于辅助说明或脚注。
对比度结果
对比度比率:
1:1
WCAG AA 标准:
-
WCAG AAA 标准:
-
WCAG 对比度指南
WCAG AA 标准
- 普通文本对比度至少为 4.5:1
- 大文本(18pt 或 14pt 粗体)对比度至少为 3:1
- 用户界面组件(按钮、链接等)对比度至少为 3:1
WCAG AAA 标准
- 普通文本对比度至少为 7:1
- 大文本(18pt 或 14pt 粗体)对比度至少为 4.5:1
- 提供增强的对比度选项
为什么对比度很重要?
适当的颜色对比度对于确保所有用户都能清晰阅读您的内容至关重要,特别是视力障碍用户或在低光环境下使用设备的用户。符合WCAG标准的对比度可以:
提高可访问性
确保视力障碍用户能够理解您的内容
改善SEO
符合WCAG标准的网站在搜索引擎中排名更高
法律合规
避免因可访问性问题而面临法律诉讼
推荐颜色组合
白底黑字
对比度: 21:1
AAA 合格
蓝底白字
对比度: 10.7:1
AAA 合格
浅灰底深灰字
对比度: 11.8:1
AAA 合格
黑底白字
对比度: 21:1
AAA 合格
红底白字
对比度: 4.9:1
AA 合格
绿底白字
对比度: 5.7:1
AA 合格