首页 / 无障碍自检报告

无障碍自检报告

每一套配色在上线前都跑过同一套检查:正文与背景的对比度是否达到 WCAG AA,主色在背景上是否够辨识,以及在红绿色盲视角下是否还能区分。这里公开全部结果。

总览

82配色总数
82/82全部通过正文级校验
12.96:1最低正文对比度
3.00:1最低主色对比度
1色盲提示

1 套配色的功能色在红绿色盲视角下容易混淆,已逐条列出替代方案

  • 麦冬青WEB 端 · Primary / Accent· 绿色盲· 色差 7

每套配色的无障碍检查结果

每套配色的无障碍检查结果
配色端正文在背景上主色在背景上色盲友好
潮光青小程序端12.96:1AAA3.67:1AA良好
旧金箔APP 端13.34:1AAA3.45:1AA良好
陶野青WEB 端13.34:1AAA6.56:1AAA良好
雾瑰灰APP 端13.49:1AAA3.48:1AA良好
暖玉黄WEB 端13.49:1AAA3.45:1AA良好
墨野青APP 端13.99:1AAA3.72:1AA良好
稻穗黄WEB 端14.00:1AAA3.72:1AA良好
宣纸黄小程序端14.14:1AAA3.06:1AA良好
酥油黄小程序端14.14:1AAA3.26:1AA良好
榆荫绿小程序端14.15:1AAA4.23:1AA良好
草原绿APP 端14.16:1AAA4.31:1AA良好
青瓦绿APP 端14.16:1AAA3.38:1AA良好
苔痕绿WEB 端14.16:1AAA3.50:1AA良好
麦冬青WEB 端14.16:1AAA3.39:1AA注意
薄荷绿小程序端14.16:1AAA3.40:1AA良好
青苹绿小程序端14.18:1AAA3.07:1AA良好
水杉绿小程序端14.19:1AAA3.75:1AA良好
苍山绿APP 端14.20:1AAA3.96:1AA良好
松林绿APP 端14.23:1AAA3.84:1AA良好
焙茶橙APP 端14.27:1AAA3.10:1AA良好
冷泉青WEB 端14.27:1AAA3.20:1AA良好
蜜橘橙APP 端14.30:1AAA5.13:1AAA良好
晨雾青WEB 端14.35:1AAA3.32:1AA良好
蓝染缬APP 端14.41:1AAA4.72:1AAA良好
陈皮橙WEB 端14.41:1AAA3.09:1AA良好
松烟蓝WEB 端14.41:1AAA5.72:1AAA良好
织锦蓝WEB 端14.41:1AAA5.42:1AAA良好
暖阳橙小程序端14.41:1AAA3.09:1AA良好
雪岭蓝小程序端14.41:1AAA3.71:1AA良好
茶饮绿小程序端14.45:1AAA3.19:1AA良好
焦糖橙APP 端14.54:1AAA6.55:1AAA良好
榛果橙WEB 端14.54:1AAA5.16:1AAA良好
海雾蓝WEB 端14.54:1AAA3.46:1AA良好
林檎红小程序端14.54:1AAA3.40:1AA良好
桃花粉WEB 端14.63:1AAA5.26:1AAA良好
木槿粉小程序端14.63:1AAA3.25:1AA良好
紫薇粉小程序端14.65:1AAA3.31:1AA良好
胭脂粉WEB 端14.66:1AAA4.14:1AA良好
桃夭粉小程序端14.66:1AAA3.75:1AA良好
芙蓉粉小程序端14.66:1AAA5.58:1AAA良好
霜叶丹APP 端14.67:1AAA3.51:1AA良好
榴火红WEB 端14.67:1AAA5.80:1AAA良好
烟粉砂WEB 端14.67:1AAA3.72:1AA良好
砖瓦红小程序端14.67:1AAA4.67:1AAA良好
深潭蓝APP 端14.68:1AAA4.14:1AA良好
寒星蓝WEB 端14.68:1AAA7.35:1AAA良好
靛蓝调小程序端14.68:1AAA5.88:1AAA良好
窑变红APP 端14.69:1AAA6.42:1AAA良好
醉棠粉APP 端14.69:1AAA3.31:1AA良好
芍药粉小程序端14.69:1AAA4.76:1AAA良好
山楂红APP 端14.70:1AAA3.00:1AA良好
丹枫红小程序端14.70:1AAA4.38:1AA良好
葡萄紫APP 端14.72:1AAA5.03:1AAA良好
雾霭紫APP 端14.72:1AAA5.93:1AAA良好
暮山紫APP 端14.72:1AAA4.16:1AA良好
夜潮蓝WEB 端14.72:1AAA11.84:1AAA良好
暮云紫WEB 端14.72:1AAA8.05:1AAA良好
青金蓝WEB 端14.72:1AAA6.81:1AAA良好
石楠紫WEB 端14.72:1AAA4.29:1AA良好
落葵紫WEB 端14.72:1AAA9.08:1AAA良好
烟紫砂WEB 端14.72:1AAA5.98:1AAA良好
湖心蓝小程序端14.72:1AAA6.61:1AAA良好
夜昙紫小程序端14.72:1AAA5.16:1AAA良好
凝霜紫小程序端14.72:1AAA8.45:1AAA良好
锦葵紫APP 端14.76:1AAA6.34:1AAA良好
风信紫APP 端14.76:1AAA8.78:1AAA良好
藤萝紫WEB 端14.76:1AAA4.34:1AA良好
檀紫砂小程序端14.76:1AAA10.21:1AAA良好
青莲紫小程序端14.76:1AAA8.42:1AAA良好
初雪蓝APP 端14.85:1AAA9.10:1AAA良好
窑青蓝小程序端14.85:1AAA9.01:1AAA良好
山茶红APP 端15.06:1AAA3.90:1AA良好
暖橙屿APP 端15.08:1AAA3.33:1AA良好
美妆粉小程序端15.08:1AAA3.12:1AA良好
商务蓝小程序端15.28:1AAA4.52:1AAA良好
墨蓝夜APP 端15.29:1AAA5.56:1AAA良好
宠物紫小程序端15.38:1AAA4.42:1AA良好
生鲜橙小程序端15.51:1AAA3.60:1AA良好
麦糖金WEB 端15.55:1AAA3.20:1AA良好
暗夜紫WEB 端16.19:1AAA7.06:1AAA良好
朱墨红WEB 端17.80:1AAA5.71:1AAA良好
静湖蓝WEB 端17.85:1AAA5.17:1AAA良好

判定口径

正文对比度按 WCAG 2.1 AA 的 4.5:1 判定;主色在背景上按 3:1 判定(用于按钮、链接等非正文元素)。两项目标来自生成时的同一套质量闸门。

「色盲友好」检查功能色(成功 / 警告 / 危险,或小程序的价签 / 主色)在红绿色盲视角下两两之间的色差是否足够。标记为「注意」不代表不可用,而是提醒别只靠颜色传达状态,最好再配图标或文字。

数据在构建时算好并静态写入页面,因此本页无需 JavaScript 即可阅读,也方便被搜索与抓取。

我们怎么做的

对比度用的是 WCAG 官方口径:先把 sRGB 通道线性化,按 0.2126 / 0.7152 / 0.0722 加权求相对亮度,再用 (L1 + 0.05) / (L2 + 0.05) 得到比值。这个公式与浏览器 devtools 里看到的一致。

色盲模拟用 Viénot / Brettel 线性 RGB 投影矩阵近似红绿色盲的感知,再取功能色两两之间的感知色差。规则很简单:两个状态色如果只靠颜色区分,在色盲视角下色差太小时就会被标为「注意」。

生成配色时我们就用同一套闸门拦掉不达标的组合,所以这里是「自检 + 公示」,也是一份可直接引用的无障碍实践说明。