6 ms·

Whenever I need colors for a chart, I type "12 bit" in my address bar and pray my browser hasn't forgotten the URL: https://iamkate.com/data/12-bit-rainbow/ htt

by tethys 1y ago

Whenever I need colors for a chart, I type "12 bit" in my address bar and pray my browser hasn't forgotten the URL: https://iamkate.com/data/12-bit-rainbow/ https://iamkate.com/data/12-bit-rainbow/

PythagoRascal 1y ago
Adding another link, here's the one I often use: https://flatuicolors.com https://flatuicolors.com
a1o 1y ago
Those are very good colors!
mpetroff 1y ago
Please don't use rainbow-type palettes, as they generally have poor accessibility for colorblind individuals. With my red deficiency, the middle two colors in this palette look virtually identical.
- tethys 1y ago
  Fair point! My eyes are (mostly) fine, but even I would have a hard time telling these colors apart when used in the same chart. I usually do very simple charts, using maybe 2 or 3 colors, and with this palette I feel the results are typically very pleasing, whichever colors I end up selecting.
- Ancapistani 1y ago
  This is super interesting to me. Is there another 12-color palette that allows you to easily distinguish between every color? If so, I'd love to see it. I'd also appreciate if anyone who happens to read this who has a different variety of colorblindness - or who finds color palettes inaccessible for any reason - could share what colors in the 12-bit palette and any others that are suggested in this thread are problematic and why, that'd be awesome :) My initial instinct is that finding 12 colors that are visually distinguishable for all users is likely impossible. That being the case, the ideal solution IMO is likely something like providing a dynamic option to change the palette (or even the representation!) and then choosing a default that the author is happy with.
  - mpetroff 1y ago
    > My initial instinct is that finding 12 colors that are visually distinguishable for all users is likely impossible. Without going to lightness extremes, I agree that this likely isn't possible, at least when trying to accommodate all three types of dichromacy and for small color patch sizes (like those typically used for line and scatter plots). For example, you could take the 10-color accessible palette from work I've published [1] and add black and bright yellow to get twelve colors, but the lightness extremes of adding these colors would result in significantly-different visual weights. Based on a validation survey I conducted, I think even ten colors is pushing the limit of what's reasonable when lightness extremes aren't used. > could share what colors in the 12-bit palette...are problematic #9d5 and #4d8 is the color pair I find particularly problematic. [1] https://arxiv.org/abs/2107.02270 https://arxiv.org/abs/2107.02270
    - Ancapistani 1y ago
      I’ve but tried to this yet, but wanted to let you know that I’m actively thinking about it and very interested. This is far from my area of expertise, but I’ve always been interested in accessibility on the web in particular. Thank you for responding, I’ll probably be in touch :)
  - dleeftink 1y ago
    Cheysson and other cross hatched patterns will get you a long way [0]. [0]: https://observablehq.com/@tomshanley/cheysson-color-palettes https://observablehq.com/@tomshanley/cheysson-color-palettes
- Ancapistani 1y ago
  I understand there's no direct way to answer this, but does this image appear the same as the live page to you? https://imgur.com/a/nZnr0BN https://imgur.com/a/nZnr0BN If so... wow. That's not good at all; it's almost as hard to distinguish the minimum value from the maximum value as it is the two in the center.
  - mpetroff 1y ago
    While not completely identical, it looks very similar (I also only have strong protanomaly, not complete protanopia, so I wouldn't expect it to look identical). Color-vision deficiency simulations collapse colors along the confusion lines, but this can be done multiple ways. These different mapping will all look the same (and identical to the original) to a dichromat but will appear different, with different perceptual differences between colors, to a color-normal individual. Simulating in a way that accurately portrays perceived color distances is still an open research problem.

by tethys 1y ago

Whenever I need colors for a chart, I type "12 bit" in my address bar and pray my browser hasn't forgotten the URL: https://iamkate.com/data/12-bit-rainbow/ https://iamkate.com/data/12-bit-rainbow/

PythagoRascal 1y ago

Adding another link, here's the one I often use: https://flatuicolors.com https://flatuicolors.com

a1o 1y ago

Those are very good colors!

mpetroff 1y ago

Please don't use rainbow-type palettes, as they generally have poor accessibility for colorblind individuals. With my red deficiency, the middle two colors in this palette look virtually identical.

tethys 1y ago
Fair point! My eyes are (mostly) fine, but even I would have a hard time telling these colors apart when used in the same chart. I usually do very simple charts, using maybe 2 or 3 colors, and with this palette I feel the results are typically very pleasing, whichever colors I end up selecting.
Ancapistani 1y ago
This is super interesting to me. Is there another 12-color palette that allows you to easily distinguish between every color? If so, I'd love to see it. I'd also appreciate if anyone who happens to read this who has a different variety of colorblindness - or who finds color palettes inaccessible for any reason - could share what colors in the 12-bit palette and any others that are suggested in this thread are problematic and why, that'd be awesome :) My initial instinct is that finding 12 colors that are visually distinguishable for all users is likely impossible. That being the case, the ideal solution IMO is likely something like providing a dynamic option to change the palette (or even the representation!) and then choosing a default that the author is happy with.
- mpetroff 1y ago
  > My initial instinct is that finding 12 colors that are visually distinguishable for all users is likely impossible. Without going to lightness extremes, I agree that this likely isn't possible, at least when trying to accommodate all three types of dichromacy and for small color patch sizes (like those typically used for line and scatter plots). For example, you could take the 10-color accessible palette from work I've published [1] and add black and bright yellow to get twelve colors, but the lightness extremes of adding these colors would result in significantly-different visual weights. Based on a validation survey I conducted, I think even ten colors is pushing the limit of what's reasonable when lightness extremes aren't used. > could share what colors in the 12-bit palette...are problematic #9d5 and #4d8 is the color pair I find particularly problematic. [1] https://arxiv.org/abs/2107.02270 https://arxiv.org/abs/2107.02270
  - Ancapistani 1y ago
    I’ve but tried to this yet, but wanted to let you know that I’m actively thinking about it and very interested. This is far from my area of expertise, but I’ve always been interested in accessibility on the web in particular. Thank you for responding, I’ll probably be in touch :)
- dleeftink 1y ago
  Cheysson and other cross hatched patterns will get you a long way [0]. [0]: https://observablehq.com/@tomshanley/cheysson-color-palettes https://observablehq.com/@tomshanley/cheysson-color-palettes
Ancapistani 1y ago
I understand there's no direct way to answer this, but does this image appear the same as the live page to you? https://imgur.com/a/nZnr0BN https://imgur.com/a/nZnr0BN If so... wow. That's not good at all; it's almost as hard to distinguish the minimum value from the maximum value as it is the two in the center.
- mpetroff 1y ago
  While not completely identical, it looks very similar (I also only have strong protanomaly, not complete protanopia, so I wouldn't expect it to look identical). Color-vision deficiency simulations collapse colors along the confusion lines, but this can be done multiple ways. These different mapping will all look the same (and identical to the original) to a dichromat but will appear different, with different perceptual differences between colors, to a color-normal individual. Simulating in a way that accurately portrays perceived color distances is still an open research problem.