颜色对比检查器

测试前景色和背景色之间的对比度以确保可访问性。

检查你的颜色

测试颜色组合以确保它们符合WCAG可访问性标准,确保文本可读性。

18.88 比 1
对比度
AAA
文本结果
超级

比较:前景 #000000 在 背景 #F5F2F4 上

文本

16px,常规 (400)

计为正常文本。

  • AA(WCAG 1.4.3):至少 4.5:1

    通过
  • AAA(WCAG 1.4.6):至少 7:1

    通过

界面组件和图形

图标、输入框边框、焦点指示器以及其他需要可见以使用界面的部分。

  • AA(WCAG 1.4.11):至少 3:1

    通过
18.88 比 1。文本:通过 AA, 通过 AAA。UI 组件:通过。
检查方式
比较的颜色(混合后)
文本 #000000 在 背景 #F5F2F4 上
相对亮度
文本 0.0000,背景 0.8944
计算公式
(L1 + 0.05) / (L2 + 0.05) 其中 L1 是较亮颜色的亮度,L2 是较暗颜色的亮度。
精确比值
18.8896 比 1,显示为 18.88 比 1。 显示的数值是截断的,不是四舍五入,所以看起来永远不会比实际更好。精确数值才是与要求比较的依据。

文字大小:16px,常规 (400)

计为正常文本。 大号文本至少为 24px(18pt),或者在加粗(字重 700 或以上)时至少为 18.67px(14pt)。显示的尺寸为截断值,不四舍五入。

计为正常文本。 大号文本至少为 24px(18pt),或者在加粗(字重 700 或以上)时至少为 18.67px(14pt)。显示的尺寸为截断值,不四舍五入。

Aa
预览标题

敏捷的棕色狐狸跳过懒狗

小文本示例(12px)

文本
#000000
背景
#f5f2f4

WCAG标准

AA 级

普通文本的最小对比度比为 4.5:1,大文本为 3:1。大多数网站要求达到这一标准。

AAA 级

普通文本的增强对比度比为 7:1,大文本为 4.5:1。建议达到最佳可访问性。

颜色对比检查器

计算文本和背景颜色的对比度。

使用颜色选择器为文本和背景颜色选择颜色,或输入 RGB 十六进制格式的颜色(例如 #259 或 #2596BE)。你可以调整滑块来选择颜色。网页内容可访问性指南(WCAG)提供了具体的指南来判断文本对视觉用户的可读性。此标准使用特定算法将颜色组合映射为可比较的比例。根据该公式,WCAG 表明与文本和其背景的颜色对比度比为 4.5:1 是用于普通(正文)文本的合适最小对比度,而大文本(18+ 点正文字体或 14+ 点加粗)应至少有 3:1 的颜色对比度比。

主要功能

  • 实时对比度比率计算
  • WCAG AA & AAA合规检查
  • HSL滑块微调
  • 多种预览格式

高级工具

  • 自动颜色修正
  • 文本和背景样本
  • 颜色名称检测
  • 导出结果

常见问题

要符合 WCAG AA 标准,普通文字的最低对比度为 4.5:1,大号文字(18pt 或 14pt 粗体)的最低对比度为 3:1。

WCAG AAA 要求更高的对比度:普通文字为 7:1,大号文字为 4.5:1;而 AA 分别为 4.5:1 和 3:1。

使用我们的自动修正功能调整文字或背景颜色,同时保持你的设计意图;或者使用带有视觉指示的 HSL 滑块手动调整颜色,指示器会显示符合 AA/AAA 标准的最佳范围。

绿色区域和 AA/AAA 标记显示了符合 WCAG 标准的最佳范围。方向提示(更亮/更暗)会根据你当前的颜色组合,引导你获得更好的对比度。

可以,你可以输入任意 HEX 色码,或使用颜色选择器选择自定义颜色。URL 会自动更新,方便你分享特定的颜色组合。