Color Blindness

When you design an interface, it’s important to always remember about color blind people. It’s no secret that approximately 8-10% of men and 0.5% of women have certain form of color blindness. In other words, among every 100 visitors of your website, there’ll be at least 10 who “see the world differently”. That’s why it’s good to make sure that the design looks equally clear and accessibly for everyone.

For those who don’t remember what it is, color blindness is the inability to distinguish certain colors of the spectrum. It’s more common for men rather than women since this disturbance occurs by mutation of the X chromosome. There are 3 main types of color blindness: deuteranopia (green and most common one), protanopia (red) and tritanopia (blue). If you’re curious about how the world looks like for each of these forms, take a look at the rainbows below.

forms

Right now you’re probably thinking something like “Why would I even rely on such a small group of users?” But the thing is that all the elements that suit daltonians are considered to be really well crafted. And if you make a universal design, it doesn’t mean that its aesthetics should suffer. So if you’re ready to rock and learn how to make a nice layout available for color blind people, here’re the main five principles:

Use both, color and graphics at the same time

If you think that color has absolute power, you’re wrong. Let’s take error messages as an example. When it comes to certain forms of color blindness, it’s difficult or even impossible to see the red in it. Does it mean that designer should change it to blue or purple or something else? Nope. Adding icons or other graphic symbols would be a much better solution to attract user’s attention. “Funny toaster” error page designed by Timo Wagner perfectly illustrates this statement. And if you have second thoughts or doubts about if your graphic solution makes sense, there’s always a way to see your design from color blind perspective. Just go to Photoshop: View — Proof Setup — Color blindness — Type.

By the way, there’s also a funny fact about Facebook logo. Did you know that its famous blue color scheme was chosen due to the fact that Mark Zuckerberg has red-green color blindness? So there we go: blue that is.

error

Minimalism? Yes, please!

Instead of using 10 different colors for your interface design, make it 5 or 3. It’s a proven fact that the less colors you use, the better it looks for users with color blindness. Besides, minimalism is a trend these days. Take a look at home page design of Sabé Masson perfumes. There’s not much going but yet it looks great. Plus, they also use graphics to help attract attention (see the delivery box in top right corner). And I’m not the only one to think that it’s a nice example: Awwwards‘s put it on their winner-list page, too.

Sabé Masson La maison du Soft Perfume

Use texture and patterns to create a better contrast

If you want to create a contrast, solid colors won’t be of much help here. The better decision is to use patterns and textures. For example, it can be difficult for users with color blindness to distinguish the charts. In this case it’s better to take a contrasting pattern, especially if the color palette is limited. Julian Hrankov (the one who designed infographics listed below) comes up with even better idea to turn the perspective and use unusual shapes. And it works!

full_view

Use contrasting colors and tints

There’s no need to rely on black and white as on the only contrasting pair. You’d have to add more colors to your design anyway. And it’s really important to choose the right ones so that color blinded people would be able to see the link inserted in your text or highlighted selection. This UI represents exactly what I mean. No matter which mode your choose in Photoshop, the contrast is there.

Statistics_-_real_size

Avoid dangerous color combinations

There’re certain combinations which are considered to be dangerous in the world of color. Because of the fact that color blindness performs differently for different people, it’s hard to tell which colors are “safe” for web design. But here’s a small list of combinations which represent a real nightmare for such people: green + red, green +brown, blue + purple, green + blue, light green + yellow, blue + grey, green + black. Just keep them in mind when you start designing.

And just in case if feel like figuring out your level or color blindness, here’re a few tests to pass:

Color blind check

Ishihara test