在产品与界面设计里，色彩不仅关乎审美，更直接影响可读性与可访问性。下面这份清单聚焦「对比度校验 / 色盲模拟 / 调色板管理 / 团队共享」，方便你在设计阶段就把 WCAG 要求前置校验，减少返工。
工具地址：https://webaim.org/resources/contrastchecker/
免费商用：输入前景/背景颜色即可快速判断是否通过 WCAG AA/AAA，并给出对比度数值，适合做“最后一公里”的核对。
如果团队常用设计令牌（Design Tokens），可把常用色值整理成一组预设，逐个验证文本、图标与分割线的最低可读性。
免费商用：在对比度结果之外，用可视化方式展示不同视力条件下的可辨识度（色弱/低视力等），非常适合设计评审时作为共识工具。
建议把关键按钮、链接色与警示色都跑一遍，避免“看起来差不多”的组合在真实用户眼里变成同一色块。
需看协议：提供 Figma/Sketch/XD 等插件生态，可在设计稿内做对比度检查与色盲模拟；部分能力可能需要订阅。
它的价值在于把检测动作嵌入日常流程：组件库维护者可以把检查作为发布前的固定步骤。
工具地址：https://accessible-colors.com/
免费商用：针对一组颜色给出可访问性建议（如调整亮度/对比），适合在早期探索配色时快速收敛到“好看且能用”的范围。
当你需要同时兼顾品牌色与可读性时，可以先让工具给出可行区间，再回到设计系统里做统一的色阶与语义命名。
需看协议：经典的配色与调色板管理工具，适合做色相探索、配色方案生成与共享；商用与账户使用规则以官方为准。
可以把通过对比度校验的色板保存为团队资产，减少每次项目都从“凭感觉选色”开始。
工具地址：https://leonardocolor.io/
免费商用：偏“系统化”的色板生成方式，能够围绕目标对比度生成一系列可用色阶，适合做深浅模式与状态色（hover/pressed/disabled）。
当你需要一套跨组件一致的色阶时，用它先生成骨架，再结合品牌色微调，会比手工拉曲线更稳定。
工具地址：https://coolors.co/
需看协议：适合快速生成与排列调色板，也支持导出与分享；部分高级功能可能需要付费。
建议把“可访问性通过”的组合单独归档，避免灵感探索阶段的颜色直接进入生产环境。
免费商用：桌面端色盲模拟器，可模拟常见色觉缺陷在整屏界面上的表现，特别适合检查图表、热力图与状态点。
如果你做的是数据产品，务必用它验证“仅靠颜色区分”的图例，并考虑增加形状、纹理或标注。
工具地址：https://michelf.ca/projects/sim-daltonism/
需看协议：常见于 macOS 的色盲模拟工具（也有类似实现），用来快速预览不同色觉条件下的界面差异；以官方说明为准。
配合截图工具与评审流程，可以在 PRD/评审文档里直接放对比图，让问题更直观。
工具地址：https://www.color-blindness.com/coblis-color-blindness-simulator/
需看协议：上传图片后模拟不同类型色盲效果，适合对单张海报、Banner、信息图做快速检查；注意隐私与素材上传规则。
建议只上传脱敏或低风险图片，或用本地/企业内的替代工具处理敏感设计稿。
工具地址：https://m3.material.io/styles/color/overview
免费商用：提供关于色彩体系与语义色的系统化参考，适合在建立设计系统时对齐“主色/中性色/状态色”的职责边界。
即使不使用 Material 体系，也可以借鉴它对“可读性优先”的约束思路，避免语义色被滥用。
工具地址：https://tailwindcss.com/docs/customizing-colors
免费商用：以色阶形式组织颜色，便于工程侧按 token 取值；适合做“从设计到代码”的统一映射。
实际落地时建议把色阶与语义层分开：色阶是原子色，语义色（Primary/Success/Warning）再引用色阶，降低维护成本。
工具地址：https://oklch.com/
免费商用：用更贴近人眼感知的色彩空间做调色与插值，生成的渐变与色阶通常更自然，适合深浅模式与品牌色扩展。
当你发现 HSL 拉出来的色阶“中间发脏/发灰”，可以尝试用 OKLCH 重建一套更稳定的色板。
