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

无障碍图表模式库 - 颜色与纹理组合示例

11
0
0
0

🎨 无障碍图表纹理模式库

颜色 + 纹理双重编码，确保色盲用户也能准确区分数据类别。符合 WCAG 2.1 无障碍标准。

📐 纹理模式库

共 12 种纹理组合，点击可查看详情

📊 实际图表演示

柱状图应用纹理填充，切换下方按钮模拟不同色盲视角

图例

📋 WCAG 对比度标准速查

等级 普通文本 大文本 (≥18px加粗/≥24px) 图形/UI组件
AAA ≥ 7:1 ≥ 4.5:1 ≥ 3:1 (推荐)
AA ≥ 4.5:1 ≥ 3:1 ≥ 3:1
不合格 < 4.5:1 < 3:1 < 3:1

❓ 常见问题与知识点

无障碍图表设计相关问答

全球约8%的男性和0.5%的女性患有某种形式的色盲（色觉障碍）。仅依靠颜色区分数据类别，色盲用户可能完全无法分辨。纹理（条纹、点阵、网格等）提供了第二重视觉编码，即使颜色无法区分，纹理也能帮助用户识别不同数据系列。这符合WCAG 2.1 准则1.4.1——不要仅依靠颜色传递信息。

色盲友好配色方案应具备：1) 足够的亮度差异（明暗区别）；2) 避免仅依赖红-绿对比；3) 蓝色+橙色组合通常对大多数色盲类型友好；4) 使用纹理或符号作为辅助区分手段。推荐的色盲友好调色板包括Viridis、Magma、Plasma等感知均匀的色阶，以及Okabe-Ito调色板（橙、天蓝、蓝绿、黄、蓝、朱红、黑）。

WCAG对比度计算公式基于相对亮度（Relative Luminance）：
L = 0.2126 × R + 0.7152 × G + 0.0722 × B（R/G/B需先进行gamma校正转为线性值）
对比度 = (L₁ + 0.05) / (L₂ + 0.05)，其中L₁为较亮者。结果范围1:1到21:1。本工具自动计算每种颜色在白色背景(#FFFFFF)上的对比度并标注WCAG等级。

常见图表纹理包括：竖条纹（垂直等距线）、横条纹（水平等距线）、斜条纹（45°对角线）、点阵（规则圆点）、网格（十字交叉线）、交叉线（双方向斜线）、菱形格、波浪线、空心圆、棋盘格等。选择纹理时应确保不同纹理之间有足够的视觉差异，避免混淆。

可使用Canvas 2D API绘制纹理图案，通过ctx.clip()限制在数据区域；或使用SVG <pattern>元素定义可重复的纹理，然后通过fill="url(#pattern-id)"引用；在CSS中也可使用repeating-linear-gradient或conic-gradient创建简单纹理。本工具使用Canvas绘制，适合动态图表库（如Chart.js、D3.js）集成。

本工具提供的色盲模拟使用CSS滤镜近似，可给出大致感受，但并非100%精确。真实的色盲模拟需要基于LMS色彩空间的矩阵变换（如Brettel-Viénot模型）。如需精确模拟，建议使用专业工具如Color Oracle、Stark插件、或Chrome DevTools的渲染模拟功能。本工具的模拟主要用于快速参考和设计阶段检查。
✅ 已复制到剪贴板
🔧 相关工具