推荐资源
即梦AI
抖音出品 AI视频图片生成
Envato Elements
无限下载设计素材与模版
Eagle
图片素材文献管理神器
Setapp
畅享240+款Mac优质应用
无障碍设计 (a11y)
对比度检测工具
计算前景文本与背景颜色的对比度比率，确保您的设计符合 WCAG 2.1 无障碍标准，提升内容可读性。
对比度比率
0:1
未通过未通过AA 普通文本
未通过AA 大型文本
未通过AAA 普通文本
未通过AAA 大型文本
视觉预览
无障碍设计至关重要
这是一段普通的正文文本。对比度足够高的文字能让所有用户（包括视力受损人群）轻松阅读。 在设计网页时，请务必关注 WCAG 标准。
这是一段小号辅助文本 (Small Text)。通常需要更高的对比度才能保证清晰。
什么是 WCAG 对比度？
WCAG (Web Content Accessibility Guidelines) 是由 W3C 发布的网页内容无障碍指南。 其中，色彩对比度是衡量文本可读性的核心指标。如果文字与背景的颜色过于接近， 不仅视力障碍用户无法阅读，普通用户在强光、低亮度屏幕或使用旧显示器时也会感到吃力。
标准解读
Level AA (最低标准)
- • 普通文本：比率 ≥ 4.5:1
- • 大型文本 (18pt+ 或 14pt粗体)：比率 ≥ 3:1
Level AAA (增强标准)
- • 普通文本：比率 ≥ 7:1
- • 大型文本：比率 ≥ 4.5:1
高对比度对谁有帮助？
👨🦳 老年人群
随着年龄增长，人眼对对比度的敏感度会下降。清晰的对比度设计能帮助老年人更好地获取信息。
👁️ 视障人士
色盲、弱视用户依赖亮度差异来识别内容。高对比度是他们能否使用产品的决定性因素。
☀️ 户外用户
在强烈的阳光直射下，手机屏幕的可读性会大幅降低。高对比度设计能有效对抗环境光干扰。
设计师自查清单
- 正文内容： 确保大段文字使用深灰色或黑色，避免使用浅灰。
- 按钮文字： 检查彩色按钮上的白字是否清晰，如果不达标，尝试加深按钮背景色。
- 表单占位符： Placeholder 颜色常被设得太浅，建议加深至 #71717a (Slate 500) 以上。
- 图表颜色： 确保图表中的色块即使在黑白模式下也能通过明暗度区分。
常见问题
Logo 设计必须符合对比度要求吗？
不强制。WCAG 标准主要针对作为内容的文本（如正文、标题、按钮）。纯装饰性元素或品牌 Logo 不在强制范围内，但为了品牌识别度，依然建议保持良好对比。
什么是“大型文本”？
在 Web 开发中，通常指大于 18pt (约 24px) 的普通文本，或大于 14pt (约 18.66px) 且加粗的文本。这些大字号在较低对比度下依然较易阅读，因此标准稍宽。
纯黑色 (#000000) 是最好的文本颜色吗？
不一定。纯黑底白字或纯白底黑字的对比度极高（21:1），虽然符合标准，但可能导致长时间阅读后的视觉疲劳（光晕效应）。推荐使用深灰色（如 #111827）来代替纯黑。
专注白噪音
雨声Lofi，为设计提供完美背景音。
精选神器
AD
阿里云
爆款云服务器特惠抢购
腾讯云
云产品特惠 性价比首选
腾讯元宝
免费DeepSeek AI助手
小绿鲸
英文文献阅读 科研必备
ADVERTISEMENT