👁️ 色盲色弱模拟器 — 配色无障碍检查工具
基于 Brettel / Viénot LMS 色彩空间转换算法，模拟红色盲、绿色盲、蓝色盲、红绿蓝色弱、全色盲共 8 种色觉状态下看到的颜色。 支持单色模拟、整套配色方案风险检测（ΔE 色差）、WCAG 对比度校验，帮你做出所有人都能看清的设计。
🎨 一、单色模拟
点击任意色块可复制其 HEX 值
🧩 二、配色方案检查（2~8 色）
20
🔍 三、WCAG 对比度检查
大号标题文字 Large Text 24px
这是一段正文示例文字，用于检验小字号下的可读性。Normal body text 14px.
—
| 色觉模式 | 前景色 | 背景色 | 对比度 | AA 正文 4.5:1 | AA 大字 3:1 | AAA 7:1 |
|---|
♿ 四、无障碍配色设计建议
- 不要只靠颜色传递信息。红色="错误"、绿色="成功"对红绿色盲几乎失效，务必再加上图标（✓ ✗ ⚠）、文字标签或图案填充。
- 图表用形状 + 纹理区分。折线图用实线/虚线/点线加不同标记点；柱状图用斜线、点阵等填充图案；饼图直接把标签写在扇区上。
- 拉开明度差而不是色相差。色觉异常人群对明暗的感知基本正常，把配色转成灰度后仍能区分，就是安全的配色。
- 避开高危配色组合：红 × 绿、绿 × 棕、蓝 × 紫、浅绿 × 黄、蓝 × 灰。改用蓝 × 橙这类"蓝黄轴"配色，对红绿色盲最友好。
- 保证足够对比度：正文 ≥ 4.5:1，大字（≥18.66px 粗体或 ≥24px）≥ 3:1，追求 AAA 则 ≥ 7:1；UI 控件与图形边界 ≥ 3:1。
- 链接要有下划线，表单错误提示要有文字说明而不只是红框，必填项用星号而不只是红色标签。
- 相关数据：全球约 8% 的男性、0.5% 的女性存在色觉异常，其中绝大多数是红绿色觉障碍（红色盲 / 绿色盲 / 红绿色弱），完全的全色盲极为罕见（约 1/30000）。
🧪 算法说明
模拟流程：sRGB → 去伽马线性化 → Viénot(1999) RGB↔LMS 矩阵 → 对应色盲类型的 LMS 投影矩阵 → 逆变换回线性 RGB → 重新伽马编码。 色弱（Anomalous Trichromacy）按 60% 严重度在原色与全色盲结果之间线性插值；全色盲采用 CIE 亮度权重 0.2126 / 0.7152 / 0.0722 转灰度。 色差判定使用 CIE76 ΔE（sRGB → XYZ(D65) → CIELAB 后求欧氏距离），一般认为 ΔE < 2.3 肉眼难辨、ΔE < 20 在界面场景中已属"容易混淆"。
📘 使用说明
- 用取色器或输入 HEX 选择要检查的颜色
- 查看该颜色在八种色觉模式下的呈现效果
- 添加多个颜色组成配色方案，查看易混淆提示
- 输入前景背景色检查 WCAG 对比度是否达标
❓ 常见问题
Q: 色盲人群有多少？
A: 男性约 8%、女性约 0.5% 存在不同程度的色觉异常，其中红绿色盲（含红色弱、绿色弱）占绝大多数，蓝黄色盲极为罕见，全色盲不足万分之一。按全球比例算，每 12 个男性用户中就有 1 个看不清你的红绿配色。
Q: WCAG 对比度标准是多少？
A: 对比度 =（较亮色相对亮度 + 0.05）÷（较暗色相对亮度 + 0.05）。AA 级要求正文至少 4.5:1，大字（18pt 或加粗 14pt 以上）至少 3:1；AAA 级要求正文 7:1、大字 4.5:1。UI 组件和图形对象边界至少 3:1。
Q: 配色时怎么避免色盲用户看不清？
A: 六条准则：不要只用颜色传递信息，配合图标或文字标签；用明度差而不是纯色相差；避开红绿直接搭配，改用蓝橙；给图表加纹理或形状区分；关键状态加辅助符号（✓ ✗）；上线前用模拟器过一遍。
