带阴影的交互式 D3 树状图 - 是否支持色盲用户？

Question

我创建了一个交互式树状图，其中网站区域中断开链接的严重程度使用各种红色阴影显示。如果问题为零，方框显示为绿色 "all clear." 我包含一个数据 table 作为文本等价物，但我被要求让色盲的人更容易使用图表。我找了一个色盲模拟器，可以帮助我选择蓝色或其他颜色的阴影，因为红绿色是一个特殊的问题，但我不知道如何判断。

任何人都可以告诉我如何添加不同的纹理、填充图案、树图框，或如何添加框边框宽度是基于我的问题严重性参数（这里是断开链接的数量）？需要以交互方式添加更改。这是我收到的两个建议；也许还有其他解决方案？

可视化并加速网站修复： 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
); }

到你的盒子和 fiddle 周围，不同盒子类型的角度和像素。

最后可能是这样的：

最重要的是，请增加字体/背景对比度！这将比所有孵化更能帮助视障人士……

阴影取自http://lea.verou.me/css3patterns/#diagonal-stripes

带阴影的交互式 D3 树状图 - 是否支持色盲用户？

Shaded interactive D3 treemap - support for people who are colorblind?

d3.js

colors

accessibility

color-blindness