Different background color for form elements

Question

Should I have background color for a form input? Or this is really a subjective matter?

For me personally I thought having background color for a form, kind of makes it more organized and clean.

What are your views on this?

Answer 1

It really depends on the layout of the rest of the site. In my opinion it's good to have the form offset somehow, even if just with top/bottom borders - often you can make the whole thing a small box within the page. For something like a registration system, though, you might as well make the entire page the form - the less distractory extra-content the better.

Answer 2

It's quite subjective.

The importance with colors is that a) they should NOT be disruptive and distracting, and b) you should be very, very consistent with their use.

Same rule applies for all other visual elements, e.g., graphics, fonts, what not.

Answer 3

To complete the other answers, you should also take into account accessibility issue, especially if the color you choose for the form input somehow risks to blend in with other colors you might use, such as:

• color from the input fields
• characters colors (if the value is incorrect and you put the character in red, for instance)
• colors of icons or warnings you might display when the data is incorrect...
• and so on

A border (meaning 'a graphical way of delimiting your input form) might also be a good way to isolate that form, without having relying solely on color.

In short, you might consider always using a combination of both: color and graphical ways to emphasize a GUI element.

Answer 4

Two techniques that I don't see often enough are highlighting input fields with a background color when they are focused while filling out a form and when a validation error occurs after a form submission. You can use these two techniques in conjunction with a subtle style for normal inputs to match the rest of your website design.