Color awareness in UI design
Introduction
Although user interfaces sometimes look simple and basic, this does not mean little thought goes into designing them. In fact, it is usually the exact opposite. It is very difficult to design something that is simple, innovative, but can still do everything you ask of it. One of the major aspects that go into these effective designs is color. Not only does your color scheme have to reflect your brand, yet catch attention in a positive way, it also has to cater to the needs of your viewers. There are 3rd party applications and extensions available that will do this for color blind users, but following a few guidelines and tricks we can do this ourselves. If you would like to skip all the science and background information jump to the bottom of the page.
What is colour blindness?
Color blindness is a catch-all term for conditions negatively affecting the perception or ability to see the color spectrum. Normal, sighted people can see wavelengths between 400 and 700nm. 400nm is the wavelength for Purple/Pink, 450 for Blue, 500 for Cyan, 550 for Green, 600 for Yellow, 650 for Orange, and 700nm for Red. Specific blindness is classified by the wavelength the viewer has trouble seeing.
How the eye works.
Before I can get into the specifics of color blindness and how to tailor your color palette let me quickly explain how the eye works. There are many parts that make up the eye but all we care about right now is the cones and the rods. Rods are what the eye uses in low light conditions. Rods are very similar in design to cones, except they do not mediate color but rather shade and depth. There are three types of cones; short wavelength cones, medium length cones, and long length cones. These are responsible for blue, green, and red color perception.
What causes color blindness?
Color blindness is caused when the cones I described earlier do not develop correctly or are damaged. Usually, only one of the cones are affected but sometimes two or even all three of them can be affected. When all the cones are damaged or underdeveloped the viewers sight is grey-scale. This is because there are only Rods working properly and rods do not mediate color. This is called rod monochromacy because the viewer relies solely on rods for vision. When one of the cones is affected, this is called Dichromacy. The effects of dichromacy changes depending on which cones (short/medium/long) are affected. When two cones are affected, this is called cone monochromacy because the viewer can only see one (mono) color.
What does this mean for people affected by colour blindness?
People affected by monochromacy will either see everything in black and white, or in varying shades of green, blue, or red. The effects or dichromacy are a little harder to explain as there are three different types of dichromacy; Protanopia, Deuteranopia, and Tritanopia. Protanopia affects the red or long wavelength cones in the eye, restricting sight to 400~650nm as opposed to the normal 400-700nm. To Protans, (people affected by Protanopia) pure red appears black, purples are indistinguishable to blues, orange-reds/orange-yellow-greens of too long a wavelength appear as a dim yellow color. Deuterans don’t have medium length cones which sadly affects most of their color perception. Like Protans they also have trouble with purple and blue but red appears a bronze color, blue appears blue and yellow appears yellow….ish. Both Protanopia and Deuteranopia are inherited rather than acquired. Tritans are slightly different as they don’t have trouble with purple and blue. Blues appear green, yellow/oranges appear pinkish, and purple appears deep red. Tritanopia is also more likely to be acquired via damage rather than inherited.
How many people have it?
In most cases color blindness is sex-linked. No, this does not
mean it’s and STD, but rather it is inherited. Because the gene for color blindness is linked to the X chromosome, color blindness is more apparent in the male population than the female population.
So what does all this mean for me?
This all means that in order to create a design that can be enjoyed by everyone you’ll need to pay a lot more attention to your color palette. Sure, there are programs and extensions color blind people can use to alter your color palette after the fact, but a truly good design covers all its necessary bases, doesn’t it?
But don’t worry, I’m not going to make you go back through all the information and numbers above to decide which colors work for which people. Instead, I will cover a few simplifications.
Basically, there are three camps for the color blind; Total color blindness, red-green blindness, and blue-yellow blindness. In each of these camps, we have the different types of color blind. In Camp Total, we have monochromacy. This is the grey-scale or single hue camp. In Camp Red-Green, we have dichromacy: deuteranopia and protanopia. These are the people who cannot see, unsurprisingly, reds and greens and for the most part, their color needs are the same as each other. And finally, in Camp Blue-Yellow we have tritanopia.
Before we build our palette…
Before we build our palette I would just like to say there are other ways to work around color blindness, the main of which being texture. There’s no such thing as texture blindness so thoughtful use on contrasting textures can make for a very interesting design.
Now on to the palette!
The first step is to pick a focus color. This can be a company color or just something you think is the most effective. For this example, I will use Optimal Orange.
The next step is deciding what color to pair with your focus color. We’ve all been taught the basics of the color when with complementary, contrasting, and trinity colors but for color blindness, we need to stick to high contrast color.
Guidelines
- Dark with bright
- Cool with warm
- Blue with Orange
- Red with Green
- Yellow with Purple
Colors
So following my own instruction, I will choose a darker, cool, blue. Blue because it is oranges primary color, dark because my shade of orange is bright, and cool because my orange is warm.
Now that we have the beginning of our color palette we can use Adobe Illustrator to proof the colors. To do this, create a couple of rectangles and color each one with your chosen colors. Make sure to add some text to make sure it’s still readable.
When you have done this go to View > Proof Setup > Protanopia to see what is would look like to a Protan. Do this for deuteranopia and tritanopia. To do this for monochromacy select your color palette then go to Edit > Edit Colors > Convert to grey-scale.
Here is a great set of examples by Alex Bulat at MonsterPost.
What I’ve done.
The lower saturation blue against the higher saturation orange not only makes it stand out a lot easier for regularly sighted viewers but also for color blind viewers. This is because no color blindness affects the perceived saturation of a color.
Exactly what not to do.
Here we see what happens when colors with similar saturation are used. Their true saturation values can be seen in the fourth (mono) tab. Of course, this is an extreme example but it is to give a perspective at each end of the scale.
Tones
Now that we have our basic colors, and we know they are distinguishable to any type of color blindness, we can choose any other colors we want using the same process. For my purposes, I want a couple of tones to go with it. Because only cones are affected by color blindness and not rods, greys will stay the same. This means we only have monochromacy to keep in mind. To do this, convert your palette into grey-scale and simply avoid using similar greys.
From hard data to fluid design – Scott
