颜色对比度检测器

检测前景色与背景色之间的WCAG AA和AAA对比度

加载示例

前景色(文本颜色)

背景色

大号文本示例(18px 粗体)

普通文本示例——这就是你的正文在所选背景色上的实际显示效果。

对比度

14.63:1

WCAG 合规性

通过

普通文本 AA

通过

普通文本 AAA

通过

大号文本 AA

通过

大号文本 AAA

WCAG AA普通文本: 4.5:1, 大号文本(18px 及以上或 14px 粗体): 3:1

WCAG AAA普通文本: 7:1, 大号文本(18px 及以上或 14px 粗体): 4.5:1

什么是颜色对比度检测?

颜色对比度检测通过计算前景色(通常为文本)与背景色之间的亮度差,并将结果表示为比率。1:1表示两种颜色完全相同;21:1为最大值,即黑色与白色之间的对比度。W3C发布的《网页内容无障碍指南》(WCAG)规定了文本必须满足的最低对比度要求,以确保低视力或色觉障碍用户能够正常阅读。

对比度计算公式来自WCAG 2.x,基于相对亮度——衡量颜色在人眼中呈现亮度的指标。计算相对亮度时,需先对每个sRGB通道进行线性化处理(移除伽马校正),再按ITU-R BT.709系数加权求和:红色0.2126、绿色0.7152、蓝色0.0722。绿色权重最大,因为人眼对绿光最为敏感。最终对比度公式为 (L1 + 0.05) / (L2 + 0.05),其中L1为较亮颜色的亮度值。

WCAG定义了两个合规级别。AA级要求普通文本的对比度至少为4.5:1,大号文本(18px及以上,或14px粗体)至少为3:1。AAA级将标准提高至7:1和4.5:1。WCAG 2.1还新增了成功准则1.4.11,要求边框、图标和焦点指示器等非文本UI组件的对比度不低于3:1。

为何使用此对比度检测器?

凭肉眼判断对比度并不可靠。在你精心校准的显示器上看起来清晰可辨的颜色组合,在低质量笔记本屏幕、强烈日光下,或对色觉缺陷用户而言,可能完全无法区分。数值化的对比度比率消除了主观判断,并以通过/未通过的形式给出明确的WCAG合规结论。

实时比率计算
选取或输入两种颜色,对比度比率实时更新。无需提交表单,无需刷新页面。
🔒
隐私优先处理
亮度计算完全在浏览器本地运行。颜色值不会离开你的设备,也不会有任何Cookie或分析工具追踪你的操作。
🎯
AA和AAA双级别结论
结果同时显示WCAG AA和AAA级别下,普通文本和大号文本的通过/未通过状态,让你清楚了解具体满足哪些阈值要求。
📋
无需账户
打开页面即可开始检测。无需注册,无速率限制。页面加载后可离线使用。

对比度检测器使用场景

前端开发
在提交UI改动前,将CSS中的文本色和背景色粘贴到检测器中,确认该颜色组合满足WCAG AA要求。这样可以在代码审查或自动化审计之前提前发现对比度不达标的问题。
设计交付
设计师在将规范交付给工程师之前,可验证Figma文件中每个颜色组合是否通过所需的WCAG级别。在设计阶段修复对比度问题,成本远低于实现后再修改。
无障碍审计
QA工程师在进行WCAG审计时,可针对Lighthouse或axe等自动化工具标记的特定颜色组合进行抽查复核。检测器能确认精确的比率,以及哪些级别通过或未通过。
设计系统色彩令牌
在为设计系统定义颜色令牌时,测试每对前景/背景颜色组合,确保令牌调色板至少满足AA级要求。在令牌文档中记录对比度比率,让下游团队对颜色选择有充分的信心。
邮件模板测试
邮件客户端会剥离透明度、混合模式等CSS特性,导致实际渲染颜色可能与源文件不同。请测试最终送达收件箱的前景色和背景色实际值,以验证可读性。
学习无障碍标准
学习WCAG的学生可以尝试不同的颜色组合,即时观察比率的变化。每次只调整一个通道,有助于建立对亮度与感知对比度关系的直观理解。

WCAG 对比度要求参考

下表汇总了WCAG 2.1针对不同内容类型和合规级别所要求的最低对比度比率。大号文本定义为:正常字重下18px(24 CSS像素)及以上,或粗体字重下14px(18.66 CSS像素)及以上。

级别最低比率适用范围备注
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

相对亮度、AA 与 AAA 详解

对比度计算分三个阶段:分别计算每种颜色的亮度,推导出比率,再与WCAG阈值进行比较。

相对亮度
一个介于0(黑色)到1(白色)之间的数值,表示颜色在视觉上呈现的亮度。它考虑了非线性sRGB伽马曲线,以及人眼对红、绿、蓝光敏感度不均等的特性。纯绿色(#00FF00)的亮度为0.7152,而纯蓝色(#0000FF)仅为0.0722。
WCAG AA
大多数法律标准所要求的基础无障碍级别,包括欧盟《欧洲无障碍法案》(EAA)和美国的第508条款。AA级要求普通文本对比度不低于4.5:1,大号文本不低于3:1。大多数设计系统将AA作为所有文本元素的最低标准。
WCAG AAA
增强级别,适用于需要覆盖尽可能广泛受众的内容,包括有严重视力障碍的用户。AAA级要求普通文本对比度不低于7:1,大号文本不低于4.5:1。极少有网站在所有页面上均达到AAA级别,但法律声明和医疗信息等关键内容通常以此为目标。

代码示例

通过编程方式计算WCAG对比度比率。以下示例均实现了WCAG 2.x的相对亮度公式和对比度计算逻辑。为便于对比,所有示例均测试黑色与白色、靛蓝色与白色这两对颜色组合。

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

常见问题

什么样的对比度比率适合文本显示?
对于网页正文文本,对比度至少应达到4.5:1(WCAG AA)。超过7:1满足WCAG AAA,阅读体验更为舒适。黑色背景上的白色文字可达到最大比率21:1,但深灰色(#1e293b)背景上的白色文字对比度约为12.6:1,仍远高于AAA标准。
WCAG中大号文本的定义是什么?
WCAG将大号文本定义为:正常字重下18px(24 CSS像素)及以上,或粗体字重下14px(18.66 CSS像素)及以上。大号文本对比度阈值较低,因为更大的字形更易于感知。在CSS中,1px等于0.75pt,因此18pt等于24px。
WCAG AA是否具有法律约束力?
在许多地区,是的。将于2025年6月生效的欧盟《欧洲无障碍法案》(EAA)引用了WCAG 2.1 AA标准。美国《康复法》第508条要求联邦机构满足WCAG 2.0 AA。美国法院已将《美国残疾人法》(ADA)解释为要求网站可访问,以WCAG AA为参照标准。加拿大、澳大利亚和英国均有类似规定。
相对亮度是如何计算的?
将每个sRGB通道值(0–255)除以255进行归一化,再进行线性化处理:0.04045及以下的值除以12.92,高于0.04045的值按 ((c + 0.055) / 1.055) ^ 2.4 进行变换。三个线性化通道值按ITU-R BT.709系数(R×0.2126、G×0.7152、B×0.0722)加权求和,结果为0到1之间的数值。
为什么WCAG对比度公式中要加上0.05偏移量?
0.05偏移量用于防止当其中一种颜色为纯黑色(亮度=0)时出现除以零的情况。它同时考虑了环境光和屏幕反射的影响——即使最暗的像素也会因此略微提高感知亮度。若没有此偏移量,黑色与任何深色之间的对比度将产生无穷大或虚高的比率。
两种颜色通过了AA但仍然难以阅读,这种情况存在吗?
存在。WCAG对比度比率衡量的是亮度差异,而非色相差异。饱和红色与饱和绿色在技术上可能达到比率阈值,但对部分用户(尤其是红绿色觉缺陷者)来说阅读体验极差。同时在亮度和色相上都有明显差异的颜色组合,通常能带来更舒适的阅读体验。
WCAG 2.x对比度与APCA有何区别?
WCAG 2.x使用简单的亮度比率,对前景色和背景色对称处理。APCA(高级感知对比算法)是为WCAG 3.0提出的方案,采用感知亮度模型,考虑了极性因素:在相同亮度差的情况下,深色文字在浅色背景上与浅色文字在深色背景上的感知对比度并不相同。APCA目前仍为草案阶段,尚未在任何法规中取代WCAG 2.x方法。