Chasing Rainbows: Designing for Colorblindness | Hacker News Reader

Chasing Rainbows: Designing for Colorblindness

theverge.com

147 pointszdw53 comments

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.

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).

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.

«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.

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.

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...

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.

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.

> 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.

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.

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

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?

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.

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.

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.

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.

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.

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.

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

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.

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

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.

Never rely on color alone to signify important data

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

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.

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

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.

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.

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?

Can see it’s illuminated but can’t distinguish it from the bottom light (red). One learns the order of the lights… lighted on top? Go. Lighted on bottom? Stop.

Where do you live to have green light on top? I thought it was an international standard to always have red light on top, and this article claims the only exception exists in Syracuse, NY:

https://uncoveringnewyork.com/upside-down-traffic-light-syra...

Interesting. The linked article describes how Irish immigrants vandalized traffic lights until the city decided to hang them upside down. The reason for the destruction was that the Irish green was perceived as being below the British red.

They erected a statue of an Irish family near the last remaining traffic light that has it’s green lamp on top. The boy of the family sports a slingshot.

Train signals in the Netherlands also have red on the bottom. The reason is in case of snow falling on the light covers, the red light (most important signal, "stop") will never be blocked by snow.

Hmm... Looks like train signals (usually? always?) have colors in the opposite order indeed. Probably, parent comment did mean driving a train? ;)

They all look different, but the perception of what colors they are is different. That applies to other colors too.

Green looks like white, yellow looks like yellow, and red looks a little closer to orange than red.

This is an accurate description to me (also color blind) - white (with a slight green tint), yellow, and orange.

Apparently, walk signs (with the lit figure of a walking person) are in many areas white rather than green, but I see them as the same color as green traffic lights.

Related: whenever movies decide to make an actor into an alien/witch/monster by giving them green skin, I just see a guy with normal colored skin

I can see the difference in intensity, but green looks mostly white to me.

With enchroma sunglasses it looks a bit green, and with them at the right angle it looks mostly green, which I'm guessing is how most people see it.

Edit - There are some older styles of traffic lights where I can't easily see if green is lit when the sun is at a certain angle.

I try to avoid those during those times and/or use the behavior of other drivers to determine if it's lit. If the are no other drivers I slow down until I can see if it's lit.

Also, brake lights look a lot less intense to me, so I generally leave much more space between me and the vehicle in front.

> 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.

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.

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.

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).

> 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.)

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.

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?

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?

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.

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.

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.

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.

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.

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

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

Reply on news.ycombinator.com