什么是WCAG？
Web内容无障碍指南（WCAG）是使Web内容对残障人士无障碍的国际标准。颜色对比度是关键组成部分。
为什么颜色对比度很重要
285M
全球有2.85亿人患有视力障碍
8%
8%的男性患有某种形式的色盲
☀
对比度差会影响所有人的可读性，尤其是在明亮环境中
WCAG对比度要求
AA
AA（最低）
普通文本4.5:1
大号文本3:1
UI组件3:1
AAA
AAA（增强）
普通文本7:1
大号文本4.5:1
UI组件3:1
什么是「大号文本」？
• 至少18pt常规字重• 至少14pt粗体字重
常见对比度错误
Aa
白色背景上的浅灰色
难以阅读
使用更深的灰色（至少#595959）
Aa
品牌色对比度低
不符合无障碍标准
创建无障碍替代方案
Aa
仅用颜色传达含义
色盲用户会错过信息
添加文本标签或图案
Aa
占位符文本太浅
用户看不到表单提示
为占位符使用足够的对比度
无障碍颜色快速技巧
- 1从足够的对比度开始——不要试图事后修复
- 2与真实用户测试——包括视力障碍人士
- 3不要仅依赖颜色——使用图标、文本或图案
- 4考虑所有状态——悬停、聚焦、禁用状态也需要对比度
- 5记录您的颜色系统——将无障碍作为设计系统的一部分