Should you go with white fields on an off white background, or off white fields on a white background fields on your form?
Off white fields aren’t a terrible option, but there are some visual flaws to them.
They make placeholder text harder to read. Light gray text on an off white background has low color contrast. Placeholder text is light gray because it’s intended to provide input hints. Darkening the light gray may cause users to mistake the placeholder text for actual input.
They give the appearance of a disabled state. Disabled fields are typically transparent or grayed out. However, you could always turn the fields white on focus/selection to clarify an active state.
There aren’t any visual flaws to white fields, but you do have to build a background frame around them which could complicate the layout.
How can designers overcome these flaws? Which style do you prefer and why?
I've always liked the clarity and focus of a white-filled form fields on a (slightly) off-white background. Guarantees a background with maximum contrast, avoids a 'inactive-state' appearance, and makes the form fields look like they're in the foreground.
White fields, especially if you are using a light button style in your design system. Fields need to be unique from buttons, and if you are using light gray as as secondary button, it will slow people down if fields are also filled with light gray...It will take them some cognitive time to differentiate them across screens. Additionally, white fields have a better ADA contrast for readability.
The grey inputs can always potentially look like they are disabled whereas in the white inputs it's clear from the different coloured text what inputs are interactive. I like the trend of the grey inputs, however, I think white will win in terms of usability and understanding of what state the input is in to complete their task at hand.
The grey box around the white fields is a bit superfluous. You could just have the borders be a bit more pronounced and delimit them from the white background just fine. Boxes within boxes is layout design no-no 101.
1. The "empty" state should not show the field label + text to appear in the input area. The label will be sufficient.
2. All fields have the same design, for different states. We could easily imagine helping the user with a slightly darker border-color for the filled fields ( just for exemple).
3. The "select one" text does not seem necessary to me, there is already a label + a chevron...
4. I'm not sure if the problem is "gray fields or bench fields" but rather the design of the fields in general :)
I like white fields for the same reasons as others have mentioned here (confused as being disabled, tougher to placeholder text, etc.). In addition, in real-life things that are higher in the z-index are lighter and backgrounds are darker. Also, usually much more background space which means more glare. I know it is a new trend, but not a fan of it.
Ideally the labels would be outside the field - but thats a different discussion.
Based on the comments, it looks like I'm in the minority.
I prefer the off white fields.
The 2 arguments above aren't strong enough to dissuade me.
Point 1, many would argue placeholder text shouldn't be in the field to begin with. You lose it when you engage with the field. Outside under the label is preferable.
Point 2, there is little risk that that users will mistake the fields are disabled if all the fields are off white.
> but you do have to build a background frame around them which could complicate the layout
I rarely do that and instead put the white-filled fields on a white background. Is this bad practice? If so is there any article or study that you could point me to?
White Fields vs Off White Fields
I've always liked the clarity and focus of a white-filled form fields on a (slightly) off-white background. Guarantees a background with maximum contrast, avoids a 'inactive-state' appearance, and makes the form fields look like they're in the foreground.
White fields, especially if you are using a light button style in your design system. Fields need to be unique from buttons, and if you are using light gray as as secondary button, it will slow people down if fields are also filled with light gray...It will take them some cognitive time to differentiate them across screens. Additionally, white fields have a better ADA contrast for readability.
The grey inputs can always potentially look like they are disabled whereas in the white inputs it's clear from the different coloured text what inputs are interactive. I like the trend of the grey inputs, however, I think white will win in terms of usability and understanding of what state the input is in to complete their task at hand.
The grey box around the white fields is a bit superfluous. You could just have the borders be a bit more pronounced and delimit them from the white background just fine. Boxes within boxes is layout design no-no 101.
White fields. They are easier to work with and easier to read at a glance.
Hello !
For my part, I see several problems:
1. The "empty" state should not show the field label + text to appear in the input area. The label will be sufficient.
2. All fields have the same design, for different states. We could easily imagine helping the user with a slightly darker border-color for the filled fields ( just for exemple).
3. The "select one" text does not seem necessary to me, there is already a label + a chevron...
4. I'm not sure if the problem is "gray fields or bench fields" but rather the design of the fields in general :)
I like white fields for the same reasons as others have mentioned here (confused as being disabled, tougher to placeholder text, etc.). In addition, in real-life things that are higher in the z-index are lighter and backgrounds are darker. Also, usually much more background space which means more glare. I know it is a new trend, but not a fan of it.
Page background should never be bleach white. I’m always going a few tones off just create a slight contrast with the fields and other components.
Ideally the labels would be outside the field - but thats a different discussion.
Based on the comments, it looks like I'm in the minority.
I prefer the off white fields.
The 2 arguments above aren't strong enough to dissuade me.
Point 1, many would argue placeholder text shouldn't be in the field to begin with. You lose it when you engage with the field. Outside under the label is preferable.
Point 2, there is little risk that that users will mistake the fields are disabled if all the fields are off white.
> but you do have to build a background frame around them which could complicate the layout
I rarely do that and instead put the white-filled fields on a white background. Is this bad practice? If so is there any article or study that you could point me to?
Thanks :)