达不到WCAG AA级对比度（4.5:1）的文本颜色组合属功能失效，须用DevTools或WebAIM工具实测渲染后像素级对比度，禁用模糊色值与透明度，图标等非文字内容若未声明aria-hidden也需达标。
达不到 WCAG AA 级对比度（4.5:1）的文本颜色组合，屏幕阅读器无法修复，色觉障碍用户真的看不见——这不是“不够美观”，而是功能失效。
怎么快速检查当前颜色对比度是否达标
别靠眼睛猜，也别信设计稿标注。真实网页必须用工具测渲染后的像素级对比度：
- 浏览器 DevTools（Chrome / Edge）：选中文字元素 →
Computed面板 → 展开color和background-color，点击右侧色块会弹出对比度数值（显示为 “Contrast ratio: X.XX”），低于4.5就不满足 AA - 手动验证更可靠：把实际使用的十六进制值（如
#333333文字 +#ffffff背景）粘贴到 WebAIM Contrast Checker，它按 WCAG 2.1 公式计算，还区分 AA/AAA - 注意：CSS 变量、
rgba()或hsl()值会被自动转成等效#rrggbb再计算，但半透明背景叠加下层颜色时，DevTools 不自动合成——得先用工具算出最终叠加色再测
哪些颜色组合实际踩坑最多
设计师常以为“灰字配白底很安全”，但 #999999 在 #ffffff 上对比度仅 4.08，已不达标；小字号（font-size: 14px 及以下）或细字体（font-weight: 300）文本，WCAG 要求提升至 4.5:1（普通文本）或 7:1（大号/粗体可放宽到 3:1）：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
#666666+#ffffff→4.49（差 0.01，仍不合格） -
#555555+#ffffff→4.91（达标） -
#007acc（常用链接蓝）在#f8f9fa（浅灰背景）上仅3.62，必须加下划线或改深蓝（如#005a99） - 禁用状态文字（
opacity: 0.5）几乎必然失败：哪怕原色是黑，rgba(0,0,0,0.5)在白底上只剩2.2:1
CSS 里怎么写才真正可控
避免用模糊描述（如 lightgray），所有颜色必须用明确十六进制或 rgb()；对需要动态变色的组件（如主题切换），用 CSS 自定义属性 + color-contrast()（实验性，仅 Safari 16.4+ 支持）还不够稳，目前最可靠的是预设多组经过验证的配对：
立即学习“前端免费学习笔记（深入）”；
- 正文文本：固定用
#333333（非#333，后者是#333333的简写，但语义一致） +#ffffff，对比度12.3 - 次要文字（如 caption）：可用
#666666，但只用于font-size >= 18px或font-weight >= 700场景（此时只需3:1） - 链接悬停态必须比常态更高对比度，例如常态
#007acc→ 悬停改#005a99，而非仅加下划线 - 不要依赖
filter: brightness()或mix-blend-mode临时调色——它们改变视觉亮度但不改变实际色值，对比度检测工具无法识别
最易被忽略的一点：按钮内的图标（SVG / ::before 伪元素）如果使用与文字相同的颜色，且未单独声明 aria-hidden="true"，它也被视为“文本内容”，必须同样满足对比度——哪怕它只是个放大镜图形。
