Chasing Rainbows: Designing for Colorblindness

https://www.theverge.com/23650428/colorblindness-design-ui-accessibility-wordle

by zdw • 3 years ago

147 53 3 years ago

causality02• 3 years ago

Despite what many think, I can see most colors!

avocado toast and peanut butter toast look pretty much the same to me.

Strong deuteranopia like the toast statement indicates the author has actually reduces the color spectrum from around one million colors to an estimated ten thousand, or one percent of the possible colors a person with normal color vision sees.

omgwtfbyobbq3• 3 years ago

They may just have problems with a specific frequency. I'm almost completely missing whatever frequency of green most traffic lights use, but I feel like I can differentiate between more than 10,000 different shades, although I certainly can't see nearly as much as someone with normal color vision can.

causality02• 3 years ago

I'm almost completely missing whatever frequency of green most traffic lights use

Fascinating. So you can't tell the difference between an illuminated and unilluminated green traffic lamp?

slimsag• 3 years ago

I always tell a joke about colorblind design:

User: My hands don't work very well, I can't drive
Designer: What if we made the steering wheel larger?

Which is to say that for myself and many like me, 'colorblind modes' frankly suck.

Sure, a bigger steering wheel helps a bit (now you can try to move it with your feet..) but what'd be a hell of a lot nicer is avoiding a hands-only design in the first place.

My brain isn't wired to look at colors and register that as /a unique thing/, I regularly enjoy 'surprises' when I realize _oh my god they meant that color to mean something_. My brain registers /contrasts/ as unique things, not colors.

Strip your design of all color and ask yourself if it is joyful to use. If it's not, it's poor for many colorblind users too. macOS gives me red/yellow/green buttons to interact with windows, wtf are those? But if you give me symbols like `x`, `-` and `[ ]`? Now I know what we're talking about.

Make your design work without color, and then add pleasant colors for those who enjoy it.

---

Opposite to that I'll say I realize I'm in a minority of minorities here; I don't expect anyone to do anything special for me. I just find a lot of humor in the seemingly endless revelations of 'you can see things the way colorblind people do' via image filters. Reminds me of the 'gifting my uncle colorblind glasses' videos that go viral every week.

jrumbut2• 3 years ago

Yeah, I find the same thing. I am "red green colorblind" but my experience is that there is a long tail of effects beyond the simple rules that you read about.

I'm friends with a lot of visual artists and designers and a subset of them clearly have color vision beyond the ordinary. That is something to be aware of as a designer, that even non-colorblind people may not be able to detect some of the subtle differences you can (especially if you have a nicer/better calibrated monitor).

NoToP• 3 years ago

It's funny you mention it. I'm not a designer in any professional sense, but I've found myself thinking about colors purely as a communication channel. Namely I came to the conclusion that you can shove at most 4 bits of information into it, 1 bit of rgb and a birght/dark variant (color blindness notwithstanding). Designs which try to pack more info into this channel then they should are doomed to fail. The real answer after colors are exhausted is to move to shapes as a differentiator. There's a few primary shapes just like primary colors. () [] <> ×. Just like colors, they can be mixed. People will guess that a tear drop shape is in some way a combination of whatever the circle and whatever the trianlge/diamond represent. Eg you're allowed to make [) and <). But once you try to mix too many outlines together it all becomes grey in a sense. Trying to put a square, triangle, and arch each on a quarter of the outline just becomes an amorphous blob rather than an intuitive merger of established symbols. In a very real sense, basic shapes are a form of color from the perspective of design elements.

nier2• 3 years ago

«Minority of minorities» feels accurate to me and I remember the moment of creative power when I realized that I need to take matters into my own hands. As you wrote, we can't rely on others to do things for us.

So I made a tool that tells me the name of the closest web color to whatever is under the mouse pointer. It's not perfect, but it's certainly easier than trying to discern RGB values.

I'm proud that I've turned my prototype into a polished product, available in 5 languages on the Mac App Store and with a nifty shortcut for copying colors to the clipboard. Check out the link in my bio, if you're interested. I know I'll probably get some downvotes, but I'm excited to share this with others who may find it useful.

radicalbyte2• 3 years ago

I used 3d glasses (the red/green ones) for many years. They were great, one of the two colours turns to black depending which one you used.

Honestly I should just make a browser plugin which universally removes the colours you can't see and switches them with someone we can see.

LanternLight83• 3 years ago

I think closest color name is great, but re: discerning RBG values, I think folks trying to do so would be in a great position to decide if HSL values really are easier to parse.

https://sujansundareswaran.com/blog/why-hsl-is-better-than-h...

Ryder123• 3 years ago

I'm also colorblind, and I think the hardest thing for people to understand is your statement "My brain isn't wired to look at colors and register that as /a unique thing/".

When people find out I'm colorblind they love to ask me the never ending stream of "What color is X?" questions, which are fun but superficial. I think the bigger difference between myself and people with normal color vision is how often I fail use color as a piece of information.

On the other hand visual texture means a ton to me. When it comes to clothes I could care less about the color but can absolutely be swayed by the look of the fabric.

Zababa• 3 years ago

You know, I never really realized it before you put it into words, but you're right. Not seeing some colors as well or at all is something, but the most confusing thing, usually both for me and other people, is how they're able to precisely categorize almost any color into a discrete group, and I have a very hard time doing that.

I'm also in the same boat as to "what should we do about it". At least it's something that's easy to explain to people and well known. I always wonder if there are not lots of people going around that perceive things in very different ways than other people, and have no way of knowing if it's just us. You can test colorblindness with the plates, but what if all food tastes off to you, how do you test that? Or if human voices tend to sound like screenching?

Your point about colors vs shape is also interesting. I wonder if the fact that I'm colorblind plays into my preferences of terminals, text and keyboard shortcut.

orbital-decay• 3 years ago

Strip your design of all color

It's harder than it sounds. If you have total color blindness, your mapping between colors and values might be entirely different from most people, or even other people with monochromacy.

Color blindness in general is a pretty wide range of perception abilities. There's a classification but it's fairly rough. It's usually close to impossible to design something that makes sense for all colorblind people at the same time, because the types overlap heavily.

exmadscientist2• 3 years ago

EnChroma ... corrective glasses ... don’t actually fix colorblindness. They correct for it...

I would be really, really interested to try the reverse version of those to try and see like a colorblind person. I feel like a few hours of doing that could be very insightful. (Especially since I'm an EE now and we color-code all the things. This was not necessarily a great choice.)

thaumaturgy2• 3 years ago

Try an app called "CVSimulator" (available for Android and iOS). My friend uses it to see what I see (sort of), and it's accurate-ish.

exmadscientist2• 3 years ago

Part of my problem is that I'm specifically interested in things (indication LED color) that are out of gamut for sRGB. If the original thing doesn't even display properly, I can't exactly hold out hope that the simulated thing will be anything close to the true experience, can I?

fwlr2• 3 years ago

There isn’t really a reverse EnChroma. The mechanism of color perception is you have three different chemicals in your eye and each of those chemicals reacts most strongly with different wavelengths of light. This is a chart of those three response curves: https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Co...

The way you perceive “green” is that your brain goes “ah, S is at 10% activation, M is at 80% activation, L is at 50% activation. That’s green!” Colorblindness is when you take one of those curves and shift them closer to the other (shifting M towards L is the most common, shifting L towards M is the next most common). The bigger overlap in curves is what makes those colors not contrast. EnChroma glasses work by blocking a certain wavelength of light that’s right where the overlap is strongest. Maybe you could get the effect of “reverse EnChroma“ glasses by having light at the overlap added in to whatever you’re seeing?

mproud• 3 years 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?

jrumbut2• 3 years 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.

thaumaturgy2• 3 years 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_• 3 years 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.

davidkuennen• 3 years 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• 3 years 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• 3 years 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• 3 years ago

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

sputr• 3 years 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• 3 years ago

Never rely on color alone to signify important data

chrsig• 3 years ago

colorblind person here: if you want to design for colorblind people, don't use colors to distinguish things.

do: - use a different shape, or font/font weight.

- provide text labels that appear on hover

fisherjeff• 3 years ago

This is the best visualization of colorblindness I’ve ever come across.

Interestingly, my ability to distinguish between the images depends very heavily on the brightness (and, on iOS, Night Shift and True Tone) of my screen. Outdoors earlier today the two leaves were identical. Now, with brightness down and Night Shift on, it’s impossible not to see the huge difference.

DoreenMichele• 3 years ago

A stat I sometimes trot out is that 15 to 20 percent of the population self identifies as disabled but some studies show that about 60 percent of people would benefit from better design accommodating their more minor limitations.

Colorblind individuals don't typically call themselves disabled. The 8 percent of men who are colorblind is part of what I'm talking about.

Life could be more beautiful for a lot of people with a little more awareness and thoughtfulness in terms of how we design our world.

maxbond• 3 years ago

Well said. If anyone is looking to learn more, this principle is called "universal design."

pleb_nz• 3 years ago

Ok. That was fairly funny and enlightening. I knew I was color blind, but interestingly I didn't see much difference between the two sides when sliding the slider from left to right.

johnny_canuck• 3 years ago

Oof, this hits home for me. I've got the same color blindness as the author.

The camping system Ontario uses for booking camp sites has a problem similar to the Kayak diagram the author shows. When choosing a site on a virtual map, they are listed using red / green for availability. I can't see it at all.

Luckily they offer a list view, but I wish I could choose based on the map as there are often reasons why a site is more desirable that you need to be viewing the map to understand.

radicalbyte2• 3 years ago

Same here only it literally never seems to come up. No-one cares.

See: accessibility for left-handed people (and thus everyone with any kind of physical disability).

epups2• 3 years ago

Excellent article. I wonder if anybody knows of automated tests for colorblindness compatibility? Something that could check pallettes and give out suggestions for making things more accessible.

mock-possum2• 3 years ago

It’s a common part of automated accessibility testing in web ui programming. You just click a button, and your entire site is examined, every instance of one colour of content against another colour in the background is graded according to the contrast ratio between the two colours. If the colours are too close, it lets you know, so you can change it.

epups2• 3 years ago

Sounds perfect. Can you point me to a specific tool or framework?

mock-possum2• 3 years ago

For example, at a glance, barring other context clues like texture and toppings, avocado toast and peanut butter toast look pretty much the same to me.

This is a pretty fascinating example, given that green peanut butter or brown avocado both sound revolting

or to look on the bright side of things: avocados look bright green, vital as the plants that grew them, and they often have a creamy quality to both their colour and their flavor; peanuts are brown, woody and muddy, like the shell they’re borne by and the dirt they grew in.

Peanuts and avocados are both similarly the fruit of their parent plants - not a leaf or a stem or a root or a flower - but one is from below the ground, and one is from above, and their colour reflects this arrangement - and contributes to the appeal of each respective food.

IIAOPSW• 3 years ago

Is there a plugin where these examples are being generated? I want to look at the colorblind NYC subway map. By sheer coincidence, everything Bronx bound should be the same color making the map arguably more logical.

parpfish2• 3 years ago

Seeing that this thread is turning into a meeting place for everyone that shares the authors form of colorblind (myself included)…

Does anybody else have problems with monitoring sun exposure and sunburn? By the time I can tell there’s any redness I am BURNT. I wouldn’t be surprised that this leads to increased rates of skin cancer among the colorblind

JustinGarrison• 3 years ago

I'm not sure about telling when my skin is burnt, but it has limited my ability to tell when other people (eg my kids) are sick, pale, or blushing. It's often something I rely on others to tell me because I don't see a difference.

tuda224• 3 years ago

yep, very hard to tell if someone is already burnt or if i'm burnt.

Grustaf• 3 years ago

Aren't there browser plugins that remap colours in ways that are useful for color blind people? It seems like a trivial thing to make. Could even map some colours to patterns.

Chasing Rainbows: Designing for Colorblindness

Related Stories