Designing a landing page even for color blind people

Designing a landing page for color-blind people

As I am going on with the development of our backend and several new features, Fanny did a very great job in redesigning our homepage. We will be discussing that in a future post. In the meantime, I wanted to share with you an anecdote about the first version of our homepage.

Elokenz v1 Homepage

When I designed our first home, I had no real experience about how to do this kind of business. I rolled up my sleeves and started from scratch with Bootstrap. The only thing I tried to keep in mind was the tips given by Oli Gardner in his Unbounce ebook about conversion-focused designs.

Home from Elokenz v1

Therefore, the home had few distracting elements and two highly-contrasted call-to-actions (CTA). There is also a quick anecdote about this design : it was thought for color-blind people.

Color Blindess

When I was creating this landing page, one of my co-workers at Lens was color-blind. Color blindness is defined as the inability or decreased ability to see color, or perceive color differences, under normal lighting conditions. Since this genetic trait is present approximately in 8% of Caucasian males, I decided that this could not be neglected for my target market. Eyequant estimates that 108 Millions web users are color blind.

Basically, to discover if you are color blind, you can do the Ishihara test. If you see the same thing for the left and right panels, you’re likely to be color-blind :

sihara-test

Some colors are more prone to appear than others. An interesting fact is that there are various variations of color-blindness : this means that all colors are not perceived the same by different color-blind people.  Here is the color spectrum for these people, it’s extracted from “Color Design for the Color Vision Impaired” article from B. Jenny and N.Vaughn Kelso :

spectrum_color_blind

Designing logos and CTAs in a color-blind world

I made several attempts to see what was more consistent among the various kinds of blindness. One thing you should know about color-blind people, is that while most of them see blue they can’t distinguish green from red. So, having a blue logo is fine, while having a red or green logo is bad, because these colors are really different for color-blind people and they might be used by your partners or clients in a context that you don’t control.

Logo comparison for regular vs color-blind vision

 

For instance, if your design includes a G+ signin button, you need to pay attention to the background ! You should absolutely avoid green backgrounds. Here is what it looks like for, say, a regular homepage with social logging :

Social Login for color blind people

Here you see that blue is not easily confused. This is the reason why hyperlinks are blue. I’ve also read a rumor stating that it is the reason Mark Zuckerberg plumped on blue for the dominant color in Facebook’s design because of his color blindness.

Now you understand why so many logos are blue-ish.

3 Pro tips to enhance your designs for color-blind people

Use tools to help you

If you ever want to design something for color-blind people, you should know that there is few software out there to simulate that on your own computer. Personally I used ColorOracle to get a quick feeling about my layouts. However, I discovered later that the option is available in Photoshop (under ‘view’ > ‘proof setup’ > ‘color blindness’). This allows professional designers to quickly check their work.

Photoshop menu - Color blind simuilation

Avoid a combination of red and green

By avoiding red and green, you’re not just catering for the color blind, you’re designing a CTA for the largest possible audience. If you’re not, be aware that contract is likely to change for your audience.

Designing CTA for color blind people

Above you can see that even ‘big’ companies made the mistake at some point. Zendesk is a very clear example of the confusion between green and orange/red colors. Their “Try Zendesk Free” and “Play video” disappear due to the bad choice of colors.

 

[cta id=’744′]

Orange is great for CTAs

Red and yellow jump of the page, but with red symbolizing risk, and yellow closely associated with hazardous situations, just what color is best for your CTA ? Research suggests that orange is the happy medium – a combination of aggressive red and cheerful yellow. Clearly some of the larger online brands like Amazon and Paypal have taken note of this, using orange and those that contrast with it to create immediately recognizable calls to action.

Orange is great for CTA

That, of course, is just a suggestion and depends on the rest of your design and on your audience. Keep in mind that you should always be testing.

Legibility counts too

A final note to take into account. Lots of people have trouble to read small font. So, you will help your readers a lot if you increase your font size.  GoCreativeGo suggests to use at least font above 19pt.

Conclusion

Whenever you are designing your logo or your landing page, keep in mind that some people will see it differently than you do. As the logo will probably land on external spots, where you don’t control background, you should avoid green and red colors. Otherwise your logo might not be contrasting as expected. Blue hues are always a good choice.

Regarding your landing pages, you should be careful that your CTAs appear on contrasted background. Check that using software such as ColorOracle or photoshop.

Finally, I created a list of 10 designs which appear unexpectedly for color blind people. Remember, there are 8% of white males with this genetic trait. Your conversion will drop proportionally if you don’t optimize for these people.

xx logos you would not instantly recognize if you turned color-blind

As color blind people represents approximately 8% of Caucasian males, designers needs to pay attention to their choice of colors. As we were writing about what we did at Elokenz to improve our logo and landing page for color blind people, we decided to compile a list of the ‘famous’ pages that perform very poorly for color-blind people.

Google’s logo

“There were a lot of different color iterations”, says Ruth Kedar, the graphic designer who developed the now-famous logo. “We ended up with the primary colors, but instead of having the pattern go in order, we put a secondary color on the L, which brought back the idea that Google doesn’t follow the rules.”

Well, that’s not exactly what color-blind people could see. The ‘l’ and ‘e’ have quite similar colors.

Number 13

Catholic Ladies College
A pink CTA on a flashy Green background

Number 13

Catholic Ladies College
The contrast with the CTA is absent

Number 12 : GreenPro

A red CTA on a green background

Number 12 : GreenPro

Number 11 : Grove

An orange CTA on a green background

Number 11 : Grove

Number 10 : h.engage

Number 10 : h.engage

Number 9 : Hootsuite

Number 9 : Hootsuite

Number 8 : Sprout social

Number 8 : Sprout social

Number 7 : Semrush

Number 7 : Semrush

Number 6 : Joomla

Number 6 : Joomla

Number 5 : Recurly

Number 5 : Recurly

Number 4 : LaserWarriors

Number 4 : LaserWarriors

Number 3 : Pocket

Number 3 : Pocket

Number 2 : Postmark

Number 2 : Postmark

Number 1 : Zendesk

Number 1 : Zendesk

 

Edit December 2015 : The post has been translated to Japanese : http://postd.cc/designing-landingpages-for-color-blind-people/