wcag aa级要求普通文本对比度≥4.5:1，大号文本≥3:1；须按(l₁+0.05)/(l₂+0.05)公式计算相对亮度比，不可凭肉眼或rgb差值判断，且placeholder、禁用按钮、伪元素等易忽略内容也需达标。
字体颜色对比直接影响文字是否可读，尤其对低视力、色觉障碍或强光/弱光环境下使用的用户。提升对比度不是“让字更醒目”，而是确保文本内容能被所有人稳定识别。
满足 WCAG AA 级最低对比度要求
正常大小文本（小于18pt或粗体小于14pt）需达到至少 4.5:1 的前景色与背景色对比度。这是可访问性的硬性门槛，不是建议值。
- 用工具实时检测：推荐 axe DevTools、WAVE 或 Contrast Checker（WebAIM）输入色值，一键验证是否达标
- 避免“灰色字配浅灰背”这类常见陷阱——看似有差别，实测常低于 3:1
- 大号文本（≥18pt 或粗体 ≥14pt）可放宽至 3:1，但不建议主动降标；搜索框内提示文字（placeholder）仍应按 4.5:1 设计，因它常被误认为不可编辑内容
别只靠颜色传递关键信息
搜索框中的状态提示（如“请输入关键词”“搜索中…”“未找到结果”）若仅用红色/绿色显示，色盲用户将无法区分。
- 错误提示除用红字外，加图标（如 ❌）、文字前缀（如“错误：”）或 aria-live 区域播报
- 成功状态不要只依赖绿色对勾，可同步显示“已提交”“共找到 12 条结果”等明确文案
- 禁用态（disabled）的搜索按钮，不能仅变灰——需配合 opacity + pointer-events: none + aria-disabled="true"
搜索框内文字的特殊处理
placeholder 文本易被忽略或误读，需特别关注其可访问性表现。
- 不要用 placeholder 替代
- placeholder 颜色对比度也需 ≥4.5:1；若背景为白色，避免使用 #999 这类浅灰，改用 #666 或更深
- 用户开始输入后，placeholder 消失是合理行为，但焦点进入时应有清晰的 outline 或 border 变化，让键盘用户感知当前操作位置
兼顾动态与响应式场景
深色模式、高对比度系统设置、缩放至 200% 等情况都会影响颜色呈现效果。
- 用 prefers-color-scheme 媒体查询适配深色模式，确保文字在黑白背景下均达标
- 避免使用 background-image 或渐变覆盖文字区域，它们会干扰对比度计算且难以控制
- 在 Windows 高对比度模式下测试：系统会强制替换网页颜色，此时应保证文字仍可读（可通过强制 outline 或 border 提升辨识度）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
