颜色对比度必须满足WCAG AA级最低要求：普通文本4.5:1、大号文本3:1，需用工具精确验证而非目测；禁止单靠颜色传递信息，须叠加图标/文字等非颜色线索；暗色模式与opacity使用需重新校验对比度。
颜色对比度必须满足 WCAG AA 级最低要求
纯靠“看着顺眼”选色是最大的隐患。WCAG 2.1 明确规定：普通文本与背景的对比度至少要达到 4.5:1，大号文本（≥18pt 或加粗 ≥14pt）可放宽至 3:1。低于这个值，色觉正常但视力偏弱的用户（比如中老年人）就可能读不清文字。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别依赖人眼判断——用
colord("#333").contrast("#f0f0f0")这类工具算出精确比值，而不是凭感觉说“应该够了” - 避免在 CSS 中硬编码十六进制色值后就不管：比如
color: #6c757d搭配background-color: #ffffff，实际对比度只有约4.1:1，不达标 - 深灰文字（如
#495057）配浅灰背景（如#f8f9fa）极易踩坑，务必验证
禁用纯色块做信息载体，尤其避开红/绿单色指示
约 8% 的男性存在红绿色觉缺陷，仅靠颜色区分状态（比如“红色=错误，绿色=成功”）会让这部分用户完全丢失语义。CSS 中写 border-color: red 表示报错，但没辅以图标、文字或纹理，就是典型的 a11y 缺陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有状态类必须叠加非颜色线索：例如
.error除了color: #dc3545，还得加border-left: 4px solid #dc3545+background-image: url("icon-error.svg") - 不要用
color单独控制图标含义；SVG 图标应带aria-hidden="true"，并由相邻文字或aria-label说明意图 - 表单验证提示不能只靠颜色变化，必须同步更新
aria-live区域或插入可见错误文本
暗色模式下需重新校验所有颜色组合
很多人以为“深色主题 = 把背景变黑、文字变白”就万事大吉。实际上，#000000 和 #ffffff 的对比度是 21:1，看似完美，但真实场景中常因阴影、半透明层、渐变或图片叠加导致局部对比度暴跌——比如卡片背景用 rgba(255, 255, 255, 0.05) 叠在黑色上，文字立刻糊成一片。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 明暗两套主题的颜色变量必须独立测试，不能简单反转亮度：例如暗色模式下
--text-primary推荐用#e9ecef而非#ffffff，更护眼且仍满足4.5:1 - 避免在暗色背景下使用过亮的强调色（如
#ff0000），它会产生眩光效应，反而降低可读性；改用饱和度稍低的#e53e3e更稳妥 - 检查所有伪元素生成的内容（如
::placeholder、::selection），它们在暗色模式下常被忽略，容易出现color: #999配background: #1a1a1a这种仅3.2:1的危险组合
慎用 opacity 控制文字可见性
opacity: 0.7 是重灾区。它会等比降低前景色和背景色的相对亮度，直接拉低对比度——哪怕原始组合达标，加 opacity 后也可能跌破 4.5:1。更糟的是，部分屏幕阅读器会跳过 opacity: 0 元素，但 opacity: 0.01 却仍被渲染为不可读的灰影，形成“看不见却占位”的陷阱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 需要弱化文字时，优先用
color: #6c757d（明确指定低对比色）而非opacity: 0.7；前者可控，后者破坏对比计算逻辑 - 绝对不要对整个容器设
opacity来实现“禁用态”，应改用pointer-events: none+aria-disabled="true"+ 显式灰阶文字色 - 动画中避免在关键文本上做 opacity 过渡；若必须淡入，确保起始态和终止态都单独通过对比度校验
postcss-contrast 跑一遍，或者把 colord().isReadable() 写进组件单元测试里。否则，再漂亮的调色板，也可能在某个夜间模式+弱视用户+老旧屏幕的组合下彻底失效。 
