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.
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
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
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
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!