很多界面在设计师高亮度 Retina 屏幕上看起来很“轻”，换到普通办公显示器、户外手机或视力下降用户那里，次级文字已经接近消失。WCAG 的对比要求不是限制审美，而是在给信息可读性设置最低安全线。
01 普通文字 4.5:1，大文字 3:1，是 WCAG 2.2 AA 的基础线
W3C 当前 WCAG 2.2 Understanding 文档规定，普通文字与背景至少 4.5:1；大字号文字至少 3:1。
这些是阈值，不应四舍五入。4.49:1 不能因为“差不多”就按 4.5:1 通过。
02 大文字的判断不是“看起来挺大”
WCAG 解释中大字号通常对应 18pt 普通或 14pt 粗体，约等于 24px 和 18.5px 的 CSS 尺寸参考。
字体很细时，即使数学上达标，实际渲染也可能更难读，因此设计最好留出余量。
03 Placeholder 和 Hover/Focus 里出现的文字同样需要可读
有些设计把输入提示做成极浅灰，认为只是辅助信息。W3C 明确说明 Placeholder 以及 Hover/Focus 时出现的文本也属于对比要求范围。
如果输入格式非常重要，更不应把唯一说明放在低对比 Placeholder 中。
04 品牌色不天然适合作为文字色
明亮黄色、荧光绿在白底上作为大面积品牌块很醒目，却可能不适合小字号链接和按钮文字。
设计系统可以为品牌色建立 on-brand、text-link 等专门 Token，而不是任何场景都直接使用 Brand-500。
05 图片和渐变上的文字要按最差背景区域检查
一张 Hero 照片左边很暗、右边很亮，文字移动几个像素对比就完全不同。可以增加稳定遮罩、实色文本容器或限制图片安全区域。
不要依赖“这张示例图刚好能看清”，因为 CMS 下一张图片可能完全不同。
06 禁用态是例外，但不能因此做成无法理解
WCAG 对 inactive UI component 有对比例外，但用户仍需要理解功能存在以及为什么不可用。
最佳实践不应只追求最低合规。过浅 Disabled 文本可能让低视力用户连选项都不知道存在。
07 不要只靠颜色区分错误、状态和图表
红绿代表涨跌、绿色/灰色代表已选/未选，对色觉差异用户可能不够。
配合图标、标签、形状、箭头和文字，既提高无障碍，也让所有用户在复杂环境更快理解。
08 把对比检查放进 Token 和组件阶段，而不是上线前扫页面
如果 text-secondary 本身就不达标，几十个页面都会重复问题。设计系统应该在颜色组合层预先验证。
上线前自动扫描只能发现部分技术问题，设计阶段建立安全组合才能真正降低修复成本。
09 设计系统应把对比度检查前移到 Token 层
如果每个页面都让设计师单独检查灰字和背景，错误会不断重复。更有效的做法是给 text-primary、text-secondary、surface、border、interactive 等语义 Token 预先验证常见组合。
这样品牌换肤时也能集中测试，而不是等几十个页面完成后再发现辅助文字在新背景上整体不达标。
10 真实对比度还受透明度、图片和状态叠加影响
设计稿中的纯色十六进制值可能达标，但实现后文字带 60% opacity、背景有渐变或图片，最终对比度就会变化。Hover、Disabled、Overlay 和深色模式也需要分别检查。
无障碍验收应该基于最终渲染状态，而不是只在设计 Token 表里看两个颜色值。
常见问题
WCAG AA 普通文字最低对比是多少？
4.5:1；大字号文字最低 3:1。
Logo 也必须达到 4.5:1 吗？
WCAG 对作为 Logo/品牌名的文字有例外，但如果 Logo 同时承担交互控件功能仍应考虑可用性。
禁用按钮可以低对比吗？
规范有例外，但设计仍应保持可识别并解释不可用状态。
设计工具算出来 4.49 可以按 4.5 吗？
不可以。W3C 明确说明阈值不能通过四舍五入满足。
黑色一定是最可读文字吗？
不一定需要纯黑，关键是与背景有足够对比并兼顾长期阅读舒适度。
相关服务与进一步咨询
链接复制成功
