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

灰度对比度检测 - 视觉重量分析

14
0
0
0

灰度对比度检测 & 视觉重量分析

检测 WCAG 对比度标准 · 灰度转换 · 视觉重量评估 · 无障碍设计辅助

前景色 (文字)
灰度: 41  |  亮度: 0.03
背景色
灰度: 249  |  亮度: 0.94
快捷预设: 前景 | 背景
对比度比率
12.19
WCAG AAA
AAA
≥ 7:1
AA
≥ 4.5:1
AA Large
≥ 3:1
灰度对比度分析
前景色灰度值
41
黑 0白 255
背景色灰度值
249
黑 0白 255
灰度对比度: 6.08 灰度 AA
灰度对比度 ≥ 3:1 时，色盲用户通常也能区分文字与背景
实时预览

预览文字 Heading

这是一段正文内容，用于测试阅读舒适度。The quick brown fox jumps over the lazy dog.

小号文字 · Small text · 此处测试小字体在选定颜色下的清晰度。

上方为前景色/背景色实际渲染效果
视觉重量分析
前景色
72 中等偏重
背景色
8 轻
视觉重量差: 64 分 — 前景色明显重于背景色，层次清晰
视觉重量综合亮度、饱和度和色相温度评估。高重量颜色更吸引注意力。
常见问题与知识点
WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）是由 W3C 制定的国际标准。其中对比度要求：AAA级需要至少 7:1 的对比度；AA级需要至少 4.5:1；AA Large（大文字，18px+或14px+粗体）需要至少 3:1。对比度越高，文字越容易被阅读，尤其对低视力用户和老年用户至关重要。
对比度按照 WCAG 公式计算：首先将 sRGB 颜色值转换为线性 RGB，然后计算相对亮度 L = 0.2126×R + 0.7152×G + 0.0722×B。对比度 = (L_较亮 + 0.05) / (L_较暗 + 0.05)。该公式考虑了人眼对不同波长光线的敏感度差异（绿色最敏感，蓝色最不敏感）。
灰度值使用加权公式：Gray = 0.299×R + 0.587×G + 0.114×B，这模拟了人眼对亮度的感知。灰度对比度反映了色盲用户（尤其是红绿色盲）在无法区分色彩时对内容的辨别能力。如果两个颜色在灰度下对比度 < 2:1，色盲用户可能完全无法区分。
视觉重量（Visual Weight）是设计中衡量元素吸引注意力程度的指标。它综合考虑：亮度（暗色更重）、饱和度（鲜艳更重）、色相温度（暖色如红橙更重，冷色如蓝更轻）。理解视觉重量有助于创建平衡的页面布局，确保重要元素获得应有的关注度，同时避免页面某处"过重"而破坏整体和谐。
AAA（7:1+）是最严格标准，适合需要最高可读性的场景，但可能限制设计自由度。AA（4.5:1+）是大多数网站的目标标准，平衡了可读性与设计灵活性。AA Large（3:1+）仅适用于大号文字。对于正文内容，建议至少达到 AA 级；对于标题和大字，AA Large 通常足够。如果您的用户包含老年人或视障群体，建议尽可能向 AAA 靠拢。
全球约 8% 的男性和 0.5% 的女性存在色觉障碍。设计时应注意：1) 不要仅依赖颜色传达信息（可搭配图标、形状、纹理）；2) 检查灰度对比度——如果灰度下两个颜色难以区分，色盲用户也会遇到困难；3) 红绿组合尤其需要避免依赖色彩区分；4) 使用本工具检查灰度对比度，确保 ≥ 3:1 的灰度对比度以保障基本可区分性。
🔧 相关工具