对比度（最低限度）

要求内容

文本及文本图像与其背景的对比度至少须达到 4.5:1。大号文本——定义为正常字重 18pt（24px）或粗体 14pt（18.66px）——仅须达到 3:1。对比度由前景色与背景色的相对亮度计算得出。徽标、品牌名称及纯装饰性文本豁免。未激活的控件同样豁免，但需注意：该豁免范围比设计师通常理解的更窄。

如何满足

• 通过对比度检查工具（axe DevTools、WebAIM、Stark、Figma 插件）逐一检验文本与背景的组合，确保至少达到 4.5:1。
• 表单字段中的浅灰色占位符文本，相对于字段背景须至少达到 4.5:1——占位符也是文本。
• 审查图片叠加文字的英雄区域。背景颜色逐像素变化，需检查最差情况区域，或添加深色遮罩。
• 深色模式下须重新计算每一组对比度——在白色背景上通过的色彩标记，在近黑背景上往往不合格。
• 对于在白色背景上不达标的品牌色，仅在用于文本时调暗；图形仍保留原色。
• 按钮的标签与按钮背景之间的对比度才是关键——而非按钮与页面背景的对比度。

常见失败情形

• 表单字段中的浅灰色提示文本（#999 在 #fff 上 = 2.85:1）——严重不达标。
• 品牌色按钮上的白色文字，品牌色为中等饱和度（橙色、黄绿色、青色）。
• 英雄标题叠加在照片上且无遮罩——对比度因图像各处而异，常常低于 3:1。
• 占位符文本与标签同色，但字重更轻，成为页面上对比度最低的元素。
• “未激活”或”禁用”按钮按 2:1 设计，若确实不可交互则合规——但往往仍可通过 Tab 键聚焦，从而失去豁免资格。
• 深色模式色彩标记直接镜像浅色模式而未重新计算比例——#bbb on #222 接近合规但尚未达标。

为何重要

1.4.3 是 WCAG 审计中被引用次数最多的单项失败，没有例外。Lighthouse、axe、Stark 及所有自动化工具均能可靠地标记它，因此这也是最容易发现的问题。修复通常只需更改一个设计标记，即可在整个系统中级联生效——改一次、测一次、上线。忽视它几乎总是以品牌偏好换取可访问性，最终演变为投诉。