无需登录 数据私有 本地保存

颜色相对亮度计算 - WCAG Luminance比值

前端设计 计算工具 WCAG 亮度 颜色
59
0
0
0
Color A 前景色 / 文字色
#
RGB 51, 51, 51
HSL 0°, 0%, 20%
相对亮度 0.0331
对比度比值
12.63
: 1
AAA
正常文本 AAA 通过
1 3:1 7:1 21
Color B 背景色
#
RGB 255, 255, 255
HSL 0°, 0%, 100%
相对亮度 1.0000
快速预设：
A
A
A
A
A
A
A
文字可读性预览
这是大标题文字预览
这是正文内容，用于测试正常大小文本在背景色上的可读性和对比度表现。文字应当清晰易读。
UI 组件按钮
文本类型 AA 级 AAA 级 当前状态
正常文本 ≥ 4.5:1 ≥ 7:1 ✅ 通过
大文本
(≥24px 或 ≥19px加粗)		 ≥ 3:1 ≥ 4.5:1 ✅ 通过
UI 组件
图标、边框等		 ≥ 3:1 ✅ 通过
WCAG 相对亮度与对比度知识

WCAG 相对亮度是衡量颜色"明亮程度"的标准化指标，取值范围 0（纯黑）到 1（纯白）。它基于 sRGB 色彩空间，先将颜色通道线性化，再按人眼对不同波长光的敏感度加权计算：
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
其中 R、G、B 是线性化后的值。绿色权重最高（0.7152），因为人眼对绿色最敏感；蓝色权重最低（0.0722）。

对比度比值 = (L₁ + 0.05) / (L₂ + 0.05)，其中 L₁ 是较亮颜色的相对亮度，L₂ 是较暗颜色的相对亮度。公式中的 +0.05 是平滑因子，防止除以零的情况。理论上最大对比度为 21:1（纯白与纯黑），最小为 1:1（相同颜色）。
AA 级：正常文本需要 ≥4.5:1，大文本（≥24px 或 ≥19px 加粗）需要 ≥3:1。这是大多数网站应达到的最低标准。
AAA 级：正常文本需要 ≥7:1，大文本需要 ≥4.5:1。这是更严格的标准，适用于需要更高可读性的场景（如阅读类应用、辅助功能优化站点）。
此外，UI 组件和图形对象（如图标、输入框边框）至少需要 3:1 的对比度（WCAG 2.1 新增）。

相对亮度是基于 sRGB 数学模型的客观计算值，而感知亮度是人眼主观感受到的明亮程度。两者不完全一致：例如，相同相对亮度的黄色和蓝色，人眼会觉得黄色更亮（Helmholtz-Kohlrausch 效应）。WCAG 2.x 使用相对亮度作为对比度计算基础，而 WCAG 3.0 草案中提出了 APCA（Advanced Perceptual Contrast Algorithm），更贴近人眼感知。

1. 确保对比度至少达到 AA 级（正常文本 4.5:1）；
2. 避免纯黑文字配纯白背景（对比度过高可能导致视疲劳），可选用 #1a1a1a 配 #f5f5f5；
3. 彩色文字需格外注意对比度，红色和蓝色在深色背景上可能对比度不足；
4. 使用本工具实时检测，确保所有文本-背景组合都满足无障碍标准。
🔧 相关工具