6 ms·

Color for the color-challenged

81 points by azan-n 3y ago

pbj1968 3y ago
Thought this was about a cure for color blindness and now I’m disappointed
- gnicholas 3y ago
  I also thought this would have to do with various deficiencies in color perception. I suppose the tips could still be useful, but not quite the same thing!
- cat_plus_plus 3y ago
  Don't go around telling people you don't see color, will get you in trouble these days!
  - pbj1968 3y ago
    Nearly got me fired from a graphic design job when they figured out I couldn’t see red or green. After two years. (I had a cheat sheet) :)
  - Agentlien 3y ago
    I'm a colour blind graphics programmer in game development. It's definitely been seen more as a weird quirk than an issue at work and people have no problem helping when I ask for clarification about something colour coded.
- Nevermark 3y ago
  It gives you hex codes for your colors. Could you see all the hex codes?
  - bobthepanda 3y ago
    Hex codes are helpful for you to understand what other people are seeing, maybe, but not helpful for your sight.
- itishappy 3y ago
  Same! The banner rendered entirely in red and green got a chuckle out of me.
- chadcmulligan 3y ago
  You probably know about these, but just in case - glasses for the color blind - https://enchroma.com.au https://enchroma.com.au they apparently work.
  - techwizrd 3y ago
    I've had a pair of Enchroma glasses for at least 3-4 years, and I was just at the eye doctor preparing to get another pair. They've been quite a help, especially while reading plots prepared by folks who aren't familiar with color blindness.
    - pbj1968 3y ago
      I’ve been tested for a similar product, these things have been around in various forms for many years now. The results were I was too hopeless a case for any real benefit. I’m also skeptical, as a colorblind man, when the “before” and “after” photos on that website look different. So it’s already marketing hokum. And it’s apparently still a disability that it’s 100% acceptable to laugh at, which is getting to be a rather short list.
- acadapter 3y ago
  It was cured in monkeys around 2009, but then the scientific community kind of lost interest, or perhaps prioritized more serious eye diseases. The main researcher is called Jay Neitz, google him if you're curious. https://pubmed.ncbi.nlm.nih.gov/19759534/ https://pubmed.ncbi.nlm.nih.gov/19759534/ https://pubmed.ncbi.nlm.nih.gov/25147187/ https://pubmed.ncbi.nlm.nih.gov/25147187/
aragonite 3y ago
I realized belatedly that it's pretty easy to memorize by heart the RGB hex codes of the most common colors by deriving them from basic color theory. For example, what's the hex code for yellow? Well yellow is the complementary color of blue, and so hex(yellow) is just the ones' complement of hex(blue)=#0000FF, i.e, #FFFF00 Likewise, cyan is the complementary color of red, so hex(cyan) is the ones' complement of hex(red)=#FF0000, i.e. #00FFFF. This hex code also makes clear that cyan is produced by mixing equal amounts of green and blue light. what about azure? azure is when you take cyan and and 'de-emphasize' its green component. So you just halve the green part of its hex code, to get #0080FF. If you instead halve the blue part, you get #00FF80 (spring green) likewise, orange is when you take yellow (#FFFF00) and halve its green component, so: #FF8000. And so on. Not every common color can be derived in this way, but you can go very far.
- hamaluik 3y ago
  Holy crap. Thank you!
- egypturnash 3y ago
  Realistically you do not want to use super-pure colors like this for everything. It's the visual equivalent of shouting everything at the top of your lungs. Pull back from those FFs and give yourself some room for nuance.
  - marcianx 3y ago
    Alternatively, leave the FFs and increase the other channels to 80 and above to desaturate for a nice pastel look.
cpmsmith 3y ago
This article mentions a notable limitation of the HSL colour model: > Perceived brightness is not at all uniform at equal starting points, it depends on the hue, as well as the saturation. …but it doesn't mention an (under-discussed) solution available: using a better colour model. OKLCH uses similarly understandable coordinates, "chroma" being roughly the same concept as "saturation", but is designed to avoid just this kind of problem. That is, if you change the "hue" coordinate, you can reasonably expect the perceived lightness and chroma of the resulting colour not to change. Where such a colour does not exist, e.g. a blue with the same lightness and chroma as #FFFF00 yellow, it's simply out of gamut. There's a colour picker web app[0] that shows the boundaries of the space along with smaller spaces like sRGB, and it's helpful for getting a feel for it. It also links to a post[1] laying out the reasons to use OKLCH in web projects (it's now supported by all three major engines), and the post[2] introducing OKLAB (same space, different coordinate system) is heavy on technical details. [0]: https://oklch.com/ https://oklch.com/ [1]: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg... [2]: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
- orev 3y ago
  This is great. I keep making attempts trying to understand CIELAB and similar, with perceived brightness as my main concern. OKLAB looks like it’s exactly what I need.
- justusw 3y ago
  oklch.com is an absolutely fantastic resource, thank you for sharing it. I was able to see how limited our devices are when it comes to high chroma colors and I was only able to select purple. We are fooling ourselves and our users if we keep using HSL and think it’s acceptable.
  - lloeki 3y ago
    Nice that it tells you that some colour is not available in your current gamut but it is in e.g P3... which reminded me that my monitor is P3-able but I forgot to set the proper profile!
sph 3y ago
Such wealth of knowledge, hidden beneath the dark patterns of Medium. Sad, I'm the target audience but as soon as I saw the Medium nag screen, I'm out.
justusw 3y ago
Apologies if this sounds completely defeatist, but wouldn’t it be better to just mostly get rid of colors in product design? That is, yes, you absolutely want to use color for branding and recognizability, but given the fact that widely deployed color models and accessibility metrics do not completely reflect the reality of human color perception, using them to convey information is just not worth the trouble. Again, there are exceptions to everything, but WCAG 2.1 says UIs shouldn’t fully rely on color to convey information (please correct me if I am wrong), the same goes for icons. I can see how other sectors and industries will treat this differently (think color bands on resistors or topographical maps), but for me, creating a SaaS product with a focus on accessibility, I have almost completely given up on this topic. Charts, statistics and so on are way easier to make accessible when using good old HTML tables. The increase in product quality is marginal when optimizing for color.

81 points by azan-n 3y ago

pbj1968 3y ago

Thought this was about a cure for color blindness and now I’m disappointed

gnicholas 3y ago
I also thought this would have to do with various deficiencies in color perception. I suppose the tips could still be useful, but not quite the same thing!
cat_plus_plus 3y ago
Don't go around telling people you don't see color, will get you in trouble these days!
- pbj1968 3y ago
  Nearly got me fired from a graphic design job when they figured out I couldn’t see red or green. After two years. (I had a cheat sheet) :)
- Agentlien 3y ago
  I'm a colour blind graphics programmer in game development. It's definitely been seen more as a weird quirk than an issue at work and people have no problem helping when I ask for clarification about something colour coded.
Nevermark 3y ago
It gives you hex codes for your colors. Could you see all the hex codes?
- bobthepanda 3y ago
  Hex codes are helpful for you to understand what other people are seeing, maybe, but not helpful for your sight.
itishappy 3y ago
Same! The banner rendered entirely in red and green got a chuckle out of me.
chadcmulligan 3y ago
You probably know about these, but just in case - glasses for the color blind - https://enchroma.com.au https://enchroma.com.au they apparently work.
- techwizrd 3y ago
  I've had a pair of Enchroma glasses for at least 3-4 years, and I was just at the eye doctor preparing to get another pair. They've been quite a help, especially while reading plots prepared by folks who aren't familiar with color blindness.
  - pbj1968 3y ago
    I’ve been tested for a similar product, these things have been around in various forms for many years now. The results were I was too hopeless a case for any real benefit. I’m also skeptical, as a colorblind man, when the “before” and “after” photos on that website look different. So it’s already marketing hokum. And it’s apparently still a disability that it’s 100% acceptable to laugh at, which is getting to be a rather short list.
acadapter 3y ago
It was cured in monkeys around 2009, but then the scientific community kind of lost interest, or perhaps prioritized more serious eye diseases. The main researcher is called Jay Neitz, google him if you're curious. https://pubmed.ncbi.nlm.nih.gov/19759534/ https://pubmed.ncbi.nlm.nih.gov/19759534/ https://pubmed.ncbi.nlm.nih.gov/25147187/ https://pubmed.ncbi.nlm.nih.gov/25147187/

aragonite 3y ago

I realized belatedly that it's pretty easy to memorize by heart the RGB hex codes of the most common colors by deriving them from basic color theory. For example, what's the hex code for yellow? Well yellow is the complementary color of blue, and so hex(yellow) is just the ones' complement of hex(blue)=#0000FF, i.e, #FFFF00 Likewise, cyan is the complementary color of red, so hex(cyan) is the ones' complement of hex(red)=#FF0000, i.e. #00FFFF. This hex code also makes clear that cyan is produced by mixing equal amounts of green and blue light. what about azure? azure is when you take cyan and and 'de-emphasize' its green component. So you just halve the green part of its hex code, to get #0080FF. If you instead halve the blue part, you get #00FF80 (spring green) likewise, orange is when you take yellow (#FFFF00) and halve its green component, so: #FF8000. And so on. Not every common color can be derived in this way, but you can go very far.

hamaluik 3y ago
Holy crap. Thank you!
egypturnash 3y ago
Realistically you do not want to use super-pure colors like this for everything. It's the visual equivalent of shouting everything at the top of your lungs. Pull back from those FFs and give yourself some room for nuance.
- marcianx 3y ago
  Alternatively, leave the FFs and increase the other channels to 80 and above to desaturate for a nice pastel look.

cpmsmith 3y ago

This article mentions a notable limitation of the HSL colour model: > Perceived brightness is not at all uniform at equal starting points, it depends on the hue, as well as the saturation. …but it doesn't mention an (under-discussed) solution available: using a better colour model. OKLCH uses similarly understandable coordinates, "chroma" being roughly the same concept as "saturation", but is designed to avoid just this kind of problem. That is, if you change the "hue" coordinate, you can reasonably expect the perceived lightness and chroma of the resulting colour not to change. Where such a colour does not exist, e.g. a blue with the same lightness and chroma as #FFFF00 yellow, it's simply out of gamut. There's a colour picker web app[0] that shows the boundaries of the space along with smaller spaces like sRGB, and it's helpful for getting a feel for it. It also links to a post[1] laying out the reasons to use OKLCH in web projects (it's now supported by all three major engines), and the post[2] introducing OKLAB (same space, different coordinate system) is heavy on technical details. [0]: https://oklch.com/ https://oklch.com/ [1]: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg... [2]: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/

orev 3y ago
This is great. I keep making attempts trying to understand CIELAB and similar, with perceived brightness as my main concern. OKLAB looks like it’s exactly what I need.
justusw 3y ago
oklch.com is an absolutely fantastic resource, thank you for sharing it. I was able to see how limited our devices are when it comes to high chroma colors and I was only able to select purple. We are fooling ourselves and our users if we keep using HSL and think it’s acceptable.
- lloeki 3y ago
  Nice that it tells you that some colour is not available in your current gamut but it is in e.g P3... which reminded me that my monitor is P3-able but I forgot to set the proper profile!

sph 3y ago

Such wealth of knowledge, hidden beneath the dark patterns of Medium. Sad, I'm the target audience but as soon as I saw the Medium nag screen, I'm out.

justusw 3y ago

Apologies if this sounds completely defeatist, but wouldn’t it be better to just mostly get rid of colors in product design? That is, yes, you absolutely want to use color for branding and recognizability, but given the fact that widely deployed color models and accessibility metrics do not completely reflect the reality of human color perception, using them to convey information is just not worth the trouble. Again, there are exceptions to everything, but WCAG 2.1 says UIs shouldn’t fully rely on color to convey information (please correct me if I am wrong), the same goes for icons. I can see how other sectors and industries will treat this differently (think color bands on resistors or topographical maps), but for me, creating a SaaS product with a focus on accessibility, I have almost completely given up on this topic. Charts, statistics and so on are way easier to make accessible when using good old HTML tables. The increase in product quality is marginal when optimizing for color.