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

Question

I created an interactive treemap where the severity of broken links in areas of a web site, shows using various shades of red. If there are zero problems, boxes appear as green as "all clear." I include a data table as a text equivalent, but I was asked to make the chart more usable by people who are colorblind. I looked for a colorblindness simulator that would help me pick shades of blue or something, because red-green is a particular problem, BUT I don't know how to judge.

Can anyone point me to how to add different textures, fill patterns, to treemap boxes, or how to add box borders whose width is based on my problem severity parameter (here, the count of broken links)? The change would need to be added interactively. These were two of the suggestions I received; perhaps there are other solutions?

Visualize and Accelerate Web Site Repairs: http://bl.ocks.org/wendlingd/af1e751e97c5211ff11277c985e5e642

Answer 1

It‘s always fair to have two different characteristics on things that are important to be distinguished. That‘s why links receive different color and underline by default. I think it‘s a good idea to use hatching as a second characteristic. So you could add e.g.

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

to your boxes and fiddle around with angle and pixels for different box types.

Could look like this in the end:

Most importantly, please increase font / background contrast! This will help visually impaired more than all hatching…

Hatching was taken from http://lea.verou.me/css3patterns/#diagonal-stripes