5 ms·

This is great, but I want to hear what designers should be doing. The author briefly mentions DaltonLens. Use one of these colorblind plug-ins? Is it find colo

by mproud 4y ago

This is great, but I want to hear what designers should be doing. The author briefly mentions DaltonLens. Use one of these colorblind plug-ins? Is it find colorblind testers? Is it add more labels to sprites and graphics, and words to UI? Is it strictly avoid Red-Green color pairs?

jrumbut 4y ago
Let me echo @slimsag and say try not to rely on people differentiating things by color. Labels, titles, alt text, etc is probably useless because a lot of times the problem is I don't see that there's a control to investigate at all. Add a different shape, size, outline, or if it really has to be color only make the difference be not just hue but saturation and luminance as well.
thaumaturgy 4y ago
I'm unaware of any good design guidelines for colorblindness. In general, I find hues of red/green and blue/purple/red difficult to distinguish. Green and blue are great! Greens/yellows/blues all work well. And, similar colors that aren't the same saturation are, sometimes, okay. And of course if the color isn't meant to signal important information -- like if it's just a flourish in a design -- then I'll never notice. But the worst offenders are always maps with color gradients ranging from red to green.
- _dain_ 4y ago
  Ah, thank you for saying this. I'm in the middle of drafting a fairly complicated visualization for something I'm working on. I avoided red-green contrasts because that's the most common form of colourblindness, but I thought red-purple-blue would be distinguishable. I'll have to try out green-yellow-blue instead. Obviously that won't work for all kinds of colour blindness either but I can't figure out a straightforward way of representing this particular thing without colour ... it's literally about a graph colouring problem. Patterns/textures maybe? But then the nodes would have to be larger than I'd like so that there's enough surface area in each node to recognize the pattern, and then it would become very crowded.
  - fwlr 4y ago
    Super rough rule of thumb: 98% of colorblindness issues are “red and green do not contrast”, 2% are “green and blue do not contrast”. Orange and blue will contrast for pretty much everyone, that’s the safe and easy to remember bet. For creating contrast in other ways: saturation and brightness are unaffected by colorblindness and you can create contrast with them.
  - antgiant 4y ago
    Simple rule of thumb in most cases is if you can convert it to grayscale and still tell it apart your colorblind users can too. Barring that as a red-green colorblind person, yes red-green contrast is the worst, but way more common are colors that are only different by their red or green strength (especially red). The two most common by far being pink becomes white and purple becomes blue. Your green-yellow-blue suggestion is actually making the same mistake as red-purple-blue just using green as the fade instead of red. Having said that in my experience red-green colorblindness is actually RED-green colorblindness. So, I would much prefer a green-yellow-blue interface to a red-purple-blue one. As I am much more sensitive to green than red.
davidkuennen 4y ago
In my financial app I added a colorblind option that changes the chart and price colors to make it more accessible for my colorblind users.
refulgentis 4y ago
The thing with color blindness is its completely unpredictable in hue/colorfulness: the only control you have is lightness. This is familiar to artists, they call is "build from value". Problem is, we lied to artists and gave them HSL, and L in HSL has nothing to do with lightness :(. So you use Lab* as HCL with your designers or, my HCT's T, and tell them that all T / L* must be at least 50 away from eachother for text, and 40 away from eachother for controls. The solution is astoundingly simple but requires some commitment
akrakesh 4y ago
If there’s any uncertainty, adding labels, icons, or textures to each meaningful color of your design will make it accessible to many more people… The author touches upon it; expanding on it would take another full-length article.
bee_rider 4y ago
I try to use brightness and shapes when making a chart. Nice side-effect: works on black-and-white printers.
sputr 4y ago
Add a second signal when using color. The most elegant solution is a change in shape, but you can use a label. It does not have to be perfect like a green checkmark and a red X. You can use your own, but consistent shapes (filled circle vs a ring) and add a on hover label. We can adapt, as long as it's even possible.
RobotCaleb 4y ago
Never rely on color alone to signify important data

by mproud 4y ago

jrumbut 4y ago

Let me echo @slimsag and say try not to rely on people differentiating things by color. Labels, titles, alt text, etc is probably useless because a lot of times the problem is I don't see that there's a control to investigate at all. Add a different shape, size, outline, or if it really has to be color only make the difference be not just hue but saturation and luminance as well.

thaumaturgy 4y ago

I'm unaware of any good design guidelines for colorblindness. In general, I find hues of red/green and blue/purple/red difficult to distinguish. Green and blue are great! Greens/yellows/blues all work well. And, similar colors that aren't the same saturation are, sometimes, okay. And of course if the color isn't meant to signal important information -- like if it's just a flourish in a design -- then I'll never notice. But the worst offenders are always maps with color gradients ranging from red to green.

_dain_ 4y ago
Ah, thank you for saying this. I'm in the middle of drafting a fairly complicated visualization for something I'm working on. I avoided red-green contrasts because that's the most common form of colourblindness, but I thought red-purple-blue would be distinguishable. I'll have to try out green-yellow-blue instead. Obviously that won't work for all kinds of colour blindness either but I can't figure out a straightforward way of representing this particular thing without colour ... it's literally about a graph colouring problem. Patterns/textures maybe? But then the nodes would have to be larger than I'd like so that there's enough surface area in each node to recognize the pattern, and then it would become very crowded.
- fwlr 4y ago
  Super rough rule of thumb: 98% of colorblindness issues are “red and green do not contrast”, 2% are “green and blue do not contrast”. Orange and blue will contrast for pretty much everyone, that’s the safe and easy to remember bet. For creating contrast in other ways: saturation and brightness are unaffected by colorblindness and you can create contrast with them.
- antgiant 4y ago
  Simple rule of thumb in most cases is if you can convert it to grayscale and still tell it apart your colorblind users can too. Barring that as a red-green colorblind person, yes red-green contrast is the worst, but way more common are colors that are only different by their red or green strength (especially red). The two most common by far being pink becomes white and purple becomes blue. Your green-yellow-blue suggestion is actually making the same mistake as red-purple-blue just using green as the fade instead of red. Having said that in my experience red-green colorblindness is actually RED-green colorblindness. So, I would much prefer a green-yellow-blue interface to a red-purple-blue one. As I am much more sensitive to green than red.

davidkuennen 4y ago

In my financial app I added a colorblind option that changes the chart and price colors to make it more accessible for my colorblind users.

refulgentis 4y ago

The thing with color blindness is its completely unpredictable in hue/colorfulness: the only control you have is lightness. This is familiar to artists, they call is "build from value". Problem is, we lied to artists and gave them HSL, and L in HSL has nothing to do with lightness :(. So you use Lab* as HCL with your designers or, my HCT's T, and tell them that all T / L* must be at least 50 away from eachother for text, and 40 away from eachother for controls. The solution is astoundingly simple but requires some commitment

akrakesh 4y ago

If there’s any uncertainty, adding labels, icons, or textures to each meaningful color of your design will make it accessible to many more people… The author touches upon it; expanding on it would take another full-length article.

bee_rider 4y ago

I try to use brightness and shapes when making a chart. Nice side-effect: works on black-and-white printers.

sputr 4y ago

Add a second signal when using color. The most elegant solution is a change in shape, but you can use a label. It does not have to be perfect like a green checkmark and a red X. You can use your own, but consistent shapes (filled circle vs a ring) and add a on hover label. We can adapt, as long as it's even possible.

RobotCaleb 4y ago

Never rely on color alone to signify important data