UI Color: What's next?

Color Theory- Colorblind Population Special

Time and again we say that we create UI design keeping the user base in mind. We keep it simple, and we keep it meaningful. We move further while focusing on colors and we coordinate them so that it gives meaning to our UI. The most important things we keep in mind while choosing colors are:

• It should coordinate with our brand theme.

• Each color has a meaning, and we should them accordingly.

(You can read more about it here)

But are we done? Have we covered every user's choice? Are we sure everyone will be happy with out UI if we follow these points?

The answer is "No".

Now is the time to go one step further and look from a Color Blind person's eyes. They see the world totally different from ours. To understand this phenomenon, have a look at the following image:

• Deuteranope is when a person's Green cone cells are not working. In other words, the person cannot differentiate between Red and Green.

• Protanope is when a person's Red cone cells are not working. In other words, the person cannot differentiate between Yellow, Green and Red.

• Tritanope is when a person's Blue cone cells are not working. In Other words, the person cannot differentiate between Yellow, Red, and shades of Blue.

As a UI or UX designer it is our duty to take care of these conditions while designing app or website. We say that giving contrast is very important, as it helps focus the user's attention to the right action points.

But what when the user is not able to see it?

Let's say we design a cool app with Blue background, and give the main action button Red color. The view for people will be:

This contrast is not of much help to the color blind person.

There are certain color combinations that should be avoided whenever possible. You can read more about it here.

So, if you lighten light colors and darken the dark ones, you will increase its visual accessibility. Here are possible solutions:

• Red – Green transformation, makes reds brighter, and greens darker;

• Blue-Yellow transformation, makes blues brighter, yellows darker;

• Increases saturation;

• Filters – darkens all colors other than the specified color;

• Hatches – draws different hatch patterns depending on the color.

(Courtesy via @templatemonster)

Thus next, we need to expand the horizons of color theory and look beyond normal vision to design a better UI.