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.

  • 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
    Commented Feb 27, 2012 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. Commented Feb 27, 2012 at 11:07

6 Answers 6


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.


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

  • 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
    Commented Feb 27, 2012 at 15:46

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.

  • 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
    Commented Feb 27, 2012 at 15:44

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.


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.


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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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