使用方法
- 01
选择或输入文字颜色与背景颜色。
- 02
查看实时示例及对比度数值。
- 03
根据普通文字和大号文字的 AA、AAA 结果调整颜色。
IMAGE LAB7 TOOLS ONLINE
图片工具 / 浏览器处理
颜色转换与 WCAG 对比度检查
转换 HEX、RGB 和 HSL，并检查前景与背景的 WCAG 对比度。本地处理数据优先留在浏览器
无需注册打开即可开始使用
简单高效专注完成当前任务
正在装配工具工作台…
HOW IT WORKS / IMAGE LAB
颜色与对比度使用说明
颜色与对比度工具把常用 HEX 颜色转换为 RGB 和 HSL，并按照 WCAG 相对亮度公式计算前景与背景之间的对比度。页面会分别提示普通文字和大号文字是否达到 AA、AAA 门槛，同时用真实示例区域展示阅读效果。它适合设计按钮、正文、状态标签和品牌配色时快速初筛；最终可访问性仍应结合字号、字重、交互状态、暗色模式和真实设备测试。
操作示例
检查深色正文
输入：#111827 / #FFFFFF
输出：高对比度并通过普通文字 AAA
深色文字配白色背景通常能获得稳定可读性。
适用场景
- 检查网站正文、按钮和表单提示颜色
- 把品牌色转换为开发可用的 RGB 与 HSL
支持范围与限制
- 对比度通过不代表页面整体可访问，还需检查字号、焦点、状态和非颜色提示。
颜色值和计算结果完全在浏览器本地生成。
相关教程
图片压缩、尺寸和格式如何选择常见问题
AA 和 AAA 有什么区别？
AAA 要求更高，普通文字通常分别需要 4.5:1 和 7:1。
大号文字标准是多少？
大号文字 AA 通常为 3:1，AAA 为 4.5:1。
通过检测就一定看得清吗？
不一定，还会受到字体、字重、屏幕、环境光和用户视觉情况影响。
任务相关