色导网中文配色工作台与色彩资料馆

无障碍配色落地清单 · 色导网指南

每条都给了验证方式和不过关时的改法。能自动检查的尽量自动,剩下的靠人看,但要看固定的那几处。

成功、警告、危险、信息与中性五个状态色

十二条

前两条可以自动化,其余大多需要人看一遍,但看的位置是固定的。
检查怎么验不过怎么改
正文与底色达到 4.5:1用对比度工具逐对算加深文字色,不要只放大字号
大字与图形达到 3:1同上,按大字门槛判加深或加粗,细线图形要同时加粗笔宽
链接在段落里可辨识只看颜色能不能认出链接加下划线。只靠颜色区分链接是最常见的失分点
焦点框始终可见只用键盘走一遍全部控件用 outline 加偏移,不要 outline:none
焦点框在深浅两种底上都可见在最浅和最深的区块上各看一次给焦点框加对比描边或双层描边
状态不只靠颜色把页面想成灰度,看信息还在不在加图标、文字或图案
表单错误不只靠红框提交一次错误表单补一行文字说明错在哪、怎么改
分类色两两可分色觉模拟工具看最小色差拉开明度、减少类别、加第二重编码
图表有图例之外的标注遮住图例还能不能读懂直接标在数据旁边
禁用态确实读不清但不误导看它会不会被当成可点用中性灰阶的禁用级,并移除指针样式
选中态不只靠底色深浅在灰度下看选中行加左侧标记或加粗文字
深色主题单独验一遍切到深色主题重跑前十一条按深色取值重算,不要沿用浅色数值

两个把前两条自动化的办法

一是在设计阶段就把色板里每一对的比值算出来,写进交付文档;后面开发只要按变量用就不会出错。本站方案库里每一页都这么做。

二是在代码里把「哪个变量能放文字」固化下来:比如约定 --brand-50 到 --brand-300 只能当背景,评审时看到它出现在 color 上就直接退回。