普通文本对比度必须≥4.5:1，否则对色觉障碍或低视力用户功能失效；Chrome/Edge DevTools可实时检测，WebAIM更精准支持半透明、小字号等边界场景，并强制验证label、禁用按钮、伪元素等易忽略内容。
普通文本必须≥4.5:1，低于这个值不是“看着费劲”，而是对色觉障碍或低视力用户功能失效——别信肉眼判断，必须用工具测渲染后的真实像素值。
Chrome / Edge DevTools 怎么一眼看出对比度是否达标
不用装插件、不写代码，浏览器自带功能就能实时验证：
- 右键页面文字 → 选择「检查」（或按
F12） - 鼠标悬停在已渲染的文字上，弹出覆盖层 → 点「辅助功能」→「对比度」
- 看到
Contrast ratio: X.XX和图标：✅≥4.5:1（AA 达标），⚠️不达标，❌连最低要求都未达到 - 点击
color或background-color属性旁的色块，在 Color Picker 中展开「对比度」区域，能看见背景合成后的实际值——这对rgba()、opacity或多层叠加场景特别关键
WebAIM Contrast Checker 为什么比 DevTools 更可靠
DevTools 只显示当前渲染结果，但 WebAIM 是按 WCAG 2.1 公式 (L1 + 0.05) / (L2 + 0.05) 精确计算相对亮度比，且处理边界情况更严谨：
- 支持所有 CSS 颜色格式：
#333333、rgb(51, 51, 51)、hsl(0, 0%, 20%)，自动归一化转换 - 遇到半透明背景（如
background-color: rgba(255, 255, 255, 0.8)）会明确提示「背景为半透明，对比度无法精确计算」，逼你手动算出叠加后的真实背景色再测 - 小字号（
font-size: 14px）或细字重（font-weight: 300）必须满足 4.5:1，它会按 AA 标准标红不达标的组合，比如#666666在#ffffff上是4.49:1——差 0.01，仍 Fail
哪些地方最容易被忽略但必须测对比度
很多团队只测 <p> 和 <h1>，却漏掉这些真实可读内容：
立即学习“前端免费学习笔记（深入）”；
-
<label>文本（尤其表单中与输入框关联的 label） - 禁用按钮（
button[disabled]）里的文字，若仅靠opacity: 0.5，实测常跌到2.2:1 -
::before/::after伪元素生成的文字（如「* 必填」提示） - SVG 中的
<text>元素，即使颜色和父级文字一致，也需单独达标 - 图标（SVG path 或字体图标）若未声明
aria-hidden="true"，且颜色与文字相同，会被视作可读内容纳入检测范围
真正难的不是工具使用，而是意识到：对比度不是设计环节的“附加项”，而是组件实现时必须硬编码的约束。比如 color: #666666 看似安全，但在 font-size: 13px 下就是功能缺陷；又比如主题切换时动态计算颜色，目前没有跨浏览器稳定的方案，最稳妥的做法仍是预设几组经 WebAIM 验证的配对，并在 CI 流程中用 axe-core 扫描全站低对比度节点。
