无障碍配色与对比度工具清单|WCAG检查、色盲模拟与色板管理

做无障碍配色时,最常见的问题不是“不会选色”,而是缺少一套可重复的验证链路:先用对比度工具快速筛查,再用色盲模拟确认可区分性,最后把通过验证的色值沉淀到色板与设计系统里。下面这份清单把常用工具按场景收拢,方便你在不同阶段快速调用。

WebAIM Contrast Checker

工具地址:https://webaim.org/resources/contrastchecker/

需看协议:经典的 WCAG 对比度计算器,输入前景/背景色即可得到 AA/AAA 结果,并给出建议替代色,适合做快速“能不能过”的第一道门。

Contrast Ratio (Lea Verou)

工具地址:https://contrast-ratio.com/

需看协议:交互式拖拽调整亮度,实时观察对比度变化;做按钮/链接状态色时很实用,能快速找到“尽量不改视觉但能达标”的临界点。

Color.review

工具地址:https://color.review/

需看协议:把两种颜色并排展示并给出 WCAG 分数,视觉反馈更直观;适合在做组件库时批量比较文本色/背景色组合。

WhoCanUse

工具地址:https://whocanuse.com/

需看协议:不仅看对比度,还用不同视力条件(含多种色觉缺陷)模拟“谁能用”;当你纠结两套方案都过线时,它能帮你选更稳的一套。

Accessible Colors

工具地址:https://accessible-colors.com/

需看协议:给出对比度结果的同时,提供可替代色与可读性提示;适合做品牌色延展(主色、浅色、深色)时快速得到可用梯度。

Coblis - Color Blindness Simulator

工具地址:https://www.color-blindness.com/coblis-color-blindness-simulator/

需看协议:上传图片并模拟多种色盲类型;适合检查图表、热力图、状态图标等“靠颜色传递信息”的页面,能快速发现“颜色塌陷”的风险点。

Color Oracle

工具地址:https://colororacle.org/

需看协议:桌面级全局色盲模拟(覆盖屏幕),做设计评审或 QA 走查时很高效;建议与对比度工具搭配,避免“对比度够但仍难区分”。

Sim Daltonism

工具地址:https://michelf.ca/projects/sim-daltonism/

需看协议:更偏专业的屏幕模拟工具,适合需要高频验证的设计师/前端;对图表、地图等复杂配色的可区分性检查更细致。

Adobe Color

工具地址:https://color.adobe.com/

需看协议:配色方案探索与色板管理入口;当你需要在品牌色约束下做浅深模式扩展时,用它先定“色相关系”,再回到对比度工具做达标校验。

Coolors

工具地址:https://coolors.co/

需看协议:生成色板、导出与协作都很方便;适合把“已验证通过”的颜色组合沉淀成可复用的调色板,并在后续迭代中保持一致性。

Stark

工具地址:https://www.getstark.co/

需看协议:面向设计工具的无障碍插件体系(含对比度检查与模拟);如果团队以 Figma/Sketch 为主,它能把检查前置到设计阶段,减少“开发后返工”。

Able (Figma Plugin)

工具地址:https://www.figma.com/community/plugin/734693888346260052/Able-%E2%80%93-Friction-free-accessibility

需看协议:在设计文件里做可访问性检查与提示,适合在组件化设计流程中做“边画边查”;配合团队规范能更稳定地避免对比度踩线。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功