颜色对比度

WCAG AA/AAA 评级/文字背景

419 次访问
WCAG 2.1 CONTRAST CHECKER

颜色对比度检测

WCAG AA / AAA 无障碍标准 · 实时评级 · 文字 / 背景预览

选择颜色

文字颜色

背景颜色

实时预览

大标题文本 (24px)

普通正文文本 (16px) · 这段文本帮助你检查阅读舒适度

小字 (12px) · 备注信息

对比度评级

21:1
CONTRAST RATIO

WCAG 2.1 标准

小字 AA(≥ 4.5:1):正文(< 18pt 或 < 14pt 加粗)符合 AA 级无障碍标准。

小字 AAA(≥ 7:1):正文符合 AAA 级(最高)无障碍标准。

大字 AA(≥ 3:1):大标题(≥ 18pt 或 ≥ 14pt 加粗)符合 AA 级。

大字 AAA(≥ 4.5:1):大标题符合 AAA 级。

非文本 UI:图标 / 表单边框 / 焦点指示等需要 ≥ 3:1。

应用:政府 / 银行 / 医疗等公共服务网站必须 AA 合规。商业网站建议 AA 起步。

关于本工具

了解工具定位 · 使用场景 · 对比优势

输入前景色和背景色的十六进制值,立即获得 WCAG AA/AAA 对比度评级,并判断是否符合大文本、图形组件的无障碍标准。设计师、前端开发者在选色阶段即可验证色彩搭配,避免上线后因对比度不足被用户投诉或合规卡点。所有计算在浏览器中完成,颜色值不上传至服务器。

使用场景

🖥️

企业官网合规

产品经理与前端开发在搭建官网时,需要确保正文、按钮、链接等元素的颜色组合满足 WCAG AA 评级。本工具直接输入前景色与背景色,输出 AA/AAA 通过状态及对比度数值,无需翻查规范文档,快速定位不符合项并调整色值,避免因色弱用户无法阅读而引发的合规风险。

🎨

设计系统配色

UI 设计师在定义品牌色板时,需为文本、图标、背景分配可访问的色阶。本工具可批量测试主色与白/黑/灰底色的对比度,筛选出至少满足 AA 级的文字色组合,帮助设计师在保留品牌调性的同时,确保深色模式与浅色模式下的可读性,减少后期返工。

📱

移动端界面适配

移动端开发者处理深色模式或高对比度模式时,常因背景纹理、半透明覆盖层导致文字对比度不足。本工具支持输入带透明度的颜色值(如 rgba),直接计算最终叠加后的对比度,快速验证按钮上的白色文字在毛玻璃背景上是否达到 AA 标准,避免上线后被用户投诉看不清。

📄

PPT/文档可读性

职场人士制作演示文稿时,常使用企业色作为幻灯片背景,再叠加深色文字。本工具可即时测试文字颜色与背景的对比度,若未达到 AA 3:1(大文本)或 4.5:1(小文本),工具会提示调整色值,确保投影或打印后观众在远距离或低亮度环境下仍能清晰辨识。

🌐

第三方组件主题定制

前端工程师在集成 Ant Design、Element Plus 等组件库时,需要自定义全局主题色。本工具可逐一测试新主色在白色背景上的对比度,判断其是否满足 WCAG AA 级文本要求,避免因主题色过浅导致标签、链接、输入框提示文字无法被正常阅读,影响用户操作效率。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具WebAIM Contrast Checker手动计算 (公式)
数据隐私纯浏览器,零上传上传到服务器完全离线,无数据流动
处理速度即时反馈需等待页面加载和服务器响应数分钟(取决于计算工具和熟练度)
离线可用支持(页面加载后)不支持支持(需自备计算器或软件)
颜色格式支持Hex、RGB、HSL、颜色选择器Hex 为主需手动转换颜色格式
文本大小区分支持(AA/AAA 对大小文本有不同要求)支持需人工判断和查表
批量处理不支持(单次对比)不支持(单次对比)支持(通过脚本或软件批量计算)
操作门槛低,可视化界面低,可视化界面高,需理解公式和标准

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 在「前景色」和「背景色」输入框中输入十六进制颜色值(如 #FF0000),或使用颜色选择器选取
  2. 选择文本类型:「小号文字」或「大号文字」(≥18px 加粗或 ≥24px 常规)
  3. 点击「计算对比度」按钮,工具自动返回对比度比值及 WCAG AA/AAA 评级结果
  4. 查看「通过/未通过」状态,AA 级要求小号文字 ≥4.5:1,大号文字 ≥3:1;AAA 级要求更严格

输入输出示例8 个典型场景,覆盖常规、边界与易错

输入输出说明
#FFFFFF / #000000 / 16px / 普通文字对比度 21:1 | AAA 通过(大文字)| AAA 通过(普通文字)典型场景:黑底白字最高对比度
#FFFFFF / #CCCCCC / 14px / 普通文字对比度 1.6:1 | AA 失败 | AAA 失败典型场景:浅色背景上的浅色文字
#FFFFFF / #767676 / 18px / 大文字对比度 4.5:1 | AA 通过(大文字)| AA 失败(普通文字)边界 case:AA 大文字阈值刚好达标
#FFFFFF / #595959 / 14px / 普通文字对比度 5.0:1 | AA 通过(普通文字)| AAA 失败边界 case:AA 普通文字阈值刚好达标
#000000 / #FFFFFF / 16px / 普通文字对比度 21:1 | AAA 通过(大文字)| AAA 通过(普通文字)典型场景:白底黑字最高对比度
#FF0000 / #00FF00 / 12px / 普通文字对比度 2.9:1 | AA 失败 | AAA 失败易错 case:红绿互补色但对比度极低
#000000 / #FFFFFF / 24px / 大文字对比度 21:1 | AAA 通过(大文字)| AAA 通过(普通文字)典型场景:大文字评级宽松
#FFFFFF / #FFFFFF / 16px / 普通文字对比度 1:1 | AA 失败 | AAA 失败边界 case:文字与背景同色

常见错误对照8 个常踩的坑 · 错误 → 修复

1. 只测背景色,忽略文字色

错误
背景色 #FFFFFF,文字色留空或默认 #000000
修复
同时填入前景色(文字)和背景色,如文字色 #333333,背景色 #F5F5F5

对比度是前景与背景的比值,缺一不可;只填背景色无法计算有效对比度,结果无意义

2. 用十六进制缩写时忽略展开差异

错误
输入 #fff 和 #ffffff 混用
修复
统一使用 6 位十六进制,如 #FFFFFF 和 #333333

#fff 等价于 #ffffff,但不同工具对缩写的解析可能不一致;统一 6 位避免歧义

3. 把透明度(Alpha)当作纯色处理

错误
输入 rgba(255, 0, 0, 0.5) 作为背景色
修复
先计算实际混合色(如背景色 #FFFFFF 与半透明红混合后的颜色),再用纯色输入

WCAG 对比度计算基于不透明颜色;带透明度的颜色需要先与背景混合成实色再测试,否则结果不可靠

4. 误以为 AA 级通过就满足所有场景

错误
只检查 AA 普通文本(4.5:1),用于 12px 灰色提示文字
修复
检查 AA 大文本(3:1)或 AAA 级(7:1),根据实际文字大小和用途选择标准

WCAG 对普通文本(<18px 或 <14px 加粗)要求 4.5:1,大文本仅需 3:1;AAA 级要求更高,需按场景选择

5. 把渐变或图片背景当作纯色输入

错误
输入渐变背景的起始色 #FF0000 作为唯一背景色
修复
取渐变或图片中最暗/最亮区域的颜色分别测试,或使用工具提供的平均色

渐变和图片背景没有单一颜色;对比度需在文字覆盖区域最差条件下(最暗或最亮)满足标准,否则部分区域可能不可读

6. 忽略文字加粗对大小分类的影响

错误
14px 普通文字按普通文本标准(4.5:1)测试
修复
14px 加粗文字按大文本标准(3:1)测试

WCAG 定义大文本为 ≥18px 普通或 ≥14px 加粗;加粗使文字更易读,阈值降低,需正确分类

7. 把颜色值格式搞混

错误
输入 hsl(0, 100%, 50%) 但工具只支持十六进制
修复
将 HSL 转换为十六进制,如 #FF0000,再输入

不同工具支持的格式不同;本工具仅接受十六进制(#RRGGBB),输入其他格式会解析失败或得到错误结果

8. 测试后只看数值,不看评级说明

错误
看到对比度 4.4:1 就认为不通过
修复
查看评级:4.4:1 对 AA 大文本(3:1)通过,对 AA 普通文本(4.5:1)不通过

同一对比度值在不同标准下结论不同;需结合文字大小和加粗判断,不能只看数字大小

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

CR = (L1 + 0.05) / (L2 + 0.05)

变量说明

  • CR — 对比度比值(无量纲)
  • L1 — 较亮颜色的相对亮度
  • L2 — 较暗颜色的相对亮度

示例

白色背景(#FFFFFF)相对亮度 L1=1.000,深灰色文字(#555555)相对亮度 L2=0.090。CR = (1.000 + 0.05) / (0.090 + 0.05) = 1.05 / 0.14 ≈ 7.5:1。该比值满足 WCAG AA 级(≥4.5:1)和 AAA 级(≥7:1)对正常文字的要求。

适用范围

基于 WCAG 2.1 标准(sRGB 色彩空间),适用于网页文字与背景的对比度计算。不适用于非 sRGB 色彩空间(如 CMYK 印刷)或含透明通道的颜色,需先预乘 alpha 通道。

原理图

输入颜色前景色 + 背景色相对亮度计算WCAG 2.1 公式(sRGB → 线性 → 亮度)对比度比值(L1 + 0.05) / (L2 + 0.05)L1 较亮, L2 较暗WCAG 评级AA 级: ≥ 4.5:1 (普通文字) / ≥ 3:1 (大文字) | AAA 级: ≥ 7:1 (普通文字) / ≥ 4.5:1 (大文字)
用户输入 本地处理 中间计算 输出结果

开发者集成

3 种主流语言 · 复制即用

import math

# 计算相对亮度(WCAG 2.1 标准)
def relative_luminance(r, g, b):
    def linearize(c):
        c = c / 255.0
        return c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4
    return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b)

# 计算对比度比
def contrast_ratio(c1, c2):
    l1 = relative_luminance(*c1)
    l2 = relative_luminance(*c2)
    lighter = max(l1, l2)
    darker = min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

# 示例:深灰文字(#333) 在白色背景(#fff) 上
foreground = (0x33, 0x33, 0x33)  # #333333
background = (0xFF, 0xFF, 0xFF)  # #FFFFFF
ratio = contrast_ratio(foreground, background)
print(f"对比度比: {ratio:.2f}:1")

# WCAG AA 评级
if ratio >= 4.5:
    print("通过 AA(正常文字)")
elif ratio >= 3.0:
    print("通过 AA(大文字)")
else:
    print("未通过 AA")

# 输出: 对比度比: 12.63:1
# 输出: 通过 AA(正常文字)
package main

import (
	"fmt"
	"math"
)

// 线性化 sRGB 分量
func linearize(c float64) float64 {
	c /= 255.0
	if c <= 0.03928 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

// 相对亮度(WCAG 2.1)
func relativeLuminance(r, g, b float64) float64 {
	return 0.2126*linearize(r) + 0.7152*linearize(g) + 0.0722*linearize(b)
}

// 对比度比
func contrastRatio(c1, c2 [3]float64) float64 {
	l1 := relativeLuminance(c1[0], c1[1], c1[2])
	l2 := relativeLuminance(c2[0], c2[1], c2[2])
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	// 示例:白色背景上的黑色文字
	fg := [3]float64{0, 0, 0}        // #000000
	bg := [3]float64{255, 255, 255}  // #FFFFFF
	ratio := contrastRatio(fg, bg)
	fmt.Printf("对比度比: %.2f:1\n", ratio)
	if ratio >= 4.5 {
		fmt.Println("通过 AA(正常文字)")
	} else if ratio >= 3.0 {
		fmt.Println("通过 AA(大文字)")
	} else {
		fmt.Println("未通过 AA")
	}
	// 输出: 对比度比: 21.00:1
	// 输出: 通过 AA(正常文字)
}
// 线性化 sRGB 分量
function linearize(c) {
  c /= 255;
  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}

// 相对亮度(WCAG 2.1)
function relativeLuminance(r, g, b) {
  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
}

// 对比度比
function contrastRatio([r1, g1, b1], [r2, g2, b2]) {
  const l1 = relativeLuminance(r1, g1, b1);
  const l2 = relativeLuminance(r2, g2, b2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

// 示例:蓝色文字(#0000FF) 在白色背景上
const fg = [0, 0, 255];   // #0000FF
const bg = [255, 255, 255]; // #FFFFFF
const ratio = contrastRatio(fg, bg);
console.log(`对比度比: ${ratio.toFixed(2)}:1`);

if (ratio >= 4.5) {
  console.log('通过 AA(正常文字)');
} else if (ratio >= 3.0) {
  console.log('通过 AA(大文字)');
} else {
  console.log('未通过 AA');
}
// 输出: 对比度比: 8.59:1
// 输出: 通过 AA(正常文字)

常见问题

7 个高频疑问

为什么我输入的两个颜色在屏幕上看起来差不多,但工具显示对比度不合格?
人眼对颜色差异的感知受屏幕亮度、色温和观看角度影响,而 WCAG 对比度算法是基于 sRGB 色彩空间的数学计算,不考虑这些物理因素。如果显示器未校准(比如笔记本屏幕默认偏蓝),或开了“夜间模式/护眼模式”,实际观感会偏离标准值。建议在标准 sRGB 模式、正常亮度下测试,或直接用这个工具算出的数值作为基准,再结合肉眼微调。
AA 和 AAA 到底差多少?我该选哪个?
AA 要求普通文字对比度 ≥ 4.5:1,大文字(≥18px 粗体或 ≥24px 常规)≥ 3:1;AAA 更严格,普通文字 ≥ 7:1,大文字 ≥ 4.5:1。简单说:AA 是法律合规底线(比如 ADA / 欧盟指令),AAA 是“无障碍优秀”级别。如果做政府或银行网站,建议按 AA 起步;如果做儿童或老年用户产品,尽量冲 AAA。工具会同时显示两个评级,方便对照。
这个对比度数据是怎么算出来的?准不准?
算法来自 W3C WCAG 2.1 标准中的相对亮度公式(Relative Luminance),再用 (L1 + 0.05) / (L2 + 0.05) 计算对比度,结果四舍五入到小数点后一位。这是业内公认的合规计算方法,与 WAVE、Axe 等无障碍检测工具的数据一致。误差主要来自输入颜色的精度——如果你从截图取色,注意取色工具是否做了颜色空间转换。
我输入了十六进制色值,但工具提示“无效颜色”,怎么回事?
工具接受的十六进制格式是标准的 6 位(如 #FFAABB)或 3 位简写(如 #FAB),不包含透明度通道。如果你粘贴了带 alpha 的 8 位格式(如 #FFAABBCC)或 CSS 函数写法(如 rgb()/hsl()),会判为无效。请只输入纯六位或三位色值,大小写不限。如果是从设计软件复制的,先去掉透明度或转为标准 hex。
工具支持 RGBA 或 HSL 输入吗?我想用半透明背景。
不支持。WCAG 对比度计算只针对“不透明颜色”,因为透明度会让背景色透过来,实际对比度取决于叠加后的最终颜色,而非单个图层。如果你需要测试半透明背景上的文字,建议先用设计软件(如 Figma / Photoshop)将背景与下层颜色合并,取最终显示的颜色值再输入这个工具。
为什么我测的同一个颜色对,在手机和电脑上结果不一样?
这个工具是纯浏览器端计算,结果只取决于你输入的颜色值,与设备无关。如果你在不同设备上看到不同数值,很可能是因为:1)手机截图取色时颜色被压缩或转换了(比如 JPEG 有损压缩);2)手机浏览器开了“深色模式”或“高对比度模式”,改变了颜色渲染。建议在同一个设备上用同一张截图取色,或直接用十六进制值输入。
工具能测图片或渐变上的文字对比度吗?
不能直接测。这个工具只接受纯色十六进制输入,无法解析图片像素或渐变中间色。如果文字放在渐变或图片上,需要手动取最差情况下的颜色(比如渐变中最暗的部分、图片中文字区域的最小亮度区域),输入两个极端值分别测试。实际设计时,建议在渐变或图片上给文字加半透明背景层,然后测背景层与文字颜色的对比度。
选择 打开 +新窗口 esc关闭