Can placing dark and light elements or blocks next to each other in a UI lead to problems in visual perception?

Question

A designer on my project has proposed something that uses both light and dark backgrounds within the same context (basic mockups below).

A short background for the app:

• It is a platform on which you can place apps
• It will be very dense and data heavy
• Apps will respond to changes in other apps they are grouped with
• It is designed to be a flexible platform where apps can be added to a group/view.
• There is a wide variety of tasks performed by the apps including detailed forms, tables, charts, profiles etc.

The rationale for the light and dark is that:

• Dark areas are 'primary'. They are the prominent bits of information and will often control the other apps.
• Dark areas are preferred for charts and diagrams. Light areas for forms and text.

Though I think this has merit, my concerns are:

• Using both light and dark elements risks visual coherence
• The contrast between the segments / apps will create visual perception issues
• Users will be confused and the rationale will be lost on them

Main question: Could using light and dark backgrounds within the same application lead to visual perception issues? Claims backed by research preferred.

Below are some hastily created mockups (I can't share actual details as its top secret).

Answer 1

Using dark and light themes together can work, but it depends on what you are trying to achieve. From what you have described, I think the design choice for your situation would hurt the overall UX.

When dark and light themes are used together, it is to de-emphasise the dark areas and emphasise light areas. Light always draws our attention faster than dark, and so the attention of your customers is going to be drawn away from where you want it. It would be an improvement if you used the light areas for the main areas and dark for the secondary.

Overall though, there would have to be a very good reason to mix the two as it brings more problems that is solves when you're talking about mixing content.

Answer 2

Using darker or highly saturated blocks of colour on a page can define, or alter, the visual hierarchy of where user’s eyes will be drawn to look.

My concern with using multiple highly contrasted backgrounds together is that by using a dark background, contrasting with white, the most important information could possibly be overlooked in order to view whatever the eyes get drawn towards (the content that sits in the darker areas).

Also, depending on the weight and colour of the elements in other areas of the layout, this could also increase the user’s cognitive load if there is a struggle for hierarchy, or not a logical information/design flow vertically down the page.

If the proposed design goes ahead, it would be wise to conduct some common sense UCD practices such as colour contrast analysis and usability testing of a prototype, to see if users actually find the application easy to use.

Answer 3

For an usability point of view, I think this extreme contrast will be counter productive.

More concerning though seems to me that in your mock-ups the black parts seem to work either as big features (1st mock-up) or additional information / sidebar (2nd mock-up). If you have a signal element of any type it should remain the same in functionalty accross the whole application.

Furthermore, stark black and white contrast is very challenging to read, even if the contrast of the text on the respective background is soft, the hard distinctions between different elements will distract the eye. You could consider using a highligh color instead of going all stark black and white.