文本与背景对比度不足会直接导致部分用户无法阅读，wcag强制要求普通文本至少达4.5:1、大号文本3:1；须用开发者工具或webaim等工具实测，禁用肉眼判断和模糊色值，所有文字与背景色需显式声明并动态验证。
文本与背景对比度不够，不是“看起来有点费劲”，而是直接让部分用户无法阅读——尤其在强光下、小字号或视力弱化场景中，4.5:1 是 WCAG 强制要求的底线，低于它，你的页面在法律和可访问性层面都已失格。
怎么快速判断当前对比度是否达标
别靠肉眼猜，也别信“我觉得还行”。浏览器开发者工具里点开颜色拾取器（Chrome 中长按 color 值），会直接显示当前组合的对比度比值；更稳妥的是用 WebAIM Contrast Checker 手动输入 #333333 和 #ffffff 这类十六进制色值，它会标出是否满足 4.5:1（普通文本）或 3:1（大号/粗体文本）。
- 常见翻车组合：
#999999文字配#f5f5f5背景 → 实测仅约2.8:1，不达标 - 深灰文字推荐用
#333333或更保守的#222222，不是为了“更黑”，而是确保在各类屏幕（尤其OLED）上不发灰 - 浅色背景别用纯白
#ffffff以外的“近白”色，比如#fefefe或#f8f8f8，它们和多数灰色文字一配就掉到4.0:1以下
CSS里怎么写才真正可控
靠继承或浏览器默认色极其危险——body { color: inherit; } 在某些组件里会意外变成浅灰，background: transparent 更是埋雷。必须显式声明：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有文字色统一走变量或固定值，例如
color: #333333;，禁用color: gray;这类语义模糊的关键字 - 背景色同样要写死，
background-color: #ffffff;比background: white;更可靠（后者在部分旧浏览器里可能被解析为#ffffff，也可能不是） - 暗黑模式切换时，别只改
background-color，务必同步调高文字亮度，比如从#333333切到#e0e0e0，否则深背景+深字 = 彻底不可读 - 按钮、链接等交互元素的文字对比度也要单独验，
a { color: #005a9e; }在白色背景上虽达标，但在卡片浮层（#f9f9f9）上可能崩到3.2:1
为什么用工具扫出“对比度警告”却找不到问题元素
因为问题常藏在动态生成内容里：伪元素 ::before 插入的图标文字、JS 渲染的提示文案、第三方 SDK 注入的 banner 文案——这些都不会出现在初始 HTML 中，但 Lighthouse 或 axe 扫描时会抓到它们的最终渲染态。
- 检查控制台报错里是否含
axe-core提示的color-contrast失败项，它会给出具体 DOM 路径 - 用 Chrome 的
Rendering面板开启Emulate vision deficiencies，选deuteranopia或grayscale，能直观看到哪些区域“糊成一片” - 特别注意表单错误提示：
.error-message { color: #cc0000; }配浅红背景时极易低于4.5:1，建议统一用深红#b30000+ 白底
对比度不是“调完一次就完事”的样式参数，它是嵌在每一处文字渲染路径里的约束条件——哪怕一个 span 是 JS 动态插入的，它的 color 和父级 background-color 仍必须实时满足 4.5:1。漏掉任意一个角落，都可能让真实用户卡在注册页、读不懂价格说明，或者根本没意识到自己错过了关键信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
