对比度检查器
Samples
对比度
5.17
:1
AA
前景 (text)
#FFFFFF
背景
#2563EB
使用方法
- 输入前景色和背景色。
- 查看 WCAG 对比度结果和不同文本尺寸下的评级。
- 发布前在真实 UI 状态中检查 hover、disabled 和 dark mode。
常见问题
WCAG 对比度通过就够了吗？
它是重要基线，但还要检查字号、字重、状态和真实背景。
透明背景怎么处理？
应在合成后的真实背景色上计算。
适合 dark mode 吗？
适合，但要分别检查浅色和深色主题。
简介
对比度检查器 是一个在线工具，用于快速检查颜色对比度，让可访问性 review 更稳定。它适合设计系统、CSS、主题、可访问性检查和 UI 交付。
什么时候使用
当你需要快速准备、检查或复制颜色或 CSS 输出时，可以使用“对比度检查器”。它能减少手工计算和重复操作，并让结果更容易放入真实工作流。
核心能力
- 在浏览器中快速处理输入，适合临时任务和日常检查。
- 输出清晰，便于复制、下载、记录或继续调试。
- 帮助在发布、测试或提交前发现格式、兼容性或隐私相关问题。
使用建议
- 使用接近真实场景的样例，不要只测试最简单输入。
- 涉及 secret、客户数据、设备隐私或生产配置时，优先使用脱敏内容。
- 对关键结果，在目标系统、设备或浏览器中再验证一次。
颜色结果进入生产前，建议同时检查视觉效果和可访问性。