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.

Just wondering what your opinions are on html forms. Is it better to have a light coloured label and a dark coloured value or the other way round, a dark label with a light value?

What are the implications of this for the usability of the site? Is there certain situations where one is better than the other.

This is a read only form that can be switched in to edit mode and contains a lot of data.

share|improve this question
    
Can you provide an example of this? From the description I am getting a mental image of a form label in grey or in black? Is that what you mean? Grey labels tend to indicate that the item is not available at present, i.e. grey=inactive. –  JonW Feb 27 '12 at 11:01
    
Are you asking about the text of the label and the text of the value? Often (but by no means always) the entry field has a lighter background compared to surroundings - but what colour is the background of your labels? Are your labels outside the field or inside (placeholder labels)? If the label is different to the value at all, it would be the label that is lighter - the value should stand out more than the label. –  Roger Attrill Feb 27 '12 at 11:07

6 Answers 6

According to this article, it's actually better to use white text on dark background for form labels, because the text "jumps out", and therefore easier to scan (which is how users interact with online forms).

But if the form is short (4-5 fields), it probably won't make a big difference, and either way should work. The rule of thumb for any text on a website would be high contrast (WCAG 2.0 recommends 4.5:1 for AA and 7:1 for AAA). You can check the contrast of two colors with this tool.

share|improve this answer
    
I wouldn't call that a very scientific article. That said, even if true,t he question is which is more important to scan...the labels, or the data...and, would a contrasting background actually help or hinder in that situation. –  DA01 Feb 27 '12 at 15:44

No matter how you label the field, make sure the field itself is white with black text. And use a pale color behind the label/instructions (with high contrast as Yosef said) to differentiate the field from the label/instructions.

A few years ago, I was greatly influenced by an article in the UPA's user experience magazine on improving government forms. They went from 100% of forms having mistakes to almost 0%. I have applied the techniques successfully in multiple products with forms since then. That's where this advice originates. Note: you have to be a UPA member to download the article. I've attached a page from the guidelines I developed from this article.

enter image description here

share|improve this answer
1  
Basically, give the fields affordance. It's good advice, though it's easy to improve government forms...since they seem to be so universally horrific to begin with. ;) –  DA01 Feb 27 '12 at 15:46

"This is a read only form"

This is the key. Based on that, it seems fair to assume that people scanning this form are looking primarily at the data, rather than the individual labels.

Taking a second assumption: that the data is relatively self-explanatory and/or something the reader is quite familiar with, I'd say the labels are secondary to the data and that the labels, therefore, can be more subdued.

share|improve this answer

For internal applications with a lot of intermediate-skilled users, I almost always use light labels with dark value, because they quickly become familiar with the screen layouts to the point where they no longer read the labels, and rely solely on the positioning and the type of the data value.

share|improve this answer

What do you think of these two labels. Which one is more visible?

Here are two labels

This illustration tells us it is not about the colors. It is about contrasts. Label 1 is hardly visible, even though it is the lightest. But label 1 emphasises the text, whereas label 2 emphasises the shape of the label.

So one of the questions you should ask yourself is, do you want to emphasise the label or the content of the label? Then, don't fuss about the colors, just study the contrasts.

share|improve this answer
    
Good answer! Just what it really is. –  Samuel M Jul 5 '13 at 5:41

there is also evidence that suggests that light text on a dark background is harder to read as the text bleeds somewhat, white things tend to glow as they reflect where as black things soak up light.

this can make the text more difficult to read, particularly if it is small (as it may have to be for a form label) as the elements of each letter are close enough for the bleeding to blend them somewhat.

http://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/

also to consider is the switch in contrast between light on dark and dark on light, if your labels are the former and fields the latter, then between each the user will have an extra little bit to process, like when your eyes adjust when looking from something very dark to very light

share|improve this answer

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.