HTML怎么做颜色无障碍_html WCAG颜色对比度标准【入门】-html教程-PHP中文网

达不到wcag aa级对比度（4.5:1）的文本颜色组合属功能失效，须用devtools或webaim工具实测渲染后像素级对比度，禁用模糊色值与透明度，图标等非文字内容若未声明aria-hidden也需达标。

html怎么做颜色无障碍_html wcag颜色对比度标准【入门】

达不到 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）：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

#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 临时调色——它们改变视觉亮度但不改变实际色值，对比度检测工具无法识别