WCAG 颜色对比度检测器是一个双输入框工具. 页面有一个前景色框和一个背景色框, 各带一个取色器和一个文本框, 下方是结果: 一个实时预览, 一个对比度比率, 一排四个通过/未达标卡片. 没有运行按钮, 也没有任何可配置项; 改动任意一个颜色, 所有数字都在同一按键上更新. 什么都不发送到任何地方: 亮度计算在设备的浏览器里运行.
两个颜色输入与实时预览
前景是文字颜色, 背景是它后面的颜色, 默认是白底黑字, #000000 叠在 #FFFFFF 上. 每个框接受三位十六进制如 #F00, 也接受六位如 #767676, 开头的井号可省略, 所以 000000 与 #000000 解析结果相同. 每个框旁边有一个取色器, 点它会自动填好文本框. 两个颜色都有效时, 结果区出现: 一个用所选颜色对在三种字号下渲染示例文本的预览, 比率, 和四个 WCAG 卡片. 任何一个框里不是三或六位的十六进制, 整个结果区直接消失, 而不是给出一个猜测值.
对比度比怎么算
工具遵循标准 WCAG 公式. 每个十六进制颜色先转成 0 到 255 的红绿蓝值, 每个通道从 sRGB 曲线线性化, 再用系数 0.2126(红), 0.7152(绿), 0.0722(蓝)加权成一个相对亮度. 比率是较亮的亮度加 0.05 除以较暗的亮度加 0.05, 所以结果至少是 1, 最大不超过 21, 即纯黑与纯白之间的差距. 数字显示两位小数, 后面跟冒号和 1, 所以白底黑字读作 21.00:1, 同色叠同色读作 1.00:1. 比率与哪个颜色叫前景无关: 交换两个框得到同样的数字.
四个固定阈值与边界值
四个卡片把比率对照四个固定下限判定: AA 正常文本 4.5:1, AA 大字 3:1, AAA 正常文本 7:1, AAA 大字 4.5:1, 每张卡片在判定下方标出它的下限. 边界是含的, 恰好落在下限上算通过. 实践中常碰到的值: #767676 在白底上是 4.54:1, 通过 AA 正常; #777777 在白底上是 4.48:1, 未达标, 与通过线只差一个十六进制步长. #808080 在白底上是 3.95:1, 只有大字通过; #595959 在白底上是 7.00:1, 四张卡片全过, 包括 AAA 正常.
大字标准: 3:1 和 4.5:1 两张卡片怎么读
WCAG 意义下的大字是至少 18 磅常规或 14 磅粗体, 大约相当于 24px 常规或 19px 粗体. 工具不测量字号, 也没有字号输入; 它总是算出全部四个判定, 所以读结果分两步. 先看四张卡片, 再判断你的设计实际用哪种文本尺寸: 如果是大字, 适用的是 3:1 和 4.5:1 两张大字卡片; 如果是正常尺寸, 适用的是 4.5:1 和 7:1 两张正常卡片. 比如 4:1 的比率, 通过 AA 大字卡片, 未达 AA 正常, 两张 AAA 也都不过.
边界情况: 无效十六进制与同色
解析器在去掉一个开头井号后只接受三位或六位十六进制, 其余一律隐藏结果: 五位, 带 alpha 通道的八位, 以及非十六进制字母, 都会让页面只剩两个输入框. 前景与背景同色得到 1.00:1, 四张卡片全未达标, 这是文字与背景同色时诚实的判定. 大写小写十六进制同等对待, 三位简写会逐位展开, 所以 #F00 就是 #FF0000. 结果区没有验证提示, 隐藏是唯一的信号, 卡片不见了时值得知道这一点.
纯客户端, 不存储任何东西
两个十六进制值从不离开浏览器. 没有提交, 没有历史, 没有保存的颜色对, 也没有复制按钮; 计算是两个当前输入的纯函数, 重新加载页面回到白底黑字默认值. 两个框之间也没有交换控件, 反转一对颜色要重输两个值, 更没有建议引擎告诉你最近的达标颜色: 工具报告比率和四个判定, 调整是你自己的事.
工具保留什么, 以及下一步去哪
不保留任何东西: 不发网络请求, 不存储, 重新加载把两个框重置为 #000000 和 #FFFFFF. 颜色与 CSS 工作流的其余部分, 用颜色转换器在十六进制, RGB 和 HSL 之间互转一个颜色值, 用CSS 单位转换器在 px, rem, em, pt 之间换算, 好把你的字号对照大字线, 用CSS 格式化整理承载这些颜色的样式表. 想看同一页面标记侧的更大图景, 见HTML 格式化指南.