颜色对比度检测
WCAG AA / AAA 无障碍标准 · 实时评级 · 文字 / 背景预览
WCAG AA/AAA 评级/文字背景
WCAG AA / AAA 无障碍标准 · 实时评级 · 文字 / 背景预览
大标题文本 (24px)
普通正文文本 (16px) · 这段文本帮助你检查阅读舒适度
小字 (12px) · 备注信息
小字 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 标准,避免上线后被用户投诉看不清。
职场人士制作演示文稿时,常使用企业色作为幻灯片背景,再叠加深色文字。本工具可即时测试文字颜色与背景的对比度,若未达到 AA 3:1(大文本)或 4.5:1(小文本),工具会提示调整色值,确保投影或打印后观众在远距离或低亮度环境下仍能清晰辨识。
前端工程师在集成 Ant Design、Element Plus 等组件库时,需要自定义全局主题色。本工具可逐一测试新主色在白色背景上的对比度,判断其是否满足 WCAG AA 级文本要求,避免因主题色过浅导致标签、链接、输入框提示文字无法被正常阅读,影响用户操作效率。
| 维度 | 本工具 | WebAIM Contrast Checker | 手动计算 (公式) |
|---|---|---|---|
| 数据隐私 | 纯浏览器,零上传 | 上传到服务器 | 完全离线,无数据流动 |
| 处理速度 | 即时反馈 | 需等待页面加载和服务器响应 | 数分钟(取决于计算工具和熟练度) |
| 离线可用 | 支持(页面加载后) | 不支持 | 支持(需自备计算器或软件) |
| 颜色格式支持 | Hex、RGB、HSL、颜色选择器 | Hex 为主 | 需手动转换颜色格式 |
| 文本大小区分 | 支持(AA/AAA 对大小文本有不同要求) | 支持 | 需人工判断和查表 |
| 批量处理 | 不支持(单次对比) | 不支持(单次对比) | 支持(通过脚本或软件批量计算) |
| 操作门槛 | 低,可视化界面 | 低,可视化界面 | 高,需理解公式和标准 |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| #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:文字与背景同色 |
背景色 #FFFFFF,文字色留空或默认 #000000同时填入前景色(文字)和背景色,如文字色 #333333,背景色 #F5F5F5对比度是前景与背景的比值,缺一不可;只填背景色无法计算有效对比度,结果无意义
输入 #fff 和 #ffffff 混用统一使用 6 位十六进制,如 #FFFFFF 和 #333333#fff 等价于 #ffffff,但不同工具对缩写的解析可能不一致;统一 6 位避免歧义
输入 rgba(255, 0, 0, 0.5) 作为背景色先计算实际混合色(如背景色 #FFFFFF 与半透明红混合后的颜色),再用纯色输入WCAG 对比度计算基于不透明颜色;带透明度的颜色需要先与背景混合成实色再测试,否则结果不可靠
只检查 AA 普通文本(4.5:1),用于 12px 灰色提示文字检查 AA 大文本(3:1)或 AAA 级(7:1),根据实际文字大小和用途选择标准WCAG 对普通文本(<18px 或 <14px 加粗)要求 4.5:1,大文本仅需 3:1;AAA 级要求更高,需按场景选择
输入渐变背景的起始色 #FF0000 作为唯一背景色取渐变或图片中最暗/最亮区域的颜色分别测试,或使用工具提供的平均色渐变和图片背景没有单一颜色;对比度需在文字覆盖区域最差条件下(最暗或最亮)满足标准,否则部分区域可能不可读
14px 普通文字按普通文本标准(4.5:1)测试14px 加粗文字按大文本标准(3:1)测试WCAG 定义大文本为 ≥18px 普通或 ≥14px 加粗;加粗使文字更易读,阈值降低,需正确分类
输入 hsl(0, 100%, 50%) 但工具只支持十六进制将 HSL 转换为十六进制,如 #FF0000,再输入不同工具支持的格式不同;本工具仅接受十六进制(#RRGGBB),输入其他格式会解析失败或得到错误结果
看到对比度 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 通道。
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 个高频疑问