All Blogs
All Blogs

The Secret Application Power of Designing with Gray

Gray is magic.

I wish I could take credit for that wisdom. When a professor at design school told me that, it completely changed the way I approached UX. Gray can be tricky to use, though. Warm, medium grays feature prominently in the application interfaces of the early 2000s. You know the ones I'm talking about. They were usually accompanied by shadows, highlights, and a dotted line around selections.


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:

Light Gray: Defining Underlying Structures

application with white backdrop example
This form has a lot going on.
application with grey backdrop example
The gray background helps the user track where they are.



In cases of segmented content, a very light gray background behind cards sets a necessary contrast. This way the user can better differentiate each piece of content. This is especially relevant to complex form design, something business application consultants often encounter. Grouping fields together is important in form design, and a gray background can help separate those groups from each other. It gives the user a better sense of which sections they have already completed.

Light gray also works well in data table design. If the dividing lines of a table are the same color or darker than the content, it inhibits readability. Similarly, in a complex table with a lot of data, light gray zebra stripes helps the user keep their place without overwhelming that clean and modern look we're always striving toward.

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.

Facebook-f Twitter Linkedin-in