总览
82配色总数
82/82全部通过正文级校验
12.96:1最低正文对比度
3.00:1最低主色对比度
1色盲提示
1 套配色的功能色在红绿色盲视角下容易混淆,已逐条列出替代方案
每套配色的无障碍检查结果
| 配色 | 端 | 正文在背景上 | 主色在背景上 | 色盲友好 |
|---|---|---|---|---|
| 潮光青 | 小程序端 | 12.96:1AAA | 3.67:1AA | 良好 |
| 旧金箔 | APP 端 | 13.34:1AAA | 3.45:1AA | 良好 |
| 陶野青 | WEB 端 | 13.34:1AAA | 6.56:1AAA | 良好 |
| 雾瑰灰 | APP 端 | 13.49:1AAA | 3.48:1AA | 良好 |
| 暖玉黄 | WEB 端 | 13.49:1AAA | 3.45:1AA | 良好 |
| 墨野青 | APP 端 | 13.99:1AAA | 3.72:1AA | 良好 |
| 稻穗黄 | WEB 端 | 14.00:1AAA | 3.72:1AA | 良好 |
| 宣纸黄 | 小程序端 | 14.14:1AAA | 3.06:1AA | 良好 |
| 酥油黄 | 小程序端 | 14.14:1AAA | 3.26:1AA | 良好 |
| 榆荫绿 | 小程序端 | 14.15:1AAA | 4.23:1AA | 良好 |
| 草原绿 | APP 端 | 14.16:1AAA | 4.31:1AA | 良好 |
| 青瓦绿 | APP 端 | 14.16:1AAA | 3.38:1AA | 良好 |
| 苔痕绿 | WEB 端 | 14.16:1AAA | 3.50:1AA | 良好 |
| 麦冬青 | WEB 端 | 14.16:1AAA | 3.39:1AA | 注意 |
| 薄荷绿 | 小程序端 | 14.16:1AAA | 3.40:1AA | 良好 |
| 青苹绿 | 小程序端 | 14.18:1AAA | 3.07:1AA | 良好 |
| 水杉绿 | 小程序端 | 14.19:1AAA | 3.75:1AA | 良好 |
| 苍山绿 | APP 端 | 14.20:1AAA | 3.96:1AA | 良好 |
| 松林绿 | APP 端 | 14.23:1AAA | 3.84:1AA | 良好 |
| 焙茶橙 | APP 端 | 14.27:1AAA | 3.10:1AA | 良好 |
| 冷泉青 | WEB 端 | 14.27:1AAA | 3.20:1AA | 良好 |
| 蜜橘橙 | APP 端 | 14.30:1AAA | 5.13:1AAA | 良好 |
| 晨雾青 | WEB 端 | 14.35:1AAA | 3.32:1AA | 良好 |
| 蓝染缬 | APP 端 | 14.41:1AAA | 4.72:1AAA | 良好 |
| 陈皮橙 | WEB 端 | 14.41:1AAA | 3.09:1AA | 良好 |
| 松烟蓝 | WEB 端 | 14.41:1AAA | 5.72:1AAA | 良好 |
| 织锦蓝 | WEB 端 | 14.41:1AAA | 5.42:1AAA | 良好 |
| 暖阳橙 | 小程序端 | 14.41:1AAA | 3.09:1AA | 良好 |
| 雪岭蓝 | 小程序端 | 14.41:1AAA | 3.71:1AA | 良好 |
| 茶饮绿 | 小程序端 | 14.45:1AAA | 3.19:1AA | 良好 |
| 焦糖橙 | APP 端 | 14.54:1AAA | 6.55:1AAA | 良好 |
| 榛果橙 | WEB 端 | 14.54:1AAA | 5.16:1AAA | 良好 |
| 海雾蓝 | WEB 端 | 14.54:1AAA | 3.46:1AA | 良好 |
| 林檎红 | 小程序端 | 14.54:1AAA | 3.40:1AA | 良好 |
| 桃花粉 | WEB 端 | 14.63:1AAA | 5.26:1AAA | 良好 |
| 木槿粉 | 小程序端 | 14.63:1AAA | 3.25:1AA | 良好 |
| 紫薇粉 | 小程序端 | 14.65:1AAA | 3.31:1AA | 良好 |
| 胭脂粉 | WEB 端 | 14.66:1AAA | 4.14:1AA | 良好 |
| 桃夭粉 | 小程序端 | 14.66:1AAA | 3.75:1AA | 良好 |
| 芙蓉粉 | 小程序端 | 14.66:1AAA | 5.58:1AAA | 良好 |
| 霜叶丹 | APP 端 | 14.67:1AAA | 3.51:1AA | 良好 |
| 榴火红 | WEB 端 | 14.67:1AAA | 5.80:1AAA | 良好 |
| 烟粉砂 | WEB 端 | 14.67:1AAA | 3.72:1AA | 良好 |
| 砖瓦红 | 小程序端 | 14.67:1AAA | 4.67:1AAA | 良好 |
| 深潭蓝 | APP 端 | 14.68:1AAA | 4.14:1AA | 良好 |
| 寒星蓝 | WEB 端 | 14.68:1AAA | 7.35:1AAA | 良好 |
| 靛蓝调 | 小程序端 | 14.68:1AAA | 5.88:1AAA | 良好 |
| 窑变红 | APP 端 | 14.69:1AAA | 6.42:1AAA | 良好 |
| 醉棠粉 | APP 端 | 14.69:1AAA | 3.31:1AA | 良好 |
| 芍药粉 | 小程序端 | 14.69:1AAA | 4.76:1AAA | 良好 |
| 山楂红 | APP 端 | 14.70:1AAA | 3.00:1AA | 良好 |
| 丹枫红 | 小程序端 | 14.70:1AAA | 4.38:1AA | 良好 |
| 葡萄紫 | APP 端 | 14.72:1AAA | 5.03:1AAA | 良好 |
| 雾霭紫 | APP 端 | 14.72:1AAA | 5.93:1AAA | 良好 |
| 暮山紫 | APP 端 | 14.72:1AAA | 4.16:1AA | 良好 |
| 夜潮蓝 | WEB 端 | 14.72:1AAA | 11.84:1AAA | 良好 |
| 暮云紫 | WEB 端 | 14.72:1AAA | 8.05:1AAA | 良好 |
| 青金蓝 | WEB 端 | 14.72:1AAA | 6.81:1AAA | 良好 |
| 石楠紫 | WEB 端 | 14.72:1AAA | 4.29:1AA | 良好 |
| 落葵紫 | WEB 端 | 14.72:1AAA | 9.08:1AAA | 良好 |
| 烟紫砂 | WEB 端 | 14.72:1AAA | 5.98:1AAA | 良好 |
| 湖心蓝 | 小程序端 | 14.72:1AAA | 6.61:1AAA | 良好 |
| 夜昙紫 | 小程序端 | 14.72:1AAA | 5.16:1AAA | 良好 |
| 凝霜紫 | 小程序端 | 14.72:1AAA | 8.45:1AAA | 良好 |
| 锦葵紫 | APP 端 | 14.76:1AAA | 6.34:1AAA | 良好 |
| 风信紫 | APP 端 | 14.76:1AAA | 8.78:1AAA | 良好 |
| 藤萝紫 | WEB 端 | 14.76:1AAA | 4.34:1AA | 良好 |
| 檀紫砂 | 小程序端 | 14.76:1AAA | 10.21:1AAA | 良好 |
| 青莲紫 | 小程序端 | 14.76:1AAA | 8.42:1AAA | 良好 |
| 初雪蓝 | APP 端 | 14.85:1AAA | 9.10:1AAA | 良好 |
| 窑青蓝 | 小程序端 | 14.85:1AAA | 9.01:1AAA | 良好 |
| 山茶红 | APP 端 | 15.06:1AAA | 3.90:1AA | 良好 |
| 暖橙屿 | APP 端 | 15.08:1AAA | 3.33:1AA | 良好 |
| 美妆粉 | 小程序端 | 15.08:1AAA | 3.12:1AA | 良好 |
| 商务蓝 | 小程序端 | 15.28:1AAA | 4.52:1AAA | 良好 |
| 墨蓝夜 | APP 端 | 15.29:1AAA | 5.56:1AAA | 良好 |
| 宠物紫 | 小程序端 | 15.38:1AAA | 4.42:1AA | 良好 |
| 生鲜橙 | 小程序端 | 15.51:1AAA | 3.60:1AA | 良好 |
| 麦糖金 | WEB 端 | 15.55:1AAA | 3.20:1AA | 良好 |
| 暗夜紫 | WEB 端 | 16.19:1AAA | 7.06:1AAA | 良好 |
| 朱墨红 | WEB 端 | 17.80:1AAA | 5.71:1AAA | 良好 |
| 静湖蓝 | WEB 端 | 17.85:1AAA | 5.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 投影矩阵近似红绿色盲的感知,再取功能色两两之间的感知色差。规则很简单:两个状态色如果只靠颜色区分,在色盲视角下色差太小时就会被标为「注意」。
生成配色时我们就用同一套闸门拦掉不达标的组合,所以这里是「自检 + 公示」,也是一份可直接引用的无障碍实践说明。