WCAG(Web Content Accessibility Guidelines)定义了颜色对比度标准,确保低视力用户也能清晰阅读内容:
AA级(最低要求):普通文本 ≥ 4.5:1,大文本(≥18pt或≥14pt粗体) ≥ 3:1
AAA级(增强要求):普通文本 ≥ 7:1,大文本 ≥ 4.5:1
对比度比率范围从1:1(完全相同)到21:1(黑白对比)。
颜色对比度衡量前景色(文本)和背景色之间的亮度差异,用比率表示(如4.5:1)。比率越高,文字越容易阅读。低对比度对视力障碍用户、老年用户或在强光下使用设备的用户会造成阅读困难。
政府网站、公共服务平台、电商网站、教育平台等通常强制要求AA级标准。许多国家的法律法规要求公共网站满足WCAG 2.1 AA级。AAA级是更高标准,建议尽可能达到。
提高对比度的方法:1) 使用更暗的文本颜色(接近#000);2) 使用更亮的背景颜色(接近#FFF);3) 避免浅灰配白色或深灰配黑色;4) 使用本工具测试调整后的方案。
大文本(≥18pt或≥14pt粗体)更易阅读,因此对比度要求较低。小文本需要更高的对比度才能保证清晰可读。这是WCAG根据视觉科学研究的合理设计。
使用WCAG 2.1定义的相对亮度算法,基于sRGB色彩空间的线性化计算。该算法考虑了人眼对不同颜色的感知差异(如对绿色更敏感),是国际公认的标准计算方法。
纯前端应用,加载后断开网络也能正常使用。所有计算在浏览器本地完成。