Accessible Color Pair Finder
指导
Accessible Color Pair Finder
查找符合 WCAG 可访问性标准的文本颜色，以匹配任何背景颜色。输入背景颜色，工具将在 HSL 颜色空间中进行搜索，生成文本颜色调色板，以实现 AA 或 AAA 对比度合规。使用示例文本预览每对颜色，检查特定颜色组合，并将可访问的颜色对导出为 CSS 自定义属性。
如何使用
使用颜色选择器或十六进制输入来选择或输入背景颜色。该工具会立即扫描颜色空间，并显示一个包含建议文本颜色的网格，这些颜色将通过您选择的 WCAG 级别。单击任何色块即可将其预览为背景上的文本。要检查特定颜色对，请输入背景和文本颜色，然后查看即时的 AA 常规、AA 大号和 AAA 级别的通过/失败徽章。将您选择的颜色对导出为 CSS 自定义属性，以便直接在您的样式表中使用。
特征
- WCAG 对比度计算 – 根据 WCAG 2.1 规范准确计算相对亮度和对比度
- HSL 网格搜索 – 系统地搜索色相、饱和度和亮度，以查找所有符合要求的文本颜色
- 实时文本预览 – 查看在您选择的背景上使用每种建议颜色渲染的示例常规文本和大号文本
- AA 和 AAA 合规性 – 在 AA 常规 (4.5:1)、AA 大号 (3:1) 和 AAA (7:1) 对比度阈值之间切换
- 特定颜色对检查器 – 输入任意两种颜色，即可获得所有 WCAG 级别的即时通过/失败结果
- 按色相划分的颜色样本 – 按色相系列组织的建议，方便浏览
- 亮度公式显示 – 显示 WCAG 相对亮度计算和透明度值
- CSS 导出 – 将可访问的颜色对复制为 CSS 自定义属性，即可在您的样式表中使用
常问问题
-
什么是 WCAG 对比度比，为什么它很重要？
WCAG（Web 内容可访问性指南）定义了文本和背景颜色之间的最低对比度比率，以确保视觉障碍人士的可读性。对比度比率范围从 1:1（无对比度）到 21:1（最大值，黑白）。AA 级别要求常规文本为 4.5:1，大号文本为 3:1。AAA 级别要求常规文本为 7:1。满足这些标准可确保约 1/12 的男性和 1/200 的女性（患有色觉缺陷）以及视力低下者能够访问您的网站。
-
AA 和 AAA 合规性之间有什么区别？
AA 是最低推荐的可访问性级别，要求常规大小文本的对比度比率为 4.5:1，大号文本（18pt 或 14pt 加粗及以上）的对比度比率为 3:1。AAA 是最高级别，要求常规文本为 7:1，大号文本为 4.5:1。大多数组织的目标是 AA 合规性，因为它提供了良好的可访问性，同时允许合理的设 计灵活性。AAA 是政府或医疗保健网站正文等关键内容的理想选择。大号文本的要求较低，因为较大的字符本身就更容易阅读。
-
相对亮度是如何计算的？
相对亮度衡量颜色在 0（黑色）到 1（白色）范围内的感知亮度。WCAG 公式首先通过除以 255 并应用伽马校正将 sRGB 值（0-255）转换为线性 RGB。对于 0.04045 或更低的值，除以 12.92。对于更高的值，加 0.055，除以 1.055，然后将结果提高到 2.4 次幂。最终亮度为 0.2126 乘以红色，加上 0.7152 乘以绿色，再加上 0.0722 乘以蓝色。这些权重反映了人眼对亮度的感知方式，其中绿色贡献最大。
-
我可以使用此工具进行品牌颜色选择吗？
是的。输入您的品牌背景颜色，该工具将显示所有符合可访问性标准的文本颜色。这在品牌开发或重新设计期间特别有用，届时您需要确保您的颜色调色板适用于可访问的网页设计。您还可以检查现有的品牌颜色对，以验证它们是否符合 WCAG 要求。CSS 导出功能允许您将可访问的颜色对直接复制到您的样式表中，从而节省开发时间并从一开始就确保合规性。
