chrome/edge devtools 可直接验证文本对比度：右键检查元素→悬停文字→「辅助功能」→「对比度」查看数值与图标（✅≥4.5:1，⚠️不达标，❌未达最低）；webaim 依 wcag 公式精确计算，支持所有颜色格式及半透明提示；伪元素、svg text、禁用按钮、label 等易漏场景须手动测；js 可快速扫描全页低对比度节点，但最终以渲染像素为准。
达不到 4.5:1 对比度的普通文本，对色觉障碍或低视力用户不是“看着费劲”，而是根本看不见——这不是设计问题，是功能失效。
Chrome / Edge DevTools 里怎么一眼看出对比度是否达标
不用装插件、不写代码，直接用浏览器自带功能就能实时验证：
- 右键页面元素 → 选择「检查」，或按
F12 - 点左上角
Inspect按钮（变蓝即启用） - 鼠标悬停在文字上，弹出的覆盖层中「辅助功能」→「对比度」会显示数值和图标：
✅ 绿色勾：≥4.5:1（AA 普通文本）
⚠️ 橙色感叹号：不达标
❌ 红色圆圈划掉：连最低要求都未达到 - 点击
color属性旁的色块，在 Color Picker 中展开「对比度」区域，还能看到背景色合成后的实际值——这对rgba()或opacity场景特别关键
WebAIM Contrast Checker 为什么比肉眼判断更可靠
它不依赖渲染效果，而是严格按 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></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 和 <h1></h1>，却漏掉这些真实可读内容：
-
::before/::after伪元素里的文字（如content: "必填"），DevTools 不默认展开，WebAIM 也无法自动抓取 -
<svg></svg>内的<text></text>元素，fill和stroke都要单独验；纯装饰性 SVG 必须加aria-hidden="true"，否则会被当成可读文本计入 - 按钮禁用态（
:disabled）常设opacity: 0.5，哪怕文字原色是黑，在白底上也只剩约2.2:1，远低于要求的3:1（UI 组件最低标准） - 表单
<label></label>的颜色若被自定义覆盖，且字体小于18px，就必须满足4.5:1，不能因“只是标签”就跳过
用 JavaScript 快速扫出全页低对比度节点
不需要引入 axe-core，几行代码就能定位高风险元素：
function checkContrast(el) {
const s = getComputedStyle(el);
const fg = tinycolor2(s.color).toRgb();
const bg = tinycolor2(s.backgroundColor).toRgb();
return tinycolor2(fg).getContrastRatio(bg) {
if (checkContrast(el)) console.warn('低对比度:', el);
});
注意：tinycolor2 能正确解析 currentcolor、hsl()、命名色（如 darkblue），比正则提取 getComputedStyle().color 更稳；但别忘了手动 include 它的 CDN 或打包进项目。
最易被忽略的一点：对比度检测永远以「最终渲染像素」为准。CSS 变量、filter、mix-blend-mode 都会欺骗人眼，但不会改变色值本身——工具测不出来，用户就读不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
