Hidden Power of Designing with Gray
Did you know that gray could be such a powerful color? It can often get overlooked by a lot of people – after all, it lies right in between two of the most common design colors, black and white. In this blog, we’ll talk about how you can use gray to your advantage to unlock all of its possibilities.
Let's Set the Scene
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. 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:
Defining Structures
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 help the user keep their place without overwhelming that clean and modern look we’re always striving toward.
Medium Gray
Medium gray is highly effective for the use of encouraging clicks on a webpage. 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
Dark gray has different functionalities, one of the main being to improve text readability. 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.
Final Thoughts
As you can see, the color gray is maybe more versatile than we had previously thought. Try implementing some of these techniques as you design your business applications and see if you can unlock the secret magic of gray, and let us know how it goes!