♿颜色对比度检查器
检查文字与背景颜色组合是否满足 WCAG AA 和 AAA 对比度要求,适合界面、内容块和品牌素材,也能帮助你在上线前快速筛出可读性风险。
Color Contrast Checker
Check color contrast ratios for WCAG accessibility compliance
Color Selection
Preset Combinations
Contrast Results
Sample Text
This is how your text will look with the selected colors. The contrast ratio determines readability and accessibility.
0.00:1
Contrast Ratio
WCAG Compliance
AA Normal Text (4.5:1)
Fail
AA Large Text (3:1)
Fail
AAA Normal Text (7:1)
Fail
AAA Large Text (4.5:1)
Fail
WCAG Guidelines
WCAG AA (Minimum)
• Normal text: 4.5:1 contrast ratio
• Large text (18pt+ or 14pt+ bold): 3:1 contrast ratio
• Required for most websites and applications
• Legal compliance in many jurisdictions
WCAG AAA (Enhanced)
• Normal text: 7:1 contrast ratio
• Large text: 4.5:1 contrast ratio
• Higher standard for better accessibility
• Recommended for critical applications
♿关于颜色对比度检查器
对比度检查器是一个专业的网页无障碍工具,用于评估颜色组合的可读性和无障碍合规性。此工具确保您的颜色选择符合WCAG(网页内容无障碍指南)标准,为所有用户创造包容性的数字体验。对于需要创建符合无障碍标准的界面的设计师、开发者和内容创建者来说至关重要,帮助确保网站和应用程序对视觉障碍用户友好,同时满足法律法规要求。
如何使用颜色对比度检查器
- 选择前景色: 选择您的前景颜色(通常是文本颜色)。
- 选择背景色: 选择您的背景颜色或底色。
- 查看对比度: 查看自动计算的对比度比例和评分。
- 检查合规性: 检查WCAG AA和AAA级别的合规状态。
- 调整颜色: 根据建议调整颜色以改善无障碍性。
- 验证结果: 确认最终的颜色组合符合所需的无障碍标准。
- 大文本(18pt+或14pt粗体)需要较低的对比度比例
- 使用工具的颜色建议功能快速改善对比度
- 考虑在不同设备和光照条件下测试颜色
- 保存符合标准的颜色组合以供将来使用
颜色对比度检查器的功能特点
- WCAG合规检查: 全面的WCAG 2.1 AA和AAA级别合规性评估。
- 实时计算: 实时对比度比例计算和即时反馈。
- 级别指示器: 清晰的AA和AAA级别通过/失败指示器。
- 改进建议: 智能颜色调整建议以达到更好的对比度。
- 无障碍评分: 详细的无障碍评分和可读性分析。
- 多格式支持: 支持HEX、RGB、HSL等多种颜色格式输入。
颜色对比度检查器常见问题
Common questions about 颜色对比度检查器