Grey Buttons Are Invisible By Design

Posted By Debbie on January 20, 2015

Ever since Apple started designing everything they did in black on white with lots of shades of grey, the whole world seems to think that “good design” means lots of shades of grey.

I often disagree. Good design means, among other things, making sure that people notice and find the path they wanted to take. Shades of grey can often obscure that path by hiding choices. If you don’t see a choice designed with a grey background, then that’s a path you might miss.

Of course, there are times the business goal is to hope you miss that choice.

Take this screen from the Network Solutions site. I was in the process of renewing a domain name, which at NetSol includes 900 screens offering you services you didn’t want. It looks like they hope you will buy them by making the “no thanks” buttons rather hard to notice. Click to enlarge:

ScreenHunter_11 Dec. 01 09.02

You might even notice the giant text saying I should call now to renew this domain (AND buy this other service). The green call to action had the phone number they have on file for me; clicking that would tell them to call ME (to sell me these other services). I kept scrolling and finally found the NO choice. It was light grey with white text. That’s going to be hard for some people to see. That probably doesn’t pass contrast tests.

And it was probably designed that way on purpose.

How are you using grey?

I have seen other websites that treated grey as part of their colour palette. Grey backgrounds for tabs (resulting in a product mgr admitting that many people didn’t know those tabs were there, leading to customer service phone calls asking “how do I…”). Grey backgrounds on buttons.

What will always amaze me is a company that uses a grey-backgrounded button as the key call to action. I’ve seen some websites where someone must have thought WELL if we put an interesting text colour on our grey button, people will notice it and click that. I say don’t be so sure. Putting blue text on a grey button is still a grey button.

Grey is the official colour of a disabled interactive element.

It’s the official colour of “You can’t use this right now” and “this is temporarily or permanently disabled.” It’s often the colour of a non-primary choice you’re hoping people don’t see, like a Cancel button.

If you are making real call to action buttons grey, you are probably doing it wrong. And if you still want to copy Apple, even they have moved on to CTA buttons that are more easily noticed. Click to enlarge.

ScreenHunter_13 Dec. 01 09.38