# What are best practices in form element color vs background color? Should they be different?

I'm designing forms for healthcare applications. In our team there are some different opinions which of the designs below is the best. It's all about colors.

There are rough 3 options

1. Form elements are white. Background has a color.
2. Form elements have a color. Background is white.
3. Form elements and background have the same color (in this case white)

Which option is the best and why?

In my opinion white on gray is most easy on the eyes and provides good contrast between text and background. But I'm missing some decent arguments for choosing one or the other.

1. Which option is the best according to you? Why?
2. Is someone familiar with some reliable research on this subject?

• Although your question is fairly open to discussion, nice job putting the effort into showing examples.
– JohnGB
Commented Apr 22, 2023 at 10:53

## Figure/Ground Gestalt Law

Wikipedia

Well, this question is not about the colors in use. If so, it would be: what's the best color for our forms: red, green, orange, or blue? Which would make it off-topic and probably closed.

I rephrase the question to better understand the problem:

In forms design, something that in principle must be sufficiently practical and immediate in terms of perception, what is the best method to follow regarding tones so as not to negatively influence the background/figure effect?

Well, the best thing is to understand this Gestalt law well and then try to apply the knowledge. Here are some examples:

On the left there's clearly a black triangle on a white square and on the right, is it a white triangle on a black square or a black square with a triangular hole? Or, what's the background and what's the shape?

Based on this, the designer can incline the trend to the side they deem convenient for their design. For example, figures without too much complexity (or edges) such as a circle are perceived more immediately: on the left a black ball on a white background, and on the right a black square with a hole.

The greater the complexity, the greater the preponderance of one element over another: two t-rexes, one black and one white on a background. Greater perception in the figure (shape) with respect to the background.

Two stars, one white and one black with a triangle in the center. Better perception of the ground as a figure.

There are three cases in the question:

Returning to this: which of the three options makes it possible to clearly separate ground and figure in perception, the third leaves little doubt, it's the one offering the least contrast, and therefore the most complicated to be easily interpreted. But, do we need to see this content as a figure being a form field?

Assuming this is a form, what are the fields to fill in? I think the option of the black square with the windows allowing us to see the background paper is the right one. I understand my definition of paper is somewhat tendentious, but it's the best way to describe it. In other words, a black square with holes to fill.

These examples are highly exaggerated and only seek to make clear what the concept of figure/ground is. In the case of the question, a third element enters, secondary but relevant in perception, and this is where color comes:

I would recommend doing the simple figure exercise using each tonal option to choose the right one. I see very clearly which one is. Perceptually at least, a separate issue is design aesthetics.

### Edit after the comment

Well, I'm not a psychologist or an expert in perception theory. The question may be open to discussion, but it's clear that we all have a tendency to see 3d where there isn't. A closed area encourages us to interpret it as a real object and from there the possibility of filling it with something, and it's not about white, but about empty spaces, as in the case of children's coloring tales. A simple exercise to understand the case of the question would be to start from basic elements and start removing parts until understanding when it stops being a form, or when it cuts the feeling of fill fields. In this way, you may better understand what the final decision is and why.

As pointed out in the answer, the designer can play with it to the point of prompting the user to have the need to fill in the blanks. As an example, Ikea leaves 50% of the shelves empty in their products, either to show how to use them or to encourage the user to think about what they would put in those "holes", we all do that.

I also add one more recommendation, try the empty form and the form with fields full of information. The final result is a filled form, so the design decision will also be affected.

• Nice answer to a question open to discussion.
– JohnGB
Commented Apr 22, 2023 at 10:52
• First of all, thank you for taking the time to rephrase my initial question. This is absolutely hits the nail on the head. Commented Apr 23, 2023 at 15:27
• I was convinced that the background should be white when you explained the Gestalt law with the triangles, because I thought the form should be on focus (figure). Your question 'should we need to see this content as a figure being a form field?' is very interesting. You are saying that in your example the black background with the white windows most clearly shows a form. I do agree! However, I'm trying to understand why a form should be displayed as a 'hole'. Is this because you can put something in? Or because inputs fields are generally white? Can you explain this a little more please? Commented Apr 23, 2023 at 15:51
• "I'm trying to understand why a form should be displayed as a 'hole'." I've always thought of form fields this way, probably because both holes and inputs are waiting to be "filled in". Commented Nov 7, 2023 at 14:31