色彩无障碍检测算法：WCAG 对比度计算与色盲模拟的工程实现-酒店常州论坛

色彩无障碍检测算法：WCAG 对比度计算与色盲模拟的工程实现

一、色彩无障碍的合规困境：从"看起来可以"到"通过标准"

Web 无障碍指南（WCAG）要求文本与背景之间的对比度达到最低标准——AA 级要求 4.5:1，AAA 级要求 7:1。然而，许多设计师和开发者仅凭视觉判断对比度是否足够，导致大量页面对色觉障碍用户不友好——全球约 8% 的男性和 0.5% 的女性存在色觉障碍。

生产环境中，色彩无障碍检测面临三个核心痛点：第一，对比度计算不直观——WCAG 的对比度公式基于相对亮度，而非简单的颜色差异，开发者难以直觉判断；第二，色盲模拟缺乏工具——设计稿中的颜色对正常视觉用户可区分，但对红绿色盲用户可能完全相同；第三，自动化检测覆盖率低——手动检查每个页面的每个文本元素不现实，需要自动化工具。

这个问题的本质是：色彩无障碍检测需要算法化——将 WCAG 标准转化为可计算的对比度公式，将色觉障碍模拟转化为颜色变换矩阵，实现全自动化检测。

二、色彩无障碍检测的底层机制

flowchart TB subgraph 对比度计算["WCAG 对比度计算"] FG[前景色] --> LUM1[相对亮度 L1] BG[背景色] --> LUM2[相对亮度 L2] L1 --> RATIO[对比度 = (L1+0.05)/(L2+0.05)] L2 --> RATIO RATIO --> CHECK{达标?} CHECK --> |≥4.5| AA[AA 合规] CHECK --> |≥7| AAA[AAA 合规] CHECK --> |<4.5| FAIL[不合规] end subgraph 色盲模拟["色盲模拟变换"] NORMAL[正常视觉颜色] --> M1[红色盲矩阵] NORMAL --> M2[绿色盲矩阵] NORMAL --> M3[蓝色盲矩阵] M1 --> PROT[红色盲模拟色] M2 --> DEUT[绿色盲模拟色] M3 --> TRIT[蓝色盲模拟色] end

关键机制解析：

相对亮度计算：WCAG 定义的颜色相对亮度 L = 0.2126 × R' + 0.7152 × G' + 0.0722 × B'，其中 R'、G'、B' 是 gamma 校正后的 sRGB 分量。这个公式反映了人眼对绿色最敏感的生理特性。
对比度比率：对比度 = (L_lighter + 0.05) / (L_darker + 0.05)。加 0.05 是为了补偿显示器的最低亮度，避免纯黑（L=0）导致无穷大比率。
色盲模拟矩阵：色觉障碍可以通过线性变换矩阵近似模拟。红色盲和绿色盲是最常见的类型，模拟后红绿区域的颜色会趋同，导致依赖红绿区分的 UI 元素无法辨识。

三、色彩无障碍检测的工程实现

3.1 WCAG 对比度计算

/** * WCAG 2.1 对比度计算 * 完整实现sRGB到相对亮度的转换 */ // sRGB分量gamma校正 function sRGBtoLinear(colorChannel: number): number { // colorChannel范围0-1 if (colorChannel <= 0.04045) { return colorChannel / 12.92; } return Math.pow((colorChannel + 0.055) / 1.055, 2.4); } // 计算相对亮度 function relativeLuminance(r: number, g: number, b: number): number { const [rLinear, gLinear, bLinear] = [r, g, b].map( c => sRGBtoLinear(c / 255) ); return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear; } // 计算对比度比率 function contrastRatio( fg: { r: number; g: number; b: number }, bg: { r: number; g: number; b: number } ): number { const l1 = relativeLuminance(fg.r, fg.g, fg.b); const l2 = relativeLuminance(bg.r, bg.g, bg.b); const lighter = Math.max(l1, l2); const darker = Math.min(l1, l2); return (lighter + 0.05) / (darker + 0.05); } // WCAG合规检查 interface ContrastResult { ratio: number; aa: boolean; // AA级: 普通文本≥4.5, 大文本≥3 aaa: boolean; // AAA级: 普通文本≥7, 大文本≥4.5 aaLarge: boolean; // 大文本AA } function checkContrast( fg: { r: number; g: number; b: number }, bg: { r: number; g: number; b: number }, isLargeText: boolean = false ): ContrastResult { const ratio = contrastRatio(fg, bg); return { ratio: parseFloat(ratio.toFixed(2)), aa: isLargeText ? ratio >= 3 : ratio >= 4.5, aaa: isLargeText ? ratio >= 4.5 : ratio >= 7, aaLarge: ratio >= 3, }; }

3.2 色盲模拟

/** * 色盲模拟变换矩阵 * 基于Machado et al. 2009的研究 */ type ColorBlindnessMatrix = number[][]; // 红色盲（Protanopia）变换矩阵 const PROTANOPIA_MATRIX: ColorBlindnessMatrix = [ [0.56667, 0.43333, 0.00000], [0.55833, 0.44167, 0.00000], [0.00000, 0.24167, 0.75833], ]; // 绿色盲（Deuteranopia）变换矩阵 const DEUTERANOPIA_MATRIX: ColorBlindnessMatrix = [ [0.62500, 0.37500, 0.00000], [0.70000, 0.30000, 0.00000], [0.00000, 0.30000, 0.70000], ]; // 蓝色盲（Tritanopia）变换矩阵 const TRITANOPIA_MATRIX: ColorBlindnessMatrix = [ [0.95000, 0.05000, 0.00000], [0.00000, 0.43333, 0.56667], [0.00000, 0.47500, 0.52500], ]; function simulateColorBlindness( color: { r: number; g: number; b: number }, matrix: ColorBlindnessMatrix ): { r: number; g: number; b: number } { const rgb = [color.r, color.g, color.b]; const simulated = matrix.map(row => row.reduce((sum, val, i) => sum + val * rgb[i], 0) ); return { r: Math.round(Math.min(255, Math.max(0, simulated[0]))), g: Math.round(Math.min(255, Math.max(0, simulated[1]))), b: Math.round(Math.min(255, Math.max(0, simulated[2]))), }; } // 检查两种颜色在色盲模拟后是否可区分 function isDistinguishable( color1: { r: number; g: number; b: number }, color2: { r: number; g: number; b: number }, type: 'protanopia' | 'deuteranopia' | 'tritanopia' = 'deuteranopia' ): boolean { const matrices = { protanopia: PROTANOPIA_MATRIX, deuteranopia: DEUTERANOPIA_MATRIX, tritanopia: TRITANOPIA_MATRIX, }; const matrix = matrices[type]; const sim1 = simulateColorBlindness(color1, matrix); const sim2 = simulateColorBlindness(color2, matrix); // 计算模拟后的颜色差异（欧氏距离） const distance = Math.sqrt( (sim1.r - sim2.r) ** 2 + (sim1.g - sim2.g) ** 2 + (sim1.b - sim2.b) ** 2 ); // 阈值：距离小于30认为不可区分 return distance >= 30; }

3.3 自动化页面检测

/** * 页面色彩无障碍自动检测 * 扫描所有文本元素的对比度 */ async function auditPageContrast(page: any): Promise<ContrastIssue[]> { const issues: ContrastIssue[] = []; // 获取所有文本元素的计算样式 const elements = await page.evaluate(() => { const textElements = document.querySelectorAll( 'p, span, h1, h2, h3, h4, h5, h6, a, button, label, input, textarea, select' ); return Array.from(textElements).map(el => { const style = window.getComputedStyle(el); const text = el.textContent?.trim() || ''; if (!text) return null; return { text: text.substring(0, 50), tagName: el.tagName, color: style.color, backgroundColor: style.backgroundColor, fontSize: parseFloat(style.fontSize), fontWeight: style.fontWeight, }; }).filter(Boolean); }); for (const el of elements) { const fg = parseColor(el.color); const bg = parseColor(el.backgroundColor); if (!fg || !bg) continue; const isLargeText = el.fontSize >= 18 || (el.fontSize >= 14 && parseInt(el.fontWeight) >= 700); const result = checkContrast(fg, bg, isLargeText); if (!result.aa) { issues.push({ element: el.tagName, text: el.text, foreground: el.color, background: el.backgroundColor, ratio: result.ratio, required: isLargeText ? 3 : 4.5, level: isLargeText ? 'AA (large text)' : 'AA', }); } } return issues; }

四、色彩无障碍检测的边界分析

WCAG 对比度公式的局限

WCAG 的对比度公式基于 sRGB 和相对亮度，未考虑颜色色相和字体渲染。某些高对比度但低色相差异的组合（如深蓝文字在黑背景上）虽然通过 WCAG 标准，但实际可读性仍然不佳。

色盲模拟的精度

线性变换矩阵是色盲模拟的近似方法，精度有限。更精确的模拟需要考虑视锥细胞的光谱响应曲线，但计算复杂度更高。

适用边界：色彩无障碍检测适合所有面向公众的 Web 产品，尤其是政府、教育和金融类应用。对于内部工具，AA 级合规是最低要求。

五、总结

色彩无障碍检测需要将 WCAG 标准算法化，实现自动化巡检。落地路线建议：

起步阶段：实现 WCAG 对比度计算和合规检查函数，集成到组件库的 lint 规则中。
优化阶段：实现色盲模拟变换，在设计工具中提供实时色盲预览。
强化阶段：实现页面级自动化检测，扫描所有文本元素的对比度，生成合规报告。
精细化阶段：将色彩无障碍检测集成到 CI/CD 流程，不合规的变更被自动拦截。

企业官网建设流程全解析