The Secret Application Power of Designing with Gray

application gray box blog text


Yikes.


The use of gray has come a long way since then, however, to access its magic takes careful planning. Judicious use of gray can modernize your application design while communicating important information to your users. Let's explore some shades of gray and where they work best:

Medium Gray: Inviting Clicks

application example of grey design

The use of a medium gray for icons, toggles, and field outlines communicates to a user that an element has not been selected, but that it wants to be. When contrasted with a bright mouseover, selected, or focused color, gray elements help a user quickly see what their options are.

This gray should be lighter than the text, but dark enough to stand out against a white background when viewed at a glance.

Dark Gray: Improving Text Readability

Aciron application black text box
This small change can make a big difference to tired eyes.
Aciron application grey text box



Replacing black with a dark gray will make blocks of text easier to read. The high contrast of black text can cause eye strain, especially when appearing in a paragraph format. Switching to a medium or dark gray can increase readability up to 58%. Take care when setting your text to gray and make sure there is enough contrast that it is still easy to read against a white background.

Try implementing some of these techniques as you design your business applications, and see if you can unlock the secret magic of gray!

Enjoy this article?

Share it with your network.