Should dropdown background color be same as other (text) inputs on a form?

Question

Today I noticed one really annoying thing in a new layout from a designer.

In the new design, all dropdowns had much darker background than other text inputs.

For one, the contrast was quite poor, but what annoyed me the most, was that the difference of the background colour between dropdowns and text inputs in the same form made the dropdowns disappear and did not look like inputs at all.

Edit: The dropdowns have equal importance with all other inputs on the form.

So should all the form inputs (text inputs and dropdowns) have same (or atleast similar) background colour?

My brain says yes, but I don't want to go shouting to the designer before I'm sure it's not only me.

Answer 1

Well you already highlighted one issue that the contrast was poor and hence readability and accessibility is a concern.To quote the WCAG guidelines

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Now coming to the background color, there are designs where the dropdown color differs from the rest of the form color but the difference is not significant. I have noticed these in generally cases where it is important for the dropdown value to be populated for the processing to take place as shown below

That said there is no design reason why a dropdown color should have a different background color unless the designer for some reason wants it to look different from the rest of the form. Here are some examples of forms whose background colors are the same as the form itself.

If its not mandatory to draw attention to the dropdowns or they are not required you could use some of the above examples to show how they can be part of the design.

Answer 2

You could argue for consistency.

ux-consistency In general software should be internally consistent with itself, and externally consistent with similar interfaces to leverage the user's existing knowledge. [Source: Nielsen]

So if you can point to many interfaces with consistent bg colours in both text input and dropdowns, then you can argue that other users will expect this as well.

Of course, the best way to be sure that this is really a problem is by running usability testing sessions with your target users and watching how they respond. Do they skip over the dropdowns in favour of filling in text on their first pass over the form?

Answer 3

The form elements should indicate to the user what kind of form element it is, and therefore what kind of interaction they should expect.

So there is certainly an argument for them to not be 'exactly the same'. As for whether they should be darker or lighter, or have shadows and highlights, or different colors, etc these are all detailed visual design decisions that would be based on the larger design solution for this particular project.