Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

blank state message

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.

share|improve this question
    
Looking back at this issue a few weeks after changing my app, I can't believe how faint my original choice was. I'm now completely comfortable with the stronger text and the app's more usable for it. Funny how it just takes a kick up the pants sometimes. Thanks, guys. :) –  Mal Ross Jul 27 '10 at 8:45
add comment

3 Answers

up vote 13 down vote accepted

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

share|improve this answer
    
I agree - users with "normal" sight might also find such UI unpleasant and hard to use. –  Janko Jun 22 '10 at 19:05
    
Great answer and some useful links - thanks. :) –  Mal Ross Jun 23 '10 at 7:08
    
It was recently pointed out to me that the "rule" never use green on red because of color-blindness doesn't hold true if it's dark green on light - as Nathan says, look at the contrast. –  Susan R Jun 23 '10 at 21:07
add comment

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?

share|improve this answer
add comment

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 reserch when the company happened to be implementing a new software product. The produc 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. THe 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. nd he also showed me that the high-contrast pointer, when mosing 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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.