无需登录 数据私有 本地保存

颜色对比度实时分析器 - 多标准WCAG AA/AAA检测

11
0
0
0

🎨 颜色对比度实时分析器

WCAG 2.1 AA / AAA 标准合规检测 · 实时预览 · 多维度评级

前景色 (文字色)
前景色预览
HEX
RGB: 30, 41, 59 HSL: 217°, 33%, 17%
快捷预设
背景色
背景色预览
HEX
RGB: 255, 255, 255 HSL: 0°, 0%, 100%
快捷预设
推荐配色组合
实时预览
标题文字 Heading (大文本)

这是一段正文段落，用于模拟普通文本在页面中的实际显示效果。普通文本通常为16px左右，行高适中，便于阅读。

UI 按钮组件 轮廓按钮

← 以上内容使用您选择的前景色和背景色渲染

对比度分析
14.59
: 1 对比度
1:13:14.5:17:121:1
AAA 级 - 全部通过
WCAG 2.1 合规性检测详情
标准级别 适用对象 要求对比度 实际对比度 判定结果
AA 普通文本 (<18px 非粗体) ≥ 4.5:1 14.59:1 通过
AA 大文本 (≥18px 或 ≥14px粗体) ≥ 3:1 14.59:1 通过
AA UI组件 / 图形对象 ≥ 3:1 14.59:1 通过
AAA 普通文本 (<18px 非粗体) ≥ 7:1 14.59:1 通过
AAA 大文本 (≥18px 或 ≥14px粗体) ≥ 4.5:1 14.59:1 通过
前景色详细信息
HEX
#1e293b
RGB
30, 41, 59
HSL
217°, 33%, 17%
相对亮度 (Luminance)
0.023
背景色详细信息
HEX
#ffffff
RGB
255, 255, 255
HSL
0°, 0%, 100%
相对亮度 (Luminance)
1.000

常见问题与知识点

WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）由W3C制定，是国际公认的网页无障碍标准。其中颜色对比度要求确保文字内容对视力障碍用户（包括色弱、低视力人群）清晰可辨。WCAG 2.1定义了明确的对比度阈值：AA级要求普通文本对比度至少4.5:1，大文本至少3:1；AAA级更为严格，普通文本需达到7:1，大文本需达到4.5:1。对比度范围从1:1（完全相同颜色）到21:1（纯黑与纯白）。

AA级是大多数网站应该达到的最低标准，满足法律和行业基本无障碍要求。普通文本对比度≥4.5:1，大文本（≥18px或≥14px粗体）≥3:1。AAA级是最高标准，适用于对无障碍要求极高的场景（如政府网站、医疗平台）。AAA要求普通文本≥7:1，大文本≥4.5:1。实际项目中，AA级已能满足绝大多数用户需求，AAA级作为加分项追求。本工具同时检测两个级别，帮助你全面评估颜色组合。
对比度计算基于相对亮度（Relative Luminance）。首先将sRGB颜色值（0-255）归一化到0-1范围，然后对每个通道应用伽马校正：若值≤0.03928，使用线性变换（÷12.92）；否则使用幂函数（((值+0.055)/1.055)^2.4）。相对亮度公式为：L = 0.2126×R + 0.7152×G + 0.0722×B（反映了人眼对绿色的敏感度最高）。最终对比度 = (较亮颜色L + 0.05) / (较暗颜色L + 0.05)，结果范围1:1到21:1。本工具所有计算严格遵循W3C规范。
根据WCAG定义，大文本指：①字体大小≥18pt（约24px）的常规字重文字；或②字体大小≥14pt（约18.67px）且字重为粗体（≥700）的文字。大文本由于本身更易辨认，对比度要求相对宽松（AA仅需3:1，AAA需4.5:1）。普通文本（小于上述阈值）则需要更高对比度（AA需4.5:1，AAA需7:1）。在我们的预览区中，标题模拟了大文本场景，正文段落模拟了普通文本场景。
WCAG 2.1规定，UI组件（如按钮边框、输入框轮廓、图标）和用于传达信息的图形对象，与其相邻背景之间需要至少3:1的对比度。这确保了用户可以清晰辨识交互元素。例如，一个浅灰色边框在白色背景上可能对比度仅1.5:1，导致低视力用户无法看到输入框边界。本工具同时检测UI组件对比度，帮助确保所有界面元素都符合无障碍标准。注意：纯装饰性元素不受此限制。
许多品牌色（特别是浅色系如浅黄、浅蓝、浅灰背景搭配中浅色文字）难以达到4.5:1的AA标准。解决方案包括：①加深文字颜色——将浅灰文字改为深灰或接近黑色；②加深背景色——适当增加背景色饱和度或亮度差；③增大字体——若文字≥18px或14px粗体，只需满足3:1（AA）即可；④使用双色方案——标题使用品牌色，正文使用高对比度中性色；⑤添加描边或阴影增强文字可辨性。建议在设计初期就使用本工具验证，避免后期大规模返工。
不一定。虽然纯黑(#000000)与纯白(#ffffff)的21:1对比度在技术上最佳，但过高的对比度可能导致视觉疲劳，尤其在长时间阅读时。许多设计师偏好柔和的深灰（如#1e293b）搭配浅灰背景（如#f8fafc），对比度约12-15:1，既远超AAA标准，又比纯黑纯白更舒适。对于暗色模式，纯白文字在纯黑背景上可能产生"光晕效应"，推荐使用略暗的白色（如#e2e8f0）搭配深色背景（如#0f172a）。本工具帮助你找到既有良好可读性又视觉舒适的平衡点。
APCA（Advanced Perceptual Contrast Algorithm）是WCAG 3.0草案中提出的新一代对比度算法，旨在更准确地反映人眼感知。与WCAG 2.x的主要区别：APCA考虑了极性（浅色文字在深色背景上 vs 深色文字在浅色背景上感知不同）、字体大小和字重的非线性影响、以及环境光适应等因素。目前WCAG 3.0尚未正式发布，WCAG 2.1/2.2仍是现行法律标准。本工具目前采用WCAG 2.1标准算法（全球广泛认可），待WCAG 3.0正式发布后将考虑同时支持两种标准。
🔧 相关工具