颜色对比度的计算方法

1. 颜色对比度的计算
2. 查看颜色对比度的方法
3. WCAG对比度标准指南

颜色对比度是前端可访问性的关键问题，下面详细介绍其计算与查看方式。

1. 颜色对比度的计算

颜色对比度计算遵循 WCAG 2.0 标准，采用“相对亮度”法，基于人眼对亮度的感知。具体计算步骤如下：

1.1. 步骤1：将sRGB颜色值线性化

日常颜色值（如 #RRGGBB 或 rgb(r, g, b)）经伽马校正，需先转换为线性RGB值。
对于每个颜色通道（R, G, B），将8位值（0 - 255）转为0到1的比例值：

1
2
3

let R_sRGB = R8 / 255;
let G_sRGB = G8 / 255;
let B_sRGB = B8 / 255;

然后对各通道进行反伽马校正：

if (R_sRGB <= 0.03928) {
    R_linear = R_sRGB / 12.92;
} else {
    R_linear = Math.pow((R_sRGB + 0.055) / 1.055, 2.4);
}

对G和B通道重复此计算。

1.2. 步骤2：计算相对亮度

人眼对不同颜色敏感度有别，对绿色最敏感，红色次之，蓝色最不敏感。通过加权和计算相对亮度（L）：

1	L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear

该值（L）介于0（纯黑）到1（纯白）之间。

1.3. 步骤3：计算对比度

对比度为两个颜色相对亮度之比，惯例是将较亮颜色亮度除以较暗颜色亮度：

1	const contrast = (L1 + 0.05) / (L2 + 0.05);

其中：

L1 是较亮颜色的相对亮度。
L2 是较暗颜色的相对亮度。
+ 0.05 为偏移量，处理纯黑色（L = 0）情况，并模拟暗室中屏幕眩光效果。

最终结果：对比度值在 1:1 到 21:1 之间。

1:1 表示无对比度（如白纸上白色文字）。
21:1 为最高对比度（黑纸上白色文字，或白纸上黑色文字）。

2. 查看颜色对比度的方法

实际开发中，无需手动计算，有诸多工具可助快速检查验证。

2.1. 浏览器开发者工具

这是最便捷方法，能在调试网站样式时实时查看。

用 Chrome/Edge/Firefox 等浏览器打开网页。
网页上右键点击，选择“检查”。
在“元素”面板找到要检查文字或元素对应的CSS。
在“样式”面板找到 color 属性。
点击颜色预览框，弹出颜色选择器。
颜色选择器弹出框通常会直接显示当前前景色与背景色的对比度比率。
用 ✅ 或 ❌ 图标直观提示是否符合 AA 或 AAA 级别标准。

2.2. 在线颜色对比度检查器

WebAIM Contrast Checker：https://webaim.org/resources/contrastchecker/

WebAIM是Web Accessibility In Mind的缩写，它是一个成立于1999年的非营利组织，隶属于犹他州立大学。WebAIM 是全球范围内最知名、最权威的Web可访问性知识传播和实践指导机构之一。

2.3. 使用JavaScript代码计算

若需在应用或脚本中集成对比度检查，可使用以下函数：

function getContrastRatio(color1, color2) {
    // 辅助函数：将hex颜色转换为线性亮度
    function getLuminance(hex) {
        // 去除#号
        hex = hex.replace('#', '');
        // 处理3位hex
        if (hex.length === 3) {
            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
        }
        // 转换为RGB
        const r = parseInt(hex.substr(0, 2), 16) / 255;
        const g = parseInt(hex.substr(2, 2), 16) / 255;
        const b = parseInt(hex.substr(4, 2), 16) / 255;

        // 线性化
        const linR = r <= 0.03928? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
        const linG = g <= 0.03928? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
        const linB = b <= 0.03928? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);

        // 计算相对亮度
        return 0.2126 * linR + 0.7152 * linG + 0.0722 * linB;
    }

    const lum1 = getLuminance(color1);
    const lum2 = getLuminance(color2);
    const brighter = Math.max(lum1, lum2);
    const darker = Math.min(lum1, lum2);

    return (brighter + 0.05) / (darker + 0.05);
}

// 使用示例
const ratio1 = getContrastRatio('#ffffff', '#000000');
const ratio2 = getContrastRatio('#4A148C', '#ffffff');
console.log(ratio1.toFixed(2) + ':1'); // 预计输出 "21.00:1"
console.log(ratio2.toFixed(2) + ':1'); // 预计输出 "11.86:1"

运行代码：

1
2
3

node ./contrast.js
21.00:1
11.86:1

3. WCAG对比度标准指南

知晓对比度后，需判断是否“达标”。WCAG定义不同级别要求：

AA级 (最低要求)
- 普通文本：对比度至少 4.5:1
- 大文本：对比度至少 3:1 (通常指18pt/24px以上粗体文本，或24pt/32px以上普通文本)
AAA级 (增强要求)
- 普通文本：对比度至少 7:1
- 大文本：对比度至少 4.5:1
非文本内容（如图标、图表）：对比度至少 3:1