颜色对比度检测工具

在线颜色对比度检测工具,按 WCAG 标准计算前景文字与背景色的对比度比值,判断是否通过 AA/AAA 无障碍标准,适合网页和 App 设计。

这是示例正文(24px)
这是示例大字(36px)
14.25
对比度比值
通过
WCAG AA 正文(≥4.5:1)
通过
WCAG AA 大字(≥3:1)
通过
WCAG AAA 正文(≥7:1)
通过
WCAG AAA 大字(≥4.5:1)

工具介绍

本工具用于检测前景色与背景色的对比度,验证是否符合WCAG(Web内容无障碍指南)的可访问性标准,帮助开发者设计更友好的网页内容。

使用方法

分别输入前景色和背景色的HEX颜色代码(支持#开头的3位或6位格式,如#fff或#FFFFFF),工具会实时计算对比度并自动判断是否符合WCAG标准,同时预览两种颜色搭配的文字效果。

计算原理

对比度计算使用WCAG标准定义的相对亮度公式:

  1. 将HEX颜色转换为RGB分量
  2. 计算每个颜色的相对亮度:L = 0.2126 * Rs + 0.7152 * Gs + 0.0722 * Bs,其中 Rs/Gs/Bs 是校正后的RGB分量
  3. 对比度比值 = (L1 + 0.05) / (L2 + 0.05),L1是较亮颜色的相对亮度,L2是较暗颜色的相对亮度

WCAG标准说明

什么是WCAG标准?

WCAG全称Web内容无障碍指南,是国际上公认的网页无障碍设计标准,对比度要求是其中重要的一项,帮助视力障碍用户更好地阅读网页内容。

大字和正文怎么区分?

WCAG标准定义:大字是指字号大于等于18磅(约24像素),或者加粗且字号大于等于14磅(约18.5像素)的文字,不属于这个范围的都是正文。

什么是HEX颜色格式?

HEX颜色是网页中常用的颜色表示方法,用#加3位或6位十六进制数字表示颜色,例如#FFFFFF代表白色,#000000代表黑色。

AA和AAA认证有什么区别?

AA是WCAG的最低合规要求,大部分网站需要满足;AAA是更高等级的无障碍要求,一般对无障碍要求高的网站需要满足,比如政府、公共服务网站。