wcag aa级对普通文本的对比度要求是≥4.5:1，须用devtools等工具实测渲染后像素级颜色，如#666666配#ffffff实测仅4.49:1即不达标；背景含透明度时需手动合成再测，禁用模糊值和动态调色。
直接测，别猜。WCAG AA级对普通文本的对比度要求是≥4.5:1，这个数值必须用工具实测渲染后像素级颜色，#666666配#ffffff看着灰但实际只有4.49——差0.01就不达标。
DevTools里怎么快速验证真实对比度
Chrome / Edge 的 DevTools 是最快验证方式，但它只在你选中**已渲染的文本元素**时才生效：
- 右键目标文字 → “检查”打开 Elements 面板
- 切换到 Computed 标签页 → 展开
color和background-color - 点击右侧色块图标，弹出窗口会显示
Contrast ratio: X.XX（如Contrast ratio: 4.91） - 注意：如果背景含
opacity、rgba()或叠加图层，DevTools 不自动合成，得先手动算出最终背景色再测
哪些十六进制组合真正稳过4.5:1（小字号/常规粗细）
设计师常误信“浅灰安全”，但实测暴露大量临界失败。以下组合经 WebAIM Contrast Checker 验证（sRGB，无透明度）：
-
#333333+#ffffff→ 12.3:1（正文首选，不挑字体大小） -
#555555+#ffffff→ 4.91:1（可用，但禁用于font-size: 12px或font-weight: 300） -
#005a99+#f8f9fa→ 4.52:1（替代常用链接蓝#007acc，后者在此背景上仅3.62） -
#222222+#f5f5f5→ 4.57:1（适合浅灰背景系统，比纯白更柔和）
禁用所有模糊值：lightgray、grey、rgba(0,0,0,0.6) —— 它们无法被工具稳定识别，且极易跌破阈值。
CSS里怎么写才能避免动态失效
主题切换或组件复用时，靠 JS 计算颜色或 CSS color-contrast()（仅 Safari 16.4+）风险太高。目前最可靠的是预设硬编码配对：
- 正文文本统一用
color: #333333，背景固定为background-color: #ffffff或#f5f5f5 - 次要文字（如 caption）若需更轻，只允许在
font-size: 18px或font-weight: 700场景下用#666666（此时 WCAG 只要求 3:1） - 禁用
filter: brightness()、mix-blend-mode调色——它们改视觉亮度但不改真实色值，对比度工具完全无视 - SVG 图标或伪元素图标，若颜色与文字一致，必须显式加
aria-hidden="true"，否则它也被纳入对比度检测范围
最容易被跳过的点：按钮里的图标不是“装饰”，只要没声明 aria-hidden="true"，它和文字一样要单独满足 3:1 对比度；而禁用态按钮若只靠 opacity: 0.5，几乎必然掉到 2.x:1，必须换真色值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
