How to use
对比度检查器怎么用
输入前景色和背景色，页面会立即给出对比度结果。它适合在上线前快速检查文字、按钮、卡片和基础界面配色。
无障碍工具
用于文本与界面的颜色对比度检查器
测试前景色和背景色组合，立即看到对比度结果，并帮助你做出更易读的设计选择。
普通文本 AA
Pass
大号文本 AA
Pass
普通文本 AAA
Pass
预览文本
13.78:1
这是一段用于检查颜色可读性的示例文本。
对比度
13.78:1
FG #1E293BBG #FFF7ED
Why this page matters
为什么这个页面能承接无障碍搜索意图
搜索 contrast checker 的用户通常想快速判断一组颜色是否足够清晰。这个页面把工具、可见结果和 UI 场景解释放在一起，更符合真实需求。
Related tools
继续查看相关工具页
把站内相关的转换和对比度工具通过内链串起来，更适合承接具体长尾搜索。
Extra context
继续了解这个工具页
工具页不只是一个输入框，也应该解释适用场景、对应搜索意图和为什么值得停留。
适合真实设计决策的对比度工具
做登录页、营销页、表单或后台界面时，经常要判断某组前景与背景颜色是否舒服可读。这个页面就是为这种场景准备的。
更贴近 contrast checker 与 color contrast checker 搜索
它不只是给出一个数字，而是把工具和设计语境绑在一起，因此更适合承接 contrast checker、color contrast checker、text contrast checker 这类搜索。
常见问题
Frequently asked questions
这里怎么检查文字和背景的对比度？01
输入或粘贴前景色与背景色，页面会立刻显示它们的对比度结果。
它适合 UI 配色检查吗？02
适合。这个工具就是为文字、按钮、卡片和常见界面组合准备的。
它和单独的 WCAG 对比度页面有什么区别？03
这个页面更通用，WCAG 对比度页面则更明确地承接无障碍相关长尾搜索。