阴影交互式D3树形图 - 支持色盲人员？

Question

我创建了一个交互式树形图，其中网站区域中断开链接的严重性使用各种红色阴影显示。如果没有问题，则框显示为绿色，并且＃34;全部清除。＆＃34;我包含一个数据表作为文本等价物，但我被要求使图表更适用于色盲人。我找了一个色盲模拟器，可以帮我挑选蓝色或其他东西，因为红绿色是一个特别的问题，但我不知道如何判断。

有人能指出我如何添加不同的 纹理 ，填充模式，树形图框，或者如何添加宽度基于我的问题严重性参数的框边框（这里是断链的数量）？需要以交互方式添加更改。这是我收到的两条建议;或许有其他解决方案？

可视化并加速网站维修： http://bl.ocks.org/wendlingd/af1e751e97c5211ff11277c985e5e642

Answer 1

在要区分的重要事项上有两个不同的特征总是公平的。这就是链接默认接收不同颜色和下划线的原因。 我认为使用孵化作为第二个特征是个好主意。所以你可以添加例如

background-image { repeating-linear-gradient(
    55deg, 
    transparent, 
    transparent 15px, 
    rgba(255,255,255,.5) 15px, 
    rgba(255,255,255,.5) 20px
); }

到你的盒子里，用不同的盒子类型调整角度和像素。

最终看起来像这样：

最重要的是，请增加字体/背景对比度！这将有助于视力受损者超过所有孵化......

孵化是从http://lea.verou.me/css3patterns/#diagonal-stripes

获取的