UD5工具箱
为什么图表需要纹理填充而不只依赖颜色？
全球约8%的男性和0.5%的女性患有某种形式的色觉障碍。仅依靠颜色区分数据类别，色盲用户可能完全无法分辨不同数据系列。纹理提供了第二重视觉编码，即使颜色无法区分，条纹、点阵、网格等纹理特征也能帮助用户识别不同数据系列。这符合WCAG 2.1准则1.4.1的要求，即不要单独依靠颜色传递信息。纹理填充是数据可视化无障碍设计中最实用的技术手段之一。
什么是色盲友好配色方案？
色盲友好配色方案应具备三个关键特征：第一，颜色之间有足够的亮度差异，即使在灰度模式下也能区分；第二，避免仅依赖红绿对比，因为红绿色盲是最常见的色觉障碍类型；第三，蓝色与橙色的组合对大多数色觉障碍类型都友好。推荐的配色方案包括Viridis、Magma、Plasma等感知均匀色阶，以及Okabe-Ito调色板（包含橙、天蓝、蓝绿、黄、蓝、朱红、黑八种颜色）。这些配色方案经过科学验证，能确保绝大多数用户正确区分数据类别。
WCAG对比度如何计算？
WCAG对比度基于相对亮度（Relative Luminance）计算。首先将RGB颜色值进行gamma校正转为线性值，然后按公式 L = 0.2126 x R + 0.7152 x G + 0.0722 x B 计算相对亮度。对比度公式为 (L1 + 0.05) / (L2 + 0.05)，其中L1为较亮颜色的亮度值。计算结果范围从1:1（相同颜色）到21:1（纯黑与纯白）。本工具自动计算每种纹理颜色在白色背景上的对比度数值，并标注其符合的WCAG等级（AAA级、AA级或不合格），方便用户快速判断颜色组合的无障碍合规性。
纹理模式有哪些常见类型？
常见图表纹理模式包括以下几种：竖条纹（垂直等距线条）、横条纹（水平等距线条）、斜条纹（45度对角线）、点阵（规则排列的圆点）、网格（水平与垂直线交叉）、交叉线（两个方向的斜线交叉）、菱形格（旋转45度的方格）、波浪线（正弦曲线）、空心圆（环形图案）、棋盘格（黑白交替方格）。选择纹理时应确保不同纹理之间有足够的视觉差异，相邻数据系列使用差异明显的纹理以避免混淆。密度也是重要参数，过密的纹理在小尺寸图表中可能糊成一片。
如何在代码中实现纹理填充？
纹理填充有三种主流实现方式：第一种是Canvas 2D API方案，使用ctx.createPattern()创建纹理图案，通过ctx.clip()将纹理限制在数据区域，适合Chart.js、D3.js等基于Canvas的图表库。第二种是SVG pattern元素方案，定义标签作为可重复纹理，然后通过fill="url(#pattern-id)"引用，适合需要矢量输出的场景。第三种是CSS渐变方案，使用repeating-linear-gradient或conic-gradient创建简单纹理，适合静态图表。本工具提供这三种方案的完整代码示例，用户可根据项目技术栈选择合适的方案。
色盲模拟工具有多准确？
本工具使用CSS滤镜进行色盲近似模拟，能给出大致的视觉感受，但并非100%精确。CSS滤镜基于简单的颜色变换矩阵，无法完全模拟真实色觉障碍者视网膜的复杂响应。真实的色盲模拟需要基于LMS色彩空间的矩阵变换（如Brettel-Vienot模型），考虑每种色觉障碍类型的具体光谱敏感度曲线。如需精确模拟，建议使用专业工具如Color Oracle桌面应用、Stark设计插件、或Chrome DevTools中的渲染模拟功能。本工具的模拟主要用于设计阶段的快速参考和初步检查。
WCAG对比度等级标准是什么？
WCAG 2.1定义了两个主要的对比度合规等级。AA级是最低合规要求：普通文本（小于18px或小于14px加粗）需要至少4.5:1的对比度，大文本（18px加粗或24px以上）需要至少3:1，图形和UI组件需要至少3:1。AAA级是增强合规要求：普通文本需要至少7:1的对比度，大文本需要至少4.5:1，图形组件需要至少3:1。对于图表中的数据元素，由于属于图形类别，3:1的对比度即可满足要求。但如果图表中包含文本标注，则文本部分需满足相应级别的对比度要求。多数政府和企业网站要求达到AA级合规。