🎨 WCAG 颜色对比度矩阵测试

WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）由 W3C 制定，是国际公认的网页无障碍标准。其中对比度要求确保文字内容对所有用户（包括视力障碍者）都可读。

对比度比率范围从 1:1（相同颜色）到 21:1（纯黑对纯白）。WCAG 2.1 定义了三个一致性级别：

• A 级：最低要求，不包含对比度具体数值
• AA 级：正常文本对比度 ≥ 4.5:1，大文本 ≥ 3:1
• AAA 级：正常文本对比度 ≥ 7:1，大文本 ≥ 4.5:1

WCAG 使用相对亮度（Relative Luminance）来计算对比度：

1. 将 sRGB 颜色值线性化（gamma 校正）
2. 计算相对亮度：L = 0.2126 × R + 0.7152 × G + 0.0722 × B
3. 对比度 = (L₁ + 0.05) / (L₂ + 0.05)，其中 L₁ 是较亮的亮度值

绿色通道权重最高（0.7152），因为人眼对绿色最敏感。

WCAG 定义大文本（Large Text）为：

• ≥ 18pt（约 24px）的正常字重文字，或
• ≥ 14pt（约 18.67px）的粗体文字

大文本由于字形更大、更易辨认，对比度要求较低（AA 仅需 3:1，AAA 需 4.5:1）。

行代表文字颜色（前景色），列代表背景色。交叉单元格显示该颜色对的：

• 实际视觉预览（背景=列颜色，文字=行颜色）
• 精确对比度比率数值
• WCAG 等级标签（AAA / AA / AA大文本 / 未通过）

对角线单元格（相同颜色）对比度恒为 1:1。您可以添加、删除、编辑颜色，矩阵实时更新。点击预设可快速加载示例调色板。

对比度是必要但不充分条件。完整的无障碍设计还需考虑：

• 不依赖颜色传达信息（色盲友好）
• 足够的字体大小和行间距
• 键盘可访问性和屏幕阅读器兼容性
• 焦点指示器和语义化 HTML

本工具专注于对比度检测，是构建无障碍界面的第一步。

WCAG 标准不区分设备类型。无论是桌面端、平板还是手机，对比度要求完全相同。但移动设备在户外强光下使用时，实际可读性可能下降，因此建议在移动端也尽量达到 AA 级别以上。