根据 WCAG 2.1 标准计算任意前景色与背景色的对比度，实时预览 AA/AAA 结果并导出可访问配色。
工具功能
- 实时颜色选择: 使用 Ant Design 颜色选择器调整前景色和背景色，或输入精确的 HEX 值。
- WCAG 矩阵: 在单个表格中查看普通文本、大文本和 UI 图形的 AA/AAA 要求。
- 精确亮度: 对比度比率遵循 WCAG 2.1，使用线性化 RGB 通道，并包含每种颜色的亮度读数。
- 预览块: 在实时示例卡片中使用您选择的配色方案测试标题和段落。
使用方法
- 选择颜色: 为前景色和背景色选择或粘贴 HEX 值。
- 查看比率: 检查计算的对比度比率和 AA/AAA 表格，了解通过/失败情况。
- 调整文案: 编辑示例文本以预览真实标签、按钮或营销文案。
生成原理
相对亮度
每个 RGB 通道在使用系数 0.2126、0.7152 和 0.0722 计算亮度之前，使用 WCAG 伽马曲线转换为线性值。
对比度比率
比率公式 (L1 + 0.05) / (L2 + 0.05) 比较较亮和较暗的颜色，确保跨设备的一致可读性。
阈值
AA 普通文本需要 ≥ 4.5:1，大文本 ≥ 3:1，AAA 普通需要 7:1，AAA 大文本 4.5:1，图形对象应满足 3:1。
常见问题
- 大文本是否使用不同的阈值？
- 是的。≥ 18px 常规或 14px 粗体的文本符合大文本标准，AA 只需要 3:1，AAA 只需要 4.5:1。
- 如何测试渐变？
- 检查渐变中最亮和最暗的停止点。每个停止点对都应满足所需的比率。
- 图标是否算作文本？
- 实心图标和基本 UI 图形应相对于其背景至少满足 3:1 对比度。
相关文档
- WCAG 2.1 Contrast (Success Criterion 1.4.3) - Official guidance on minimum contrast levels for text and images of text.
- WCAG 2.1 Contrast (1.4.6) - Enhanced contrast requirements for AAA conformance.
- MDN - Calculating luminance - Background on the linear RGB formula used in accessibility tooling.
- W3C - Contrast ratio math - Details on the ratio formula, rounding, and rationale.
- Inclusive Design Cards - Tips on pairing colors and typography for diverse audiences.