技术原理:
前景色(文本/图形)与背景色之间的亮度差异值
量程范围:
1:1
(相同颜色)至 21:1
(黑白极端对比)
核心价值:
保障弱视、色盲及视觉感知障碍用户的可读性
WebAIM 对比度检查器
(实时输入色值生成报告)
UseContrast 智能检测工具
(自动扫描页面并标记问题区域)
Colour Contrast Checker
(支持透明度与渐变背景检测)
设计阶段:
使用内置颜色样式库确保配色方案预设合规
开发阶段:
在属性面板实时预览文本与背景组合
发布前:
用上述工具全站扫描(尤其深色/浅色模式切换处)
遵循对比度标准可提升:
♿ 30%+ 视觉障碍用户操作成功率
📈 22% 页面平均停留时长(来源:WebAIM 2023)