如何检查颜色对比度以确保可访问性？
根据WCAG标准检查和优化颜色对比度的完整指南。工具、方法和最佳实践。
试用我们的免费工具
无需注册，100% 本地处理。
网络可访问性不再是可选的——它在许多国家是法律义务，最重要的是，它是对所有用户的道德责任。颜色对比度是视觉可访问性最基本的标准之一。
全球约有3亿人患有视力障碍。除此之外，还有数百万用户在次优条件下浏览网络：阳光下的手机屏幕、为节省电池而降低的亮度等。
本指南教你检查和纠正颜色对比度的具体方法。
广告
目录
如何用好 color-contrast
color-contrast 可加快颜色和视觉工作流程。
以下建议涵盖 accessibility 用例、输出质量以及与网页项目的一致性。
广告
只需 3 步即可完成操作
1
打开我们的对比度检查工具，输入文本颜色和背景颜色。
2
查看显示的比率和符合级别。绿色 = 符合AA。黄色 = 仅对大文本符合。红色 = 不合格。
3
如果结果不足，使用建议的调整或手动修改颜色直到达到至少4.5:1。
4
对设计中的每个文本/背景组合重复。记录结果。
5
使用我们的模拟器完成色盲测试。
专业技巧
- 将主色保存为可复用变量。
- 在移动端、桌面端、浅色和深色模式下测试。
要避免的常见错误
- ✗仅依赖视觉外观而不测量对比度比率。
- ✗每页只测试一个组合，忘记状态（悬停、焦点、禁用）。
- ✗忽视往往最成问题的次要文本，如占位符、标题、脚注。
相关工具
常见问题
广告