陰影交互式D3樹形圖 - 支持色盲的人？

我創建了一個交互式樹狀圖，其中網站區域中斷開的鏈接的嚴重程度顯示爲使用各種不同的紅色陰影。如果沒有問題，方框顯示爲「全部清楚」。我將一個數據表作爲一個文本等價物，但我被要求讓這個圖表更容易被色盲人士使用。我尋找一個色盲模擬器，可以幫我挑選藍色或其他什麼，因爲紅綠色是一個特殊的問題，但我不知道如何判斷。陰影交互式D3樹形圖 - 支持色盲的人？

任何人都可以點我如何添加不同紋理，填充圖案，以樹形圖框，或如何添加框邊框的寬度是基於我的問題嚴重程度的參數（在這裏，斷開鏈接的次數）？該變化需要交互式添加。這是我收到的兩條建議;也許還有其他解決方案？

可視化和加快網站維修： http://bl.ocks.org/wendlingd/af1e751e97c5211ff11277c985e5e642

來源

2017-03-09 danw

它總是公平會對事情是重要的是要區分了不同特點。這就是爲什麼鏈接默認情況下會接收不同的顏色和下劃線。我認爲使用陰影作爲第二個特徵是個好主意。所以你可以添加例如

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

來源

2017-03-10 00:47:36 undko

採取我忘了建議的文本內容的改寫：移動的問題數前一個make嚴重性明確： '通行證（0 ） - ...或'失敗的元素（68） - ......的反應......等等 – undko

陰影交互式D3樹形圖 - 支持色盲的人？

回答

相關問題