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

无障碍颜色组合测试 - 模拟不同视觉条件下的可读性

可访问性 开发工具 对比度 无障碍 测试 颜色
21
0
0
0

无障碍颜色组合测试

模拟不同视觉条件下的颜色可读性 · WCAG 2.1 对比度检测 · 色盲模拟

预览字号:
实时预览 正常视觉
预览文本 Preview Text

点击预览区域可编辑文字内容

对比度分析
21.00 : 1 AAA 级
1:13:14.5:17:121:1
普通文本 AA (≥4.5:1) ✅ 通过
大文本 AA (≥3:1) ✅ 通过
普通文本 AAA (≥7:1) ✅ 通过
大文本 AAA (≥4.5:1) ✅ 通过
文字色: #1A1A2E
背景色: #F5F5F5
预设颜色组合 （点击应用）
视觉模拟模式 （点击切换主预览）
所有模拟一览
WCAG 2.1 对比度标准
等级普通文本大文本 (≥18px / ≥14px粗体)
AA≥ 4.5:1≥ 3:1
AAA≥ 7:1≥ 4.5:1

* WCAG = Web Content Accessibility Guidelines（网页内容无障碍指南）

常见问题 & 知识点
什么是色盲（色觉障碍）？

色盲是一种遗传性色觉缺陷，影响约8%的男性和0.5%的女性。最常见的是红绿色盲，分为红色盲（Protanopia）和绿色盲（Deuteranopia），患者难以区分红色和绿色。蓝色盲（Tritanopia）较为罕见。

WCAG对比度如何计算？

对比度 = (L1 + 0.05) / (L2 + 0.05)，其中L1为较亮颜色的相对亮度，L2为较暗颜色。相对亮度基于sRGB色彩空间转换，公式为 0.2126×R + 0.7152×G + 0.0722×B（使用线性化RGB值）。

如何为无障碍设计选择颜色？

① 确保文字与背景对比度至少达到4.5:1（AA级）；② 不要仅依赖颜色传达信息，配合图标或文字标签；③ 使用本工具在不同色盲模拟下测试颜色组合；④ 优先选择蓝-黄对比而非红-绿对比。

大文本和小文本的区分标准是什么？

根据WCAG定义，"大文本"指不小于18px（约24px显示尺寸）的常规字重文本，或不小于14px（约19px显示尺寸）的粗体文本。低于此标准的为普通文本，需要更高的对比度。

白内障如何影响颜色感知？

白内障导致晶状体混浊，引起视力模糊、对比度敏感度下降、颜色褪色。严重时晶状体变黄，使颜色感知偏暖。本工具的白内障模拟通过模糊+亮度增强+对比度降低+饱和度降低来近似这一效果。

🔧 相关工具