配色之后怎样检查对比度：HEX、色阶与渐变的实用流程

一排色块看起来协调，不代表按钮上的文字就容易阅读。配色真正落到界面时，需要明确每种颜色负责什么：背景、正文、边框、强调还是状态。

可以先用颜色转换确定基础色，再测试页面实际使用的前景和背景组合。

转换颜色时别丢掉透明度

工具支持 HEX、RGB、HSL 等值，提供预览和可复制结果。HEX 与 HSL 字符串不包含透明度，处理半透明颜色时要同时查看独立 alpha 值或 RGB 结果。

半透明文字叠在照片上，与同一个不透明 RGB 颜色放在白底上不是一回事，必须考虑实际合成后的背景。

给每种颜色分配角色

配色工具根据基础色相生成结果，不是从照片中提取颜色。色阶改变 HSL 明度，不保证相邻色块在视觉上等距。保留真正有用途的颜色并命名，不必全部采用。

检查文字与背景的组合

用对比度检查输入纯色前景与背景。WCAG AA 通常要求普通文字达到 4.5:1，符合定义的大号文字达到 3:1。大号文字有具体尺寸要求，并不是加粗就自动符合，详见 W3C 对比度说明。

不要把略低于阈值的比率向上取整后当作通过。次要文字不达标时，调整前景或背景再测试，把装饰色与需要承载可读信息的颜色分开考虑。

工具也会显示 AAA 阈值，但某一对颜色通过并不能证明整页符合 WCAG。焦点、布局、语义等仍需要独立检查。

渐变和颜色含义单独检查

渐变沿途的背景会变化。应检查文字下面最不利的位置，或者给文字增加纯色背景，不能只测一个端点。

色觉模拟提供单个颜色的近似变换，不是整页模拟或诊断。可以借它思考状态色是否容易混淆，再增加文字或图标，避免只靠颜色传达信息。

例如表格中明确写出“完成”“待处理”，比只放绿色和橙色圆点更容易理解。

在实际页面中确认

1. 记录每种文字角色实际使用的前景与背景值。
2. 颜色变化的悬停和选中状态也要检查。
3. 浅色、深色主题分别测试。
4. 按真实字号查看最终页面。
5. 加入透明度、图片或渐变后重新评估。

工具免登录在本地生成结果，适合针对性检查，但最终阅读效果仍取决于整个界面。

操作要点

先生成少量有用的颜色，分配角色，再检查真正出现在产品中的组合。配色关系只是起点，可读内容才是需要验证的结果。