5 ms·
Chasing Rainbows: Designing for Colorblindness
- causality0 4y agoDespite 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.
- omgwtfbyobbq 4y agoThey 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.
- causality0 4y agoI'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?
- TedDoesntTalk 4y agoCan 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.
- Miiko 4y agoWhere 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-syracuse/ https://uncoveringnewyork.com/upside-down-traffic-light-syra...
- nier 4y agoInteresting. 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.
- hiddew 4y agoTrain 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.
- Miiko 4y agoHmm... Looks like train signals (usually? always?) have colors in the opposite order indeed. Probably, parent comment did mean driving a train? ;)
- omgwtfbyobbq 4y agoThey 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.
- pge 4y agoThis 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.
- parpfish 4y agoRelated: 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
- omgwtfbyobbq 4y agoI 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.
- slimsag 4y agoI 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.
- jrumbut 4y agoYeah, 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 4y agoIt'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.
- exmadscientist 4y 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.)
- thaumaturgy 4y agoTry 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.
- exmadscientist 4y agoPart 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?
- fwlr 4y agoThere 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/Cone-fundamentals-with-srgb-spectrum.svg/1280px-Cone-fundamentals-with-srgb-spectrum.svg.png 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 4y agoThis 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 agoLet 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 agoI'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 agoAh, 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.
- chrsig 4y agocolorblind 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 4y agoThis 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 4y agoA 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 4y agoWell said. If anyone is looking to learn more, this principle is called "universal design."
- pleb_nz 4y agoOk. 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 4y agoOof, 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.
- radicalbyte 4y agoSame 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).
- epups 4y agoExcellent 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-possum 4y agoIt’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.
- epups 4y agoSounds perfect. Can you point me to a specific tool or framework?
- mock-possum 4y 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 4y agoIs 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.
- parpfish 4y agoSeeing 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
- tuda224 4y agoyep, very hard to tell if someone is already burnt or if i'm burnt.
- JustinGarrison 4y agoI'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.
- Grustaf 4y agoAren'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.