Microsoft highlights the impact of color on app design

Mark Coppock

Updated on:

Microsoft has been producing a series of blog posts on how to design and code winning Universal Windows Platform apps that leverage all of the strengths of Windows 10 on every kind of device. These posts have varied between hardcore programming and more esoteric topics like how best to communicate with users and how to create an app with excellent navigation.

Today, the Windows blog has a post dealing with a topic that’s near and dear to all of our hearts, even if we don’t think about it all that often. Specifically, today’s installment deals with how color can make an app more effective and engaging.

First, the blog insists, color impacts our emotions. According to color theory, Microsoft provides a list of how certain colors can affect our mood:

  • Red is a vibrant and activating color associated with passion and danger.
  • Orange evokes nature as well as energy.
  • Yellow projects joy, intelligence, and positivity.
  • Green suggests renewal and is often found in financial apps.
  • Brown is natural and organic and can often serve as a good contrast for more vibrant colors.
  • Blue is often used to project calmness, security, and professionalism.
  • Violet evokes royalty and luxury.

Next up is color theory, where Microsoft evokes Isaac Newton to highlight the importance of combining colors in the right way to evoke the right responses. Microsoft highlights how colors can work with each other to result in specific effects:

  • Complementary colors (a). Colors that are directly opposite each other on the color wheel.
  • Analogous colors (b). Colors on either side of a given color on the wheel.
  • Split complementary colors (c). Colors that are the analogous colors of a complementary color.
  • Triad colors (d). A set of three colors that are equally spaced apart on the wheel, each 120 degrees from the others.
Color theory.

In an interesting note, Microsoft indicates some of the limitations of certain Windows 10 devices:

Tip: Xbox knocks off the ends of the spectrum, supporting somewhat fewer color choices. HoloLens can’t use pitch black (0, 0, 0) because this represents transparency in Windows Holographic.

Color contrast and accessibility is the next topic, dealing with limitations on vision such as color blindness and how that impact an app’s accessibility to certain users:

So far, contrast seems like just an aesthetic problem. Contrast becomes an accessibility problem, however, when your app is used by people with poor vision or by people who are color blind. Color vision deficiency affects 8 percent of men and 0.5 percent of women worldwide. Because of this, color contrast isn’t something you can ignore.

Finally, Microsoft touches on creating effective color schemes, and points to an Adobe tool that can provide a shortcut to ensuring that an app’s overall color scheme is effective in terms of colors used, emotions evoked, color theory, and everything else discussed in the blog post:

This color app will let you select any of the color relationships discussed in the color theory section above to select your color scheme: triad, complementary, analogous, or split complementary. It will then give you the color values for this color scheme at the bottom as both RGB and HEX values, which you can then plug into your UWP app. All you need to do is start with a dominant theme color that will create the right emotional context for your app using the descriptions in the color and emotions section. You can also play around with the tool until you find a main color that appeals to you and reflects the purpose of your app.

Adobe color tool.

Most app users have likely come across apps where colors are glaring and clashing, and that’s precisely what today’s developer’s blog post is meant to help avoid. If you want to know more about how to use color effectively, then check out the blog post for more details.