无障碍配色落地清单 · 色导网指南
每条都给了验证方式和不过关时的改法。能自动检查的尽量自动,剩下的靠人看,但要看固定的那几处。
十二条
| 检查 | 怎么验 | 不过怎么改 |
|---|---|---|
| 正文与底色达到 4.5:1 | 用对比度工具逐对算 | 加深文字色,不要只放大字号 |
| 大字与图形达到 3:1 | 同上,按大字门槛判 | 加深或加粗,细线图形要同时加粗笔宽 |
| 链接在段落里可辨识 | 只看颜色能不能认出链接 | 加下划线。只靠颜色区分链接是最常见的失分点 |
| 焦点框始终可见 | 只用键盘走一遍全部控件 | 用 outline 加偏移,不要 outline:none |
| 焦点框在深浅两种底上都可见 | 在最浅和最深的区块上各看一次 | 给焦点框加对比描边或双层描边 |
| 状态不只靠颜色 | 把页面想成灰度,看信息还在不在 | 加图标、文字或图案 |
| 表单错误不只靠红框 | 提交一次错误表单 | 补一行文字说明错在哪、怎么改 |
| 分类色两两可分 | 色觉模拟工具看最小色差 | 拉开明度、减少类别、加第二重编码 |
| 图表有图例之外的标注 | 遮住图例还能不能读懂 | 直接标在数据旁边 |
| 禁用态确实读不清但不误导 | 看它会不会被当成可点 | 用中性灰阶的禁用级,并移除指针样式 |
| 选中态不只靠底色深浅 | 在灰度下看选中行 | 加左侧标记或加粗文字 |
| 深色主题单独验一遍 | 切到深色主题重跑前十一条 | 按深色取值重算,不要沿用浅色数值 |
两个把前两条自动化的办法
一是在设计阶段就把色板里每一对的比值算出来,写进交付文档;后面开发只要按变量用就不会出错。本站方案库里每一页都这么做。
二是在代码里把「哪个变量能放文字」固化下来:比如约定 --brand-50 到 --brand-300 只能当背景,评审时看到它出现在 color 上就直接退回。