可读性检测
颜色对比度检测工具
输入前景色和背景色，系统会实时计算对比度比值，并按照 WCAG 标准判断正文和大字号内容是否达到 AA / AAA 可读性要求。
实时检测
支持输入十六进制颜色值，适合网页设计、前端开发、按钮可读性校对和无障碍检查。
实时预览
示例标题：配色对比效果
这段正文用于模拟网页标题、按钮和正文在真实界面中的可读性表现，便于你快速判断当前配色是否适合直接上线使用。
- 对比度
- 13.26:1
- 综合结果
- AAA
- 前景色
- #1F2937
- 背景色
- #F7F3EA
AA 正文通过
AAA 正文通过
AA 大字号通过
AAA 大字号通过
判断标准
WCAG 会根据对比度比值判断正文与大字号文字是否足够清晰。
- 普通正文达到 AA，通常需要至少 `4.5:1`。
- 大字号内容达到 AA，通常需要至少 `3:1`。
- 如果想让正文达到 AAA，通常需要至少 `7:1`。
适合哪些场景
颜色对比度检测最常见于网页界面、表单提示、按钮文案和品牌色规范。
- 检查正文、按钮和提示色在浅色或深色背景上的可读性。
- 验证设计稿中的前景色和背景色是否适合直接上线。
- 为无障碍规范、品牌规范和组件库建立可复用的颜色组合。
使用建议
对比度达标只是起点，最终还要结合字号、字重和实际界面背景一起判断。
- 浅背景下尽量使用更深的文字色，深背景下尽量使用更亮的文字色。
- 不要只依赖颜色表达状态，错误和成功提示最好同时搭配图标或文字。
- 如果按钮底色较亮，按钮文字尽量避免再使用浅色。
相关工具
你还可以继续使用其他已经可用的颜色转换和校对工具。