Hacker News Reader

Comment by krageon | Hacker News Reader

Are there good solutions for creating (pie) charts that aren't completely opaque to people with color vision deficiencies? This article is especially egregious because I feel like they actually add to the point being made, but for the life of me I can't distinguish some of these colours. Who uses yellow (or orange, idk) for four separate labels?

Perhaps related, does anyone know of an overlay-type application that allows me to colorpick part of the screen (on linux)? My current solution is usually to screenshot and open the image in the GIMP or similar, but it's very cumbersome and especially if there are multiple pictures usually not worth it.

View on HN

You should typically avoid using piecharts because humans are terrible at interpreting size/parts of a whole.

Every piechart can be turned into a barchart that communicates the findings in a much clearer way.

I don't know about any resources for accessible colour picking, but if you're looking for a colour picker to work around badly designed charts, there's Pick[1], which is easy to work with. It also displays you the closest colour name, so you don't need to manually parse hex codes to see the difference.

I'm not aware of any colour disabilities that I have but I found it difficult to parse the colours as well, specifically in the second pie chart (areas). The colours in the chart only work to distinguish one slice from its neighbours, it's near impossible to map them to the categories listed in the legend. Perhaps the author is working on a super-colour-accurate computer screen where this problem isn't as noticeable, but on my older screens these colour profiles are near useless.

If you're in Firefox, you can find a colour picker in the dev tools (top left of the "inspect element" tab). That mostly focuses on devs though, so all you get is HTML colour hex.

[1]: https://github.com/stuartlangridge/ColourPicker

Another tool that we use in the online mapping world that specifically supports color blindness that generates palettes is ColorBrewer:

https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3

I usually find that JS heavy approaches can shine here, like with Chart.js. Here on the donut pie [1] you can hover with your mouse and see the name of the labels and the amount.

Where I like this approach is with big line charts like this one [2] (here it's D3 that's used). I am colorblind, and also not good at following things in general (I can have a hard time counting sequences of similar numbers), and I find charts made this way easier to read.

[1]: https://www.chartjs.org/docs/latest/charts/doughnut.html

[2]: https://observablehq.com/@d3/multi-line-chart

The pie chart's legend in this post is sorted largest number to smallest number, if that helps. Or as table:

Buffer overread: 22 Buffer overflow: 20 Use After Free: 4 Double Free: 3 NULL mistake: 2

It seems that to handle this you should have lines between the label and the slice instead of a legend. Google Sheets seems to do this by default but it seems to sort colours from dark to light which may make the boundaries of some colours hard to see for colourblind people. I would assume that putting the slices light-dark-light... would be optimal for the contrast between them, even for people who are not colour vision deficient.

I’ve heard people recommend https://colorbrewer2.org/ and https://gka.github.io/palettes/ for color palettes.

I also recommend Color Oracle for testing:

http://www.colororacle.org/

Firefox F12 and there is a colour picker, it can work in a pinch.

But it doesn't matter for this article, author puts values in descending order for the labels so you dont really need colours.

Better yet if they put the values next to the label name too, but we can have it all.

The chart is ordered, you don't need to differentiate the colors.

I don’t understand. If you can’t differentiate the colors, you can’t see the boundaries between segments. I think it would have been good to include tables, as well.

EDIT: I see what you’re saying now. You can just read the legend, which lists things in order. But that just gives the ordering, not the sizes of the categories.

Different colors can be differentiated, it's the three yellow colors that are similar, but don't need to be differentiated, they aren't consecutive.

There are different kinds of colourblindness. Deuteranopes are likely to confuse greens with yellows, which are consecutive here.

gpick is a nice tool to do it: http://www.gpick.org

Does turning your monitor / browser into negative mode help?

Reply on news.ycombinator.com