Choosing colors for a subtle UI

Question

I'm currently agonizing over how light I can make various colors in my UI before I adversely affect usability. The reason for the agonizing is that different monitors have different responses. Those at work are universally poor, showing light colors as very close to white, no matter how you change the settings on the monitor itself. At home, however, I know that the same colors come through loud and clear.

One specific (albeit not brilliant) example is the color used for subtle text prompts e.g.

The majority of our UI has a white background; for relatively bold/heavy typefaces, I'm using #E7E7E7 as the text color, and darkening it to #CCCCCC for smaller font-sizes and lighter typefaces. I desperately don't want to make the messages so dark that they dominate the screen or demand unnecessary levels of attention, but neither do I want them to be so faint that you can barely read or even notice them.

How do you design for subtlety while allowing for different color responses in users' monitors? Do you use a rule of thumb to decide what's the lightest legible text color on, say, a white background?

I'd be interested to hear any advice.

Answer 1

At minimum you should choose colour combinations that pass the WCAG 2.0's requirements for colour contrast (Criteria 1.4.3 - and Id recommend at the AA level). The example colours you have shown above won't pass by a long measure.

It doesn't mean all your colours have to be solid dark tones, but your text should be a somewhat darker than #e7e7e7 and #cccccc.

There a heap of tools and websites about that can help you do the calculations to find combinations that work. JuicyStudio is an example of one I use frequently. When you use that tool you will discover the minimum colour for regular text on a white background is #777677. For large text, and there is a minimum size definition for what means large, 18pt or 14pt bold, the minimum colour on white background is #959495.

Id go one step further than JeromeR comments - you don't need to consider just the needs of visually impaired users. A user with "normal" sight may find a light UI very hard to use depending on other factors in their environment, the time of day, how long they have been using the application etc

Answer 2

Please consider what you may be doing to visually impaired users when you design a subtle UI, so that you can do it well.

I was on a customer site doing ethnographic research when the company happened to be implementing a new software product. The product was all soft greys with a few accent colours. It looked very nice.

During the course of the day, I had a conversation with a visually impaired user who "confessed" to me his visual impairment, said that he had been hiding it for years because he feared it would affect his career advancement, and said that, with the new version we were rolling out, he was no longer able to read the text. The contrast was simply not high enough for him to see the text.

This user told me that, with previous releases, he would take some time alone to stare intensely at every detail of the screen, with his eyes very close to the screen, in order to memorize the location of everything. He would also memorize the number and relative location (order) of commands on drop-down menus, and the relative string size size/length, so that he could pick them out, later, without reading. Then, after memorizing the GUI, he would return to his work station, sit back, and pretend to be functioning like all his colleagues.

He also showed me that the standard Windows accessiblity feature that transforms a Windows application into a high-contrast black-and-white version caused this particular application to crash. And he also showed me that the high-contrast pointer, when mousing over this particular application, would revert to a standard (low-contrast) pointer.

All in all, it was an eye-opening session, for me -- if you'll excuse the pun.

Again: consider what you may be doing to visually impaired users when you design a subtle UI, so that you can do it well.

Answer 3

Very nicely explained friends.

I'd like to add to _Nathan_W_ 's point that even a person with a normal sight may find it hard to use a light UI - consider laptops where different kinds of screens reflect in a widely varying range even in normal lighting conditions depending upon the position of light source with respect to the screen.

In particular, I really like the recently released WordPress 3.0's UI for a subtle UI - have you had a chance to take a look at it?