色彩对比检查器

输入前景色和背景色，实时计算对比度并自动判定是否通过 WCAG AA/AAA 四个等级（大文字、正常文字），同时提供颜色值复制、反转、保存以及 Google 字体预览功能。

核心功能：对比度检测与等级判定

工具以两个颜色输入框为核心：背景色默认 #ffe66d（RGB 255,230,109），前景色默认 #222222（RGB 34,34,34）。用户可手动输入 Hex、RGB 或 HSL 值，或通过拾色器选取。右侧即时显示对比度比值（如 12.72）以及四项 WCAG 判定结果：AA Large、AAA Large、AA Normal、AAA Normal，通过项显示绿色“Pass”。

• 对比度比值：精确到小数点后两位
• AA Large：大文字（18pt/24px 及以上）通过阈值 3:1
• AAA Large：大文字通过阈值 4.5:1
• AA Normal：正常文字（16px）通过阈值 4.5:1
• AAA Normal：正常文字通过阈值 7:1

辅助操作：颜色管理、反转与保存

每个颜色块下方提供“Copy”按钮，可将颜色值以 Hex 格式复制到剪贴板。点击“Reverse colours”一键交换前景色与背景色，方便快速对比两种配色方案。“Save colours”按钮可将当前配色保存（浏览器本地存储），供后续调用。

• 颜色复制：支持 Hex、RGB、HSL 三种格式显示，但复制仅输出 Hex
• 反转颜色：一键交换前景/背景，不改变颜色值本身
• 保存配色：使用浏览器 localStorage 存储，刷新页面后仍可恢复

字体预览与排版测试

工具内置“Typeface”下拉菜单，可选 Google Fonts 中的字体（如 Roboto、Open Sans 等），并在下方两个示例区域展示实际渲染效果：“Large Text - 18pt/24px”和“Normal Text - 16px”。示例文字可点击编辑，输入自定义内容，直观检验配色在真实文字上的可读性。

• 字体选择：调用 Google Fonts API，无需额外加载
• 示例文字可编辑：点击示例文字区域即可输入自定义文本
• 字号固定：大文字 18pt/24px，正常文字 16px，不可调整

界面与作者

页面布局极简，所有功能集中在一屏内，顶部提供“Skip to”锚点链接，方便键盘用户快速跳转到对比度比值、等级、背景色输入、前景色输入、大文字示例、正常文字示例等区域。底部标注“UI created by Will Tarpey”，并附爱心图标致谢。

• 无障碍导航：6 个 Skip to 锚点，覆盖所有核心交互区域
• 作者：Will Tarpey，无其他贡献者信息
• 无广告、无注册、无付费入口

常见问题

Q1：Colour Contrast Checker 支持哪些颜色输入格式？

A1：支持 Hex（如 #ffe66d）、RGB（如 255,230,109）和 HSL（如 50°,1,0.71）三种格式，输入后自动同步显示其他格式的值，但复制到剪贴板仅输出 Hex。

Q2：该工具能否检测图片或渐变色的对比度？

A2：不能。Colour Contrast Checker 只接受纯色（单色）输入，不支持图片、渐变或半透明颜色。

更多同类工具与网站,可在设计工具分类继续挑选。

信息核实于 2026年7月,具体以官网为准。