颜色格式转换与对比度检查使用方法:场景、示例与常见错误
HEX、RGB、HSL 互转,检查前景/背景对比度并给出 WCAG 可读性等级。
适合谁使用
- 按钮文字可读性检查
- 设计稿颜色标注转换
- 暗黑模式颜色复核
- 品牌色辅助色搭配
推荐使用步骤
- 输入前景色和背景色。
- 点击转换与检查。
- 查看 HEX、RGB、HSL 和对比度等级。
- 根据建议调整颜色。
输入输出示例
输入
#0078D4 on #FFFFFF
输出
对比度约 4.53:1,普通文字接近 AA,按钮大字更稳。
常见错误
- 只看颜色好看不等于可读
- 浅蓝文字配白底很容易不达标
- 暗黑模式不能直接反转颜色
- 透明色需要先确定实际背景
和普通同类工具的区别
既做格式转换,也做可读性判断,适合 UI 落地前快速复核。
FAQ
支持哪些颜色格式?
支持 #RGB、#RRGGBB、rgb() 和 hsl() 常见写法。
AA 和 AAA 是什么?
它们是 WCAG 对文字对比度的可访问性等级要求。
透明颜色怎么检查?
需要先和背景混合成实际显示颜色,再检查对比度。