无障碍色彩设计不是限制创意,而是让更多人能够欣赏你的设计。全球约有3亿色觉障碍者,为他们的体验考虑是设计师的责任。
WCAG标准速览
WCAG 2.1定义了三个无障碍等级:
- A级(最低):基本无障碍要求
- AA级(推荐):大多数网站应达到的标准
- AAA级(最高):最严格的无障碍标准
色彩对比度要求
AA级要求:
- 普通文本(小于18px):对比度不低于4.5:1
- 大文本(大于等于18px加粗或24px):对比度不低于3:1
- UI组件和图形对象:对比度不低于3:1
不止于对比度
色彩不应是传达信息的唯一方式。图标、文字标签、下划线等辅助手段同样重要。错误提示不应仅依赖红色边框。
色盲友好的色彩选择
避免仅用红色和绿色来区分重要信息(如正确/错误)。蓝-黄、蓝-橙组合对色盲用户更友好。
工具推荐
使用Color Review、Who Can Use、Stark等工具检测设计的无障碍表现。在项目初期就融入无障碍思考,事半功倍。