6 ms·

Make figures and presentations that are friendly to Colorblind people (2002)

110 points by app4soft 5y ago

app4soft 5y ago
Full title: "Color Universal Design (CUD)[0] - How to make figures and presentations that are friendly to Colorblind people" Link to PDF: https://jfly.uni-koeln.de/html/manuals/pdf/color_blind.pdf https://jfly.uni-koeln.de/html/manuals/pdf/color_blind.pdf Color Universal Design Organization (CUDO) resources (palettes, guidebooks).[1,2,3] [0] https://www2.cudo.jp/wp/?page_id=1936 https://www2.cudo.jp/wp/?page_id=1936 [1] https://jfly.uni-koeln.de/colorset/ https://jfly.uni-koeln.de/colorset/ [2] https://github.com/atsuyaw/CUDcolorset https://github.com/atsuyaw/CUDcolorset [3] http://www2.cudo.jp/wp/wp-content/uploads/2018/10/cud_guidebook.pdf http://www2.cudo.jp/wp/wp-content/uploads/2018/10/cud_guideb...*
aejnsn 5y ago
As someone who is mildly colorblind, but not nearly as color deficient as others—Please please please use actual colorblind testers. I have seen testers with full color vision test color contrast ratios based on edges only (pixels) of text affected by font anti-aliasing. This is pointless and serves to dilute the premise.
- bjelkeman-again 5y ago
  Also test your new UI on older people. The older you get the harder it gets to distinguish between things with low contrast. Apple is really bad at this with the newer MacOS design, but obviously not the only once. It is like old people don’t use computers, and yes, it will happen to you to.
  - PhantomGremlin 5y ago
    It's not just contrast. It's also font size. It's also the font itself. All websites should be readable in Firefox or Safari (or Chrome but I don't use that) with the minimum font size set larger than the default. I use 18 min and a lot of stuff breaks. I'm sure that other people would greatly benefit from even larger fonts. I don't care about "pretty". I'm resigned to not getting that. But a lot of text simply disappears when the minimum font size is bumped up. At least Firefox manages to render most sites at a decent size when I set 18 min. Safari, for some reason, still struggles with that. Also, I generally read everything using Lucida Grande. It's a nice legible font. Firefox allows me to force that font. Safari doesn't. Just how fucking hard would it be for Apple to let me choose my own font in Safari?
    - zimpenfish 5y ago
      > Just how fucking hard would it be for Apple to let me choose my own font in Safari? Technically not "let me choose my own font in Safari" but you can set a user style sheet which overrides fonts. https://kgrz.io/safari-custom-user-agent-css-overrides-using-webfonts.html https://kgrz.io/safari-custom-user-agent-css-overrides-using...
      - arthur2e5 5y ago
        Tangential: it would be nice if `@font-face sans-serif { … }` (likewise for other generic families) was a thing in user-injected stylesheets. Especially when you don’t have such options in UI.
  - zimpenfish 5y ago
    > Apple is really bad at this with the newer MacOS design, They do, however, provide several options for dealing with this in their Accessibility settings - "Increase contrast", "Differentiate without colour", "Reduce transparency", etc.
- onion2k 5y ago
  Testing for color blindness and contrast is an area of accessibility where the tools are actually very good. Even the built-in tools in every browser will tell you about contrast levels. There are enough variations of color blindness and visual acuity problems that relying on manual testing probably won't catch much.
smellsinore 5y ago
tl dr.. use grayscale instaed?
cs2733 5y ago
It's really great how the world changes to accomodate those of us who are less fortunate in some physical capacity - for example wheelchair access to buildings and transportation where everyone wins. In other cases the drive for equality means everyone has to be equaly harmed, like when institutions of higher education remove online courses from public access due to lack of captions [0] I hope we are mature enough to accept someone who experiences reality in a different way [1] is not necessarily dimished by that and that being supportive of them in their uniqueness is the sign of a healthy society but also that being supportive isn't the same as bending over backwards. [0] https://www.insidehighered.com/news/2017/03/06/u-california-berkeley-delete-publicly-available-educational-content https://www.insidehighered.com/news/2017/03/06/u-california-... [1]Blind people have their other senses heightened. How is that not amazing?!
- pessimizer 5y ago
  > wheelchair access to buildings and transportation where everyone wins. I don't win from this any more than I win if state colleges make their courses accessible. I walk, see, and hear fine. If the standard for accommodation is that everybody wins, then we need to end it until something happens to me personally.
agent327 5y ago
One tool I've found really helpful in this regard is Color Oracle (https://colororacle.org/ https://colororacle.org/). It lets you see what your presentation (or software) looks like to someone who is colorblind. I've used that to tune our software to be useable by colorblind individuals.
- kqr 5y ago
  Another neat trick is that Android (under developer settings) have alternative colour space emulation settings. Combined with a smartphone camera, you can view anything you find in the real world with a colour deficiency. Just turn on the emulation and point the camera at anything. Look through the live screen.
  - danShumway 5y ago
    Oh, that's really clever. I knew about Android's color modes, but I never thought to combine it with the camera before.
junon 5y ago
Question for color blind users: Does testing with the various color emulation tools (such as those provided by inspector tools) properly emulate the real thing? It always seems like people (including me) trust them at face value but I've never heard either way if they're actually helpful in creating color-blindness aware UIs. Of course it would always be preferable to test with real users with real disabilities, but as an indie hacker there is rarely the opportunity.
- kop316 5y ago
  Colorblind person here: Can you link them? I usually do firmware/ CLI stuff, so I've never tried them
- ljf 5y ago
  Hard to say, I can the difference between the 'real' image and the 'colour blind' image, so the image doesn't 'work' for me. But I'm not certain how you see things, so I'm never really sure.
- mpetroff 5y ago
  The simulation technique [1] currently used by the Firefox / Chrome dev tools is reasonable, so it's definitely much better than not checking for color vision deficiency accessibility at all. Ideally, color should only be used for progressive enhancement; if your UI can be used in grayscale, it's probably fine. However, the method originally used by both browsers, which is also used by some other tools, had no scientific provenance and produced clearly incorrect results, so one needs to be careful about this sort of thing in general. [1] https://doi.org/10.1109/TVCG.2009.113 https://doi.org/10.1109/TVCG.2009.113
  - convolvatron 5y ago
    colorblind person. making sure things look ok in greyscale is excellent advice. for me perceptual difference in intensity are most of what my visual system pays attention to...color only if I try. most of the the colored interface are hugely garish, and the massive intensity differences actually make it really hard to read. and conversely if two indicator colors are the same brightness and you need me to distinguish between them, we're going to struggle.
baby 5y ago
Next article: make slides that are friendly to blind people
kop316 5y ago
As a person with more severe color blindness/deficiency than most, I guess I'll ask the question: is it actually a big deal? I ask because for me, I really don't think about being colorblind, and colorblindness becomes an issue maybe a few times a year? But I'm also sensitive to the fact that I may be a bad example too (maybe I don't run into presentations where it is apparent? Or I just think the person made bad color choices and didn't realize it's my colorblindness?)
- ljf 5y ago
  While I fail most colour blindness tests, I rarely notice it in my like. My wife notes that I mistake dark green and brown, and also some shades of grey as brown. I also find that pink and light grey 'stobe' for me. But aside from failing colour blindness tests, I've never found it impacts my life. I can see traffic signals and can identify most colours, so my kids don't believe I really am colour blind.
  - kop316 5y ago
    Heh, I have seem that strobing effect, but only in very specific shades of blue.
- bradrn 5y ago
  I’m mildly colourblind: I find it difficult to distinguish red/green, but can still do it under the right conditions. On the whole, I agree that colourblindness doesn’t really affect my life, in that for the most part it doesn’t cause me any significant difficulties. But I have a feeling that this is only because I’ve gotten used to it, and that it does affect me — just in ways that I don’t notice. Most relevantly for this discussion, I recall seeing a 3D chart which I was having trouble reading, until I noticed a link to a colourblind version replacing red/green with red/blue (or something like that), at which point it became almost trivial to understand. I had gotten so used to seeing non-colourblind-adapted charts I didn’t even realise they were impeding my comprehension. (The other major time I recall it affecting me was in first-year geology class — the instructor would say things like ‘this rock has huge red garnets which are easy to see’, and indeed everyone could see them except for me. Thankfully, colour mostly plays a very minor role in mineral identification.)
sethammons 5y ago
Tangential: if you or someone you know is red-green color blind, just this week, we bought my dad a pair of EnChroma colorblind glasses and, at 69, he welled up as he saw, for the first time, shades of green around him and saw red cars going down the road. Truly the greatest gift we could have gotten for him.
mpetroff 5y ago
For those interested, I've done some recent research on this topic [1], which tries to find cycles of colors that optimize both accessibility for color vision deficiencies, using simulations and minimum perceptual distances, and aesthetics, using crowd-sourced survey data. [1] https://arxiv.org/abs/2107.02270 https://arxiv.org/abs/2107.02270
1MachineElf 5y ago
We have technical specialists at my company who developed a great visualization interface for our product. Everyone who has seen it is really impressed. They ask why we can't have nice visualization tools like this built-in. The main engineering team won't adopt the solution because the graphs are red/green instead of gradients of blue. The technical specialists believe we shouldn't make the blue gradient the default, and instead believe that because color blind people are a minority, a mode that works for them should be a later add-on. I understand where they are coming from, but personally, I think it would be great to have the out-of-the-box UI be useful for colorblind people. The weird thing is, the two teams have had this difference for several months now, and haven't done anything about it. Unfortunately, it just seems like the most talented developers are just apathetic towards this. Almost like the brain space our design team devotes to ADA compatibility is in th specialists mind devoted to actually making something useful. It's an odd dynamic.
saikan 5y ago
The expression in "For scientists" should be 1-0.92^3, not 1-(1-0.92)^3

110 points by app4soft 5y ago

Full title: "Color Universal Design (CUD)[0] - How to make figures and presentations that are friendly to Colorblind people" Link to PDF: https://jfly.uni-koeln.de/html/manuals/pdf/color_blind.pdf https://jfly.uni-koeln.de/html/manuals/pdf/color_blind.pdf Color Universal Design Organization (CUDO) resources (palettes, guidebooks).[1,2,3] [0] https://www2.cudo.jp/wp/?page_id=1936 https://www2.cudo.jp/wp/?page_id=1936 [1] https://jfly.uni-koeln.de/colorset/ https://jfly.uni-koeln.de/colorset/ [2] https://github.com/atsuyaw/CUDcolorset https://github.com/atsuyaw/CUDcolorset [3] http://www2.cudo.jp/wp/wp-content/uploads/2018/10/cud_guidebook.pdf http://www2.cudo.jp/wp/wp-content/uploads/2018/10/cud_guideb...*

aejnsn 5y ago

As someone who is mildly colorblind, but not nearly as color deficient as others—Please please please use actual colorblind testers. I have seen testers with full color vision test color contrast ratios based on edges only (pixels) of text affected by font anti-aliasing. This is pointless and serves to dilute the premise.

bjelkeman-again 5y ago
Also test your new UI on older people. The older you get the harder it gets to distinguish between things with low contrast. Apple is really bad at this with the newer MacOS design, but obviously not the only once. It is like old people don’t use computers, and yes, it will happen to you to.
- PhantomGremlin 5y ago
  It's not just contrast. It's also font size. It's also the font itself. All websites should be readable in Firefox or Safari (or Chrome but I don't use that) with the minimum font size set larger than the default. I use 18 min and a lot of stuff breaks. I'm sure that other people would greatly benefit from even larger fonts. I don't care about "pretty". I'm resigned to not getting that. But a lot of text simply disappears when the minimum font size is bumped up. At least Firefox manages to render most sites at a decent size when I set 18 min. Safari, for some reason, still struggles with that. Also, I generally read everything using Lucida Grande. It's a nice legible font. Firefox allows me to force that font. Safari doesn't. Just how fucking hard would it be for Apple to let me choose my own font in Safari?
  - zimpenfish 5y ago
    > Just how fucking hard would it be for Apple to let me choose my own font in Safari? Technically not "let me choose my own font in Safari" but you can set a user style sheet which overrides fonts. https://kgrz.io/safari-custom-user-agent-css-overrides-using-webfonts.html https://kgrz.io/safari-custom-user-agent-css-overrides-using...
    - arthur2e5 5y ago
      Tangential: it would be nice if `@font-face sans-serif { … }` (likewise for other generic families) was a thing in user-injected stylesheets. Especially when you don’t have such options in UI.
- zimpenfish 5y ago
  > Apple is really bad at this with the newer MacOS design, They do, however, provide several options for dealing with this in their Accessibility settings - "Increase contrast", "Differentiate without colour", "Reduce transparency", etc.
onion2k 5y ago
Testing for color blindness and contrast is an area of accessibility where the tools are actually very good. Even the built-in tools in every browser will tell you about contrast levels. There are enough variations of color blindness and visual acuity problems that relying on manual testing probably won't catch much.

smellsinore 5y ago

tl dr.. use grayscale instaed?

cs2733 5y ago

It's really great how the world changes to accomodate those of us who are less fortunate in some physical capacity - for example wheelchair access to buildings and transportation where everyone wins. In other cases the drive for equality means everyone has to be equaly harmed, like when institutions of higher education remove online courses from public access due to lack of captions [0] I hope we are mature enough to accept someone who experiences reality in a different way [1] is not necessarily dimished by that and that being supportive of them in their uniqueness is the sign of a healthy society but also that being supportive isn't the same as bending over backwards. [0] https://www.insidehighered.com/news/2017/03/06/u-california-berkeley-delete-publicly-available-educational-content https://www.insidehighered.com/news/2017/03/06/u-california-... [1]Blind people have their other senses heightened. How is that not amazing?!

pessimizer 5y ago
> wheelchair access to buildings and transportation where everyone wins. I don't win from this any more than I win if state colleges make their courses accessible. I walk, see, and hear fine. If the standard for accommodation is that everybody wins, then we need to end it until something happens to me personally.

agent327 5y ago

One tool I've found really helpful in this regard is Color Oracle (https://colororacle.org/ https://colororacle.org/). It lets you see what your presentation (or software) looks like to someone who is colorblind. I've used that to tune our software to be useable by colorblind individuals.

kqr 5y ago
Another neat trick is that Android (under developer settings) have alternative colour space emulation settings. Combined with a smartphone camera, you can view anything you find in the real world with a colour deficiency. Just turn on the emulation and point the camera at anything. Look through the live screen.
- danShumway 5y ago
  Oh, that's really clever. I knew about Android's color modes, but I never thought to combine it with the camera before.

junon 5y ago

Question for color blind users: Does testing with the various color emulation tools (such as those provided by inspector tools) properly emulate the real thing? It always seems like people (including me) trust them at face value but I've never heard either way if they're actually helpful in creating color-blindness aware UIs. Of course it would always be preferable to test with real users with real disabilities, but as an indie hacker there is rarely the opportunity.

kop316 5y ago
Colorblind person here: Can you link them? I usually do firmware/ CLI stuff, so I've never tried them
ljf 5y ago
Hard to say, I can the difference between the 'real' image and the 'colour blind' image, so the image doesn't 'work' for me. But I'm not certain how you see things, so I'm never really sure.
mpetroff 5y ago
The simulation technique [1] currently used by the Firefox / Chrome dev tools is reasonable, so it's definitely much better than not checking for color vision deficiency accessibility at all. Ideally, color should only be used for progressive enhancement; if your UI can be used in grayscale, it's probably fine. However, the method originally used by both browsers, which is also used by some other tools, had no scientific provenance and produced clearly incorrect results, so one needs to be careful about this sort of thing in general. [1] https://doi.org/10.1109/TVCG.2009.113 https://doi.org/10.1109/TVCG.2009.113
- convolvatron 5y ago
  colorblind person. making sure things look ok in greyscale is excellent advice. for me perceptual difference in intensity are most of what my visual system pays attention to...color only if I try. most of the the colored interface are hugely garish, and the massive intensity differences actually make it really hard to read. and conversely if two indicator colors are the same brightness and you need me to distinguish between them, we're going to struggle.

baby 5y ago

Next article: make slides that are friendly to blind people

kop316 5y ago

As a person with more severe color blindness/deficiency than most, I guess I'll ask the question: is it actually a big deal? I ask because for me, I really don't think about being colorblind, and colorblindness becomes an issue maybe a few times a year? But I'm also sensitive to the fact that I may be a bad example too (maybe I don't run into presentations where it is apparent? Or I just think the person made bad color choices and didn't realize it's my colorblindness?)

ljf 5y ago
While I fail most colour blindness tests, I rarely notice it in my like. My wife notes that I mistake dark green and brown, and also some shades of grey as brown. I also find that pink and light grey 'stobe' for me. But aside from failing colour blindness tests, I've never found it impacts my life. I can see traffic signals and can identify most colours, so my kids don't believe I really am colour blind.
- kop316 5y ago
  Heh, I have seem that strobing effect, but only in very specific shades of blue.
bradrn 5y ago
I’m mildly colourblind: I find it difficult to distinguish red/green, but can still do it under the right conditions. On the whole, I agree that colourblindness doesn’t really affect my life, in that for the most part it doesn’t cause me any significant difficulties. But I have a feeling that this is only because I’ve gotten used to it, and that it does affect me — just in ways that I don’t notice. Most relevantly for this discussion, I recall seeing a 3D chart which I was having trouble reading, until I noticed a link to a colourblind version replacing red/green with red/blue (or something like that), at which point it became almost trivial to understand. I had gotten so used to seeing non-colourblind-adapted charts I didn’t even realise they were impeding my comprehension. (The other major time I recall it affecting me was in first-year geology class — the instructor would say things like ‘this rock has huge red garnets which are easy to see’, and indeed everyone could see them except for me. Thankfully, colour mostly plays a very minor role in mineral identification.)

sethammons 5y ago

Tangential: if you or someone you know is red-green color blind, just this week, we bought my dad a pair of EnChroma colorblind glasses and, at 69, he welled up as he saw, for the first time, shades of green around him and saw red cars going down the road. Truly the greatest gift we could have gotten for him.

mpetroff 5y ago

For those interested, I've done some recent research on this topic [1], which tries to find cycles of colors that optimize both accessibility for color vision deficiencies, using simulations and minimum perceptual distances, and aesthetics, using crowd-sourced survey data. [1] https://arxiv.org/abs/2107.02270 https://arxiv.org/abs/2107.02270

1MachineElf 5y ago

We have technical specialists at my company who developed a great visualization interface for our product. Everyone who has seen it is really impressed. They ask why we can't have nice visualization tools like this built-in. The main engineering team won't adopt the solution because the graphs are red/green instead of gradients of blue. The technical specialists believe we shouldn't make the blue gradient the default, and instead believe that because color blind people are a minority, a mode that works for them should be a later add-on. I understand where they are coming from, but personally, I think it would be great to have the out-of-the-box UI be useful for colorblind people. The weird thing is, the two teams have had this difference for several months now, and haven't done anything about it. Unfortunately, it just seems like the most talented developers are just apathetic towards this. Almost like the brain space our design team devotes to ADA compatibility is in th specialists mind devoted to actually making something useful. It's an odd dynamic.

saikan 5y ago

The expression in "For scientists" should be 1-0.92^3, not 1-(1-0.92)^3