4 ms·

For the umpteen millionth time, please please please do not use red/green for the scale, it is very difficult for colorblind people to distinguish, which is ~5%

For the umpteen millionth time, please please please do not use red/green for the scale, it is very difficult for colorblind people to distinguish, which is ~5% of the male population. Look at Colorbrewer for some alternative suggestions: https://colorbrewer2.org/ https://colorbrewer2.org/

areyousure 2y ago
Do operating system accessibility controls help you distinguish the colors? For example, both Windows 10/11 and MacOS have "color filters". https://support.microsoft.com/en-us/ https://support.microsoft.com/en-us/ windows/use-color-filters-in-windows-43893e44 b8b3-2e27-1a29-b0c15ef0e5ce https://support.apple.com/ https://support.apple.com/ guide/mac-help/change-display-colors-easier-onscreen mchl11ddd4b3/mac
- thedougd 2y ago
  They can but keep in mind there are a variety of different types of color blindness and varying severity. For me close colors on a red / green scale are difficult to differentiate. If I enable accessibility features, it will make every photo look incorrect. iOS has an excellent option to adjust the degree of color filter. Mine is set to tritanopia (blue/yellow) the only about 5 percent intensity to give me a good balance.
- hansvm 2y ago
  Kind of. All those are able to do (however it's implemented) is map some (r,g,b) -> (r,g,b). If we pick on the common example of red-green colorblindness (of which there are many types; to have something concrete to work with, let's say all cones function at "normal" intensity, but the spectrum for the red cone has been shifted near to what the green cone picks up), what kinds of mappings are you able to do? The core problem is that many (r,g) pairs are equivalent, or nearly so. It's worth noting then that at least one of two properties holds: (a) Your mapping is bijective. You shift things around, e.g. by swapping the green and blue channels. Any bijective technique other than the identity will, by definition, add hue distortion, making things potentially hard to interpret. You're able to, e.g., gain the ability to distinguish red and green, but that comes at the cost of not being able to distinguish red and blue, since the confused pairs still exist in the output space. (b) Your mapping isn't injective. Many input colors map to the same output colors. One way this might be helpful is in pushing the (r,g) split toward its extremes. Maybe leave (50,50) alone, map (40,60) -> (10,90) and (30,70) -> (1,99). How much that helps varies [0], but it comes at the cost of reduced dynamic range. You traded telling colors apart for telling images with subtle variations apart. And, again, there's a hue distortion. If we don't have any good options, what levers do you have available to play with? 1. You can (ab)use the brightness channel to carry color information. This isn't very effective since brightness steps are harder to perceive than hue steps. Most implementations will instead prefer to keep the perceptual brightness the same (for the particular colorblindness described, reds will be less bright than in normal vision and greens more bright, so you need to add a correction factor). In the abstract, I do like using the brightness channel. When out at sea I'll wear strongly tinted orange sunglasses to make detecting buoys easy (everything else is dark, but the orange buoys are bright as day). 2. You can compress the (r,g) split as described above, making reds more red and greens more green. 3. You use the blue channel somehow. This is a catch-all of sorts, but if you're keeping brightness the same and not fixing the problem with just (r,g) (and, again, people want to keep brightness the same and can't fix the problem with just (r,g) [0]), then you're mixing blue into the equation. With a goal of minimizing hue distortion, no implementation does anything as extreme as my proposal of swapping the blue and green channels. They all, instead, trade some of the (r,g) discriminative ability for extra blue. Implementation details vary. I particularly like the ones which have a sequence of tests and do a little ML to come up with a nice (r,g,b) -> (r,g,b) scheme tailored for your eyes. However it's done though, you're saturating the blue channel with extra information. All mappings can be represented as some combination of (1,2,3), and mostly (3) in practice, which perhaps helps explain why the techniques aren't amazing in general. They all assume the goal is telling red from green, but your real goal is telling apart all the colors you need to tell apart in whichever UI you happen to be working with. The extra constraint of minimizing hue distortion helps with that, but you're still in a world where the colorblind filter helps for some UIs and doesn't for others, actively making others worse. God-forbid they have both off-red and off-blue buttons when the filter's solution was trading some red for some blue. And you can work around that a bit by not letting the filter be quite so strong, but that comes at the cost of not being as helpful in the actual red-green case. It's one more lever that helps a bit at the OS level. You'd really like customization for the particular UI you're looking at, kind of like what user style sheets were supposed to do for the web. [0] You don't really get "pure" colors from an LCD, so this is even less effective of a technique than it could be, and it really messes with the math (you want something kind of like an integral over relative response curves convolved with the LCD's spectrum). The particular flavor of red-green colorblindness described though, you can sometimes tell very pure reds from very pure greens.
  - astrange 2y ago
    > If we pick on the common example of red-green colorblindness (of which there are many types; to have something concrete to work with, let's say all cones function at "normal" intensity, but the spectrum for the red cone has been shifted near to what the green cone picks up), what kinds of mappings are you able to do? You could animate it by changing the mapping over time; then colorblind people would see that two identical colors are changing differently. You could also try replacing colors with a pattern but it wouldn't work that well.
techwizrd 2y ago
It's about 1 in 12 or 8% of men and 1 in 200 women, but I agree. Pay special attention to the accessibility of your visual communication. Avoid red/green/yellow, and try to use color _and_ pattern if possible.
jdestaz 2y ago
As a developer with a red/green colorblindness, I've had to point this out to UX designers I've worked with over the years. I ended up making a small game to show how frustrating it can be to use UIs that rely on color alone to express information. https://jdestaz.itch.io/colorblind-curse https://jdestaz.itch.io/colorblind-curse
- frogpelt 2y ago
  Very well done. When I was color blind I just picked all 3s to get through level as quickly as possible.
- Mumps 2y ago
  This is terrific. Thank you for sharing
- fexed 2y ago
  Really interesting game! Well done
- pimlottc 2y ago
  This is great! Level 3 is so easy :) One small suggestion: keep score separately for each level so you can compare at the end and see how much icons helped.
m2fkxy 2y ago
it's also not the proper scale type for sequential data (red/green is diverging, but there is no central value defined in the linked map).
detourdog 2y ago
Thank you for this resource.
gowld 2y ago
You need to convince the tool makers, not the web app authors using their tools' defaults.
deleted 2y ago
[deleted]
kansface 2y ago
What percent of the rest of the population is confused by not using red & green?
- queuebert 2y ago
  The choice of color here is not obvious to me. For example, greener could mean more money, i.e. more expensive. Also red connotes debt/negative in accounting, while black is surplus/positive. If you're eating a tomato, red is good and green is bad (unless fried I guess).
- Suppafly 2y ago
  >What percent of the rest of the population is confused by not using red & green? Presumably none if you build your site in an accessible manner. It costs basically nothing to accommodate the 1/12 of the population that has color-blindness.
hunter2_ 2y ago
It basically comes down to using linear brightness (at sufficiently high contrast between steps) instead of random brightness. TFA could get away with almost any colors at all, even red to green, as long as it goes from light to dark. The problem is that they decided to use dark for BOTH ends of the scale, with light in the middle, so in the absence of color perception we can only tell whether a price is extreme or moderate.
everybodyknows 2y ago
What us UI hackers would find helpful as an adjunct to this is a few polynomial coefficient terms fitted to each of the x->R,G,B color scheme mappings. Then we could generate our own scale with whatever number of steps an app requires. Or compute on the fly for a continuous scheme.

areyousure 2y ago

Do operating system accessibility controls help you distinguish the colors? For example, both Windows 10/11 and MacOS have "color filters". https://support.microsoft.com/en-us/ https://support.microsoft.com/en-us/ windows/use-color-filters-in-windows-43893e44 b8b3-2e27-1a29-b0c15ef0e5ce https://support.apple.com/ https://support.apple.com/ guide/mac-help/change-display-colors-easier-onscreen mchl11ddd4b3/mac

thedougd 2y ago
They can but keep in mind there are a variety of different types of color blindness and varying severity. For me close colors on a red / green scale are difficult to differentiate. If I enable accessibility features, it will make every photo look incorrect. iOS has an excellent option to adjust the degree of color filter. Mine is set to tritanopia (blue/yellow) the only about 5 percent intensity to give me a good balance.
hansvm 2y ago
Kind of. All those are able to do (however it's implemented) is map some (r,g,b) -> (r,g,b). If we pick on the common example of red-green colorblindness (of which there are many types; to have something concrete to work with, let's say all cones function at "normal" intensity, but the spectrum for the red cone has been shifted near to what the green cone picks up), what kinds of mappings are you able to do? The core problem is that many (r,g) pairs are equivalent, or nearly so. It's worth noting then that at least one of two properties holds: (a) Your mapping is bijective. You shift things around, e.g. by swapping the green and blue channels. Any bijective technique other than the identity will, by definition, add hue distortion, making things potentially hard to interpret. You're able to, e.g., gain the ability to distinguish red and green, but that comes at the cost of not being able to distinguish red and blue, since the confused pairs still exist in the output space. (b) Your mapping isn't injective. Many input colors map to the same output colors. One way this might be helpful is in pushing the (r,g) split toward its extremes. Maybe leave (50,50) alone, map (40,60) -> (10,90) and (30,70) -> (1,99). How much that helps varies [0], but it comes at the cost of reduced dynamic range. You traded telling colors apart for telling images with subtle variations apart. And, again, there's a hue distortion. If we don't have any good options, what levers do you have available to play with? 1. You can (ab)use the brightness channel to carry color information. This isn't very effective since brightness steps are harder to perceive than hue steps. Most implementations will instead prefer to keep the perceptual brightness the same (for the particular colorblindness described, reds will be less bright than in normal vision and greens more bright, so you need to add a correction factor). In the abstract, I do like using the brightness channel. When out at sea I'll wear strongly tinted orange sunglasses to make detecting buoys easy (everything else is dark, but the orange buoys are bright as day). 2. You can compress the (r,g) split as described above, making reds more red and greens more green. 3. You use the blue channel somehow. This is a catch-all of sorts, but if you're keeping brightness the same and not fixing the problem with just (r,g) (and, again, people want to keep brightness the same and can't fix the problem with just (r,g) [0]), then you're mixing blue into the equation. With a goal of minimizing hue distortion, no implementation does anything as extreme as my proposal of swapping the blue and green channels. They all, instead, trade some of the (r,g) discriminative ability for extra blue. Implementation details vary. I particularly like the ones which have a sequence of tests and do a little ML to come up with a nice (r,g,b) -> (r,g,b) scheme tailored for your eyes. However it's done though, you're saturating the blue channel with extra information. All mappings can be represented as some combination of (1,2,3), and mostly (3) in practice, which perhaps helps explain why the techniques aren't amazing in general. They all assume the goal is telling red from green, but your real goal is telling apart all the colors you need to tell apart in whichever UI you happen to be working with. The extra constraint of minimizing hue distortion helps with that, but you're still in a world where the colorblind filter helps for some UIs and doesn't for others, actively making others worse. God-forbid they have both off-red and off-blue buttons when the filter's solution was trading some red for some blue. And you can work around that a bit by not letting the filter be quite so strong, but that comes at the cost of not being as helpful in the actual red-green case. It's one more lever that helps a bit at the OS level. You'd really like customization for the particular UI you're looking at, kind of like what user style sheets were supposed to do for the web. [0] You don't really get "pure" colors from an LCD, so this is even less effective of a technique than it could be, and it really messes with the math (you want something kind of like an integral over relative response curves convolved with the LCD's spectrum). The particular flavor of red-green colorblindness described though, you can sometimes tell very pure reds from very pure greens.
- astrange 2y ago
  > If we pick on the common example of red-green colorblindness (of which there are many types; to have something concrete to work with, let's say all cones function at "normal" intensity, but the spectrum for the red cone has been shifted near to what the green cone picks up), what kinds of mappings are you able to do? You could animate it by changing the mapping over time; then colorblind people would see that two identical colors are changing differently. You could also try replacing colors with a pattern but it wouldn't work that well.

techwizrd 2y ago

It's about 1 in 12 or 8% of men and 1 in 200 women, but I agree. Pay special attention to the accessibility of your visual communication. Avoid red/green/yellow, and try to use color _and_ pattern if possible.

jdestaz 2y ago

As a developer with a red/green colorblindness, I've had to point this out to UX designers I've worked with over the years. I ended up making a small game to show how frustrating it can be to use UIs that rely on color alone to express information. https://jdestaz.itch.io/colorblind-curse https://jdestaz.itch.io/colorblind-curse

frogpelt 2y ago
Very well done. When I was color blind I just picked all 3s to get through level as quickly as possible.
Mumps 2y ago
This is terrific. Thank you for sharing
fexed 2y ago
Really interesting game! Well done
pimlottc 2y ago
This is great! Level 3 is so easy :) One small suggestion: keep score separately for each level so you can compare at the end and see how much icons helped.

m2fkxy 2y ago

it's also not the proper scale type for sequential data (red/green is diverging, but there is no central value defined in the linked map).

detourdog 2y ago

Thank you for this resource.

gowld 2y ago

You need to convince the tool makers, not the web app authors using their tools' defaults.

deleted 2y ago

[deleted]

kansface 2y ago

What percent of the rest of the population is confused by not using red & green?

queuebert 2y ago
The choice of color here is not obvious to me. For example, greener could mean more money, i.e. more expensive. Also red connotes debt/negative in accounting, while black is surplus/positive. If you're eating a tomato, red is good and green is bad (unless fried I guess).
Suppafly 2y ago
>What percent of the rest of the population is confused by not using red & green? Presumably none if you build your site in an accessible manner. It costs basically nothing to accommodate the 1/12 of the population that has color-blindness.

hunter2_ 2y ago

It basically comes down to using linear brightness (at sufficiently high contrast between steps) instead of random brightness. TFA could get away with almost any colors at all, even red to green, as long as it goes from light to dark. The problem is that they decided to use dark for BOTH ends of the scale, with light in the middle, so in the absence of color perception we can only tell whether a price is extreme or moderate.

everybodyknows 2y ago

What us UI hackers would find helpful as an adjunct to this is a few polynomial coefficient terms fitted to each of the x->R,G,B color scheme mappings. Then we could generate our own scale with whatever number of steps an app requires. Or compute on the fly for a continuous scheme.