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).

Sample 1

Sample 2


3 Answers 3


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.

  • Can you see a scenario where the dark area draws attention first?
    – Jay
    Dec 27, 2012 at 15:34
  • In the examples above, my eyes were drawn immediately to the dark areas, then the secondary light areas. I believe attention is drawn to unique areas of a page rather than brighter areas. E.g. in your answer, the text that one's eyes are drawn towards is the bolded text, which appears darker than the rest of the text. Apr 17, 2013 at 6:40
  • @VincentMcNabb You are correct. But all things being equal, lighter draws more attention than darker.
    – JohnGB
    Apr 17, 2013 at 8:10
  • @JohnGB Yes, that is correct. Apr 18, 2013 at 0:35

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.


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.

  • The 'signal element' will not be the same and that is part of the point. Sometimes it might be data that summarises a category and can be used to navigate, other times it will be a chart, other times it might be a list of tickets or clients.
    – Jay
    Dec 21, 2012 at 10:01
  • @Jay that is problematic, to say the least. The color (if we may call black a color here) helps the user memorize UI element function and contents. Mixing it up might create a challenging experience, but that has not that much too do with your topic's question whether or not the black/white choice might affect the user experience positively, as it is rather a content or flow decision.
    – kontur
    Dec 21, 2012 at 11:13
  • On the contrary, I think that is certainly one of the effects that needs to be considered
    – Jay
    Dec 21, 2012 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.