Colorblind accessibility

[swharden]

Consider making this colorblind accessible. 1 in 12 males is colorblind and has difficulty distinguishing green from orange.

Using different stroke widths or alpha/transparency could help differentiate boxes on your chart without depending on color perception. I'd put together a mockup to go with this issue but I'm on mobile at the moment.

Alternately, Google around for colorblind accessible color palettes and find some colors you like. The first few colors of the "Tableau 10 color palette" are pretty good, and that's why it's the default for lots of data visualization libraries (e.g., matplotlib).

This is a fun roadmap otherwise, thanks for putting it together!

[swharden]

Following-up, now that I'm at a computer I was able to take a closer look and create some mockups. Even if the image in this repository doesn't change, I hope the information below will be informative and can help others create more accessible designs for future projects!

I'm not familiar with the .mind file format or mindmeister.com, so I screenshotted part of the image and used an image editor to tweak the colors for the following images.

Original

Transparency

A quick win for colorblind accessibility can be achieved by changing transparency any time you change hue (color). Adjusting transparency effectively adjusts brightness (with both light and dark backgrounds), and brightness is very easy to perceive by colorblind people.

Font

Applying transparency to the font helps too, as there's more area to provide information to help the eye distinguish one group from another.

Lines and Fills

Assessing color can be difficult for thin lines. Many color vision impaired people can't distinguish green vs. orange lines but they can distinguish different color fills. A general strategy to improve color perception is to use fills (or combine lines and fills) wherever possible to give these peoples' eyes a little more information to work with.

Fills Only

If fills and fonts distinguish groups, technically the outlines aren't required anymore. For compleneness, this is how fills only appear:

---

I'm not really a UX designer, but I know what it's like to be colorblind! You or anyone else is welcome to @ me on GitHub any time if a project comes up and it would be helpful to have someone spot check it for accessibility.

Thanks again for creating and sharing this roadmap! 🚀