工具介绍
本工具用于检测前景色与背景色的对比度,验证是否符合WCAG(Web内容无障碍指南)的可访问性标准,帮助开发者设计更友好的网页内容。
使用方法
分别输入前景色和背景色的HEX颜色代码(支持#开头的3位或6位格式,如#fff或#FFFFFF),工具会实时计算对比度并自动判断是否符合WCAG标准,同时预览两种颜色搭配的文字效果。
计算原理
对比度计算使用WCAG标准定义的相对亮度公式:
- 将HEX颜色转换为RGB分量
- 计算每个颜色的相对亮度:L = 0.2126 * Rs + 0.7152 * Gs + 0.0722 * Bs,其中 Rs/Gs/Bs 是校正后的RGB分量
- 对比度比值 = (L1 + 0.05) / (L2 + 0.05),L1是较亮颜色的相对亮度,L2是较暗颜色的相对亮度
WCAG标准说明
- AA 正文:正常大小文字要求对比度至少 4.5:1
- AA 大字:18pt以上(约24px)或加粗14pt以上(约18.5px)大字要求对比度至少 3:1
- AAA 正文:正常大小文字要求对比度至少 7:1
- AAA 大字:大字要求对比度至少 4.5:1