146

I am using Light-on-dark color scheme (dark background with light text) in my application.

My question is, what are the negative and positive aspects of this color scheme and why this color scheme is not widely used?

5
  • 17
    Well, when you're doing paper prototyping, all-black backgrounds take a lot more ink... Jun 16, 2011 at 14:55
  • 7
    Dark color uses less smartphone battery ( : Nov 24, 2011 at 1:32
  • 9
    @MikeNereson Granted, this is for LCD monitors, I'd have to look up for other display types... but a powered black pixel and a powered white pixel at the same backlight level don't really differ all that much, consumption-wise: techlogg.com/2010/05/…
    – Gray
    Jun 13, 2013 at 18:06
  • Software theme is a fashion business. A few years ago dark theme were really hype, nowadays light theme do a come back.
    – ColdCat
    Jun 22, 2016 at 20:25
  • 1
    @Gray *cough* oled *cough*
    – EpicKip
    Nov 20, 2017 at 9:11

14 Answers 14

86

Darker color scheme are often used effectively in software that focuses heavily on visual content. For example Adobe Lightroom, Adobe After Effects, Microsoft Expression Blend, and Kaxaml are interfaces that have a dark color theme. This allows the interface to fade into the background and let the content come alive

Why is it not widely used? I guess it depends on your crowd. For these applications, it tends to work out great but many people don't like dark interfaces. At my company I created an interface for a very complicated piece of software using a dark UI. It helped to simplify everything and bring attention to the necessary elements at specific times. The problem was, a lot of people complained. "It's too dark," "it doesn't look good on my laptop when I am using in the bright sun" etc. Some people just hate dark interfaces.

Bottom line: if your application is very content driven, esp with visual content, consider a dark interface but be prepared for some opposition.

Alternative solution: provide 2 themes, one light and one dark. This is done in Microsoft's Expression Blend (although the light theme looks quite awful, IMO)

Also, it is important to note that it is often a bit more difficult to get a dark interface that works well. A little more care must be given to legibility of text on the dark background (i.e. making it bright enough to be legible but not so bright that it is distracting to read).

10
  • 3
    +1 I've always loved the darker interface in Lightroom. Not only that, but in general if a light-on-dark interface is designed well, it can reduce glare over long periods of use. Pure white text on a dark background can make you squint, but light gray text is a lot easier on the eyes. Jun 15, 2011 at 23:22
  • 12
    Why are all the major video websites (Youtube, Vimeo, Hulu) using light color schemes? Video is "visual content", so according to your theory, video sites should use a dark color scheme to draw attention to the videos. On a related note, why do all the porn video sites use dark color schemes?
    – JoJo
    Jun 16, 2011 at 0:00
  • 7
    "Some people just hate dark interfaces." That's why I always try to provide an alternative theme. A dark (especially black) interface is often derided as "hacker black".
    – Bill
    Apr 26, 2012 at 15:26
  • 3
    I hate dark interfaces.
    – cnd
    Jul 10, 2013 at 8:28
  • 4
    I love dark themes - I have sensitive eyes so I use userstyles for sites and use dark theme for my operating systems too. Apr 3, 2016 at 6:10
67

Dark on light vs light on dark themes can have multiple effects, such as:

  • Bringing attention to an application vs bringing attention to the application's contents

    • People focus on brighter areas — darker background brings attention to the content, while lighter background bring attention to the window itself vs the desktop.
      Imagine if the box around non-16:9 movies was white instead of black, it would distract your attention from the movie.
  • Emphasizing details in text vs readability in text

    • With bright on dark text, the text seems to expand (since the human perception makes brighter objects glow). This leads to the text appearing bolder. If the text is already bold, this may make the text hard to read (depending on font), as the spacing between the lines will reduce. If the text is not bold (or if the font is clean and narrow to start with), it will make the text stand out.

    • Difference between different shades of grey are more noticeable on dark backgrounds than on light backgrounds. (See formula here or here.)

  • Making text more readable in bright environments vs dark environments

    • In dark environments, light background can strain the eyes.

    • In very bright environments, light on dark will help you see the text but make it hard to differ between shades (white text vs grey text). Dark on light will help you see the difference between shades, but if the environment is too bright, you will only see the darker text (the grey text will seem white).

  • Making screens easier to look at for long period of times or in different environments.

    • TV screens are often in less illuminated rooms than computer screens in offices, resulting in dark themes being easier to rest your eyes on than light themes. (The smaller difference in intensity between the walls and the screen makes the irises work less.)
  • Making text more readable for people with various eye-sight problems that affect contrast perception

    • Some people can only read high contrast text, 50% grey on black is higher contrast than 50% grey on white.

    • Some people can't see well in environments that are too dark and some can't see well in environments that are too bright — each will require a different (opposing) theme (I'll let you guess which requires which).

  • Matching people's point of view

    • People that are used to light backgrounds and don't like changes won't like bright on dark.

    • Creative people may prefer dark backgrounds, as it both introduces a challenge to common conventions and emphasizes detail and colors.


It is important to note that a lot of research on which is better was conducted incorrectly (length of test per theme, controlling for different environment illumination levels) and is now out of date (based on CRT screens and not LCD screens).


Possible reasons why dark themes are less common:

  • I think that modern window-based OSes defaulted at first to black on white to

    • differentiate them from the old console-based OSes

    • make them look more like paper-based products (e.g. books).

  • Light themes are the current standard; people are used to them

  • Light themes require less work from developers (since the OS/browser default theme is light, developers don't need to override all the colors)

7
  • 4
    This is an excellent answer! Jun 13, 2013 at 15:02
  • 4
    A bit partial i think... linking it to dubious unfunded adjectives as dark are for creatives and bright for who don't like changes... Readability is way better in bright scheme with people with astigmatism or myopia. Believe me, I have both and It's very annoying to read or focus for a long time or harder than brighter schemes at least. I think in the end, it's just a such personal taste / adaption. Apr 16, 2015 at 3:53
  • 2
    @AndreFigueiredo 1. I know people with myopia that find it hard to read bright themes, so apparently your case isn't representative of the whole. 2. Regarding the creative vs. constant, that is an observation I have made over many years, Apr 16, 2015 at 8:45
  • 1
    @AndreFigueiredo I didn't say anything about the whole, I said there are cases of each: "each will require a different (opposing) theme". Apr 16, 2015 at 18:50
  • 2
    @AndreFigueiredo I have extreme myopia (-11.5) and some astigmatism, and I'm better able to read white text on a black screen, as long as it isn't too bold or too tightly spaced. Wearing glasses, black on white is equally sharp (though fatiguing); without glasses, I can read nicely spaced white-on-black from 18" away, vs. 10" for black-on-white. Light tends to have a spreading effect, so if there's too much light it all blurs together, so going bolder is much more helpful/necessary with black-on-white. This is especially true on a screen or monitor (as opposed to paper or e-ink screens).
    – Jon Coombs
    Feb 17, 2016 at 19:12
19

why this color scheme is not widely used?

Good question without an obvious answer. You could claim all sorts of trends are involved, but I think it would be a brave move to accept any one reason for why we tend to go with dark on light. I think your best bet is to develop the scheme that best suits your site's purpose and its users.

For a quick overview of the conflicting studies/opinions:

This study found dark on light to be the best - sort of. They feel that an aesthetic preference may be in play influencing the outcomes. They also found a light on dark scheme to perform almost as well - per Nielsen's quote (see page 19).

This study found that dark text on light backgrounds was more readable - most designers will go for a design that is better for their users.

And for just a general look at the issue, this article describes some of the issues in choosing dark on light versus light on dark.

Note that in the case of this last article, they have some examples that I don't believe follow generally accepted guidelines for light-on-dark with regards to font settings (spacing, etc). IMO the examples are a little off.

4
  • 2
    +1 for the study on readability of dark text on light backgrounds. I've heard about similar studies before, and I know it to be true for myself. Black text on white is just plain easier on my eyes. For that reason I will always prefer black on white for websites heavy on textual content. Jun 15, 2011 at 13:54
  • 2
    You know, I was just reading through it and that study only focused on readability. They made no mention of the effects of eye strain. I wonder how the results would have differed if they had. Jun 15, 2011 at 14:05
  • 1
    Agreed. Reports seem to prefer focusing on readability, comprehension, etc. I have many articles describing effect on these issues, but I don't seem to have anything on eye strain.
    – gef05
    Jun 15, 2011 at 14:40
  • 1
    I went over that survey, the text regions are too small for the eyes to properly adjust to the differences. Also, the survey is very old (mentions Netscape Navigator) - pre-LCD screens and CRT vs LCD does play a part in the affects of the colors. Jul 10, 2012 at 10:18
13

The main reason a light-on-dark user interface can break down is when the text becomes glaringly bright compared to the dark background. This is one fundamental reason white text on a black background can be hard to read for long periods of time.

Applications like Adobe Lightroom use a light gray on dark gray colour scheme and this seems to greatly reduce glare with the text. The great thing about light on dark interfaces, however, is that they reduce overall glare when using the software for a long period of time.

It comes as no surprise that software like Adobe Premiere Pro, Lightroom, AVID Media Composer and in the upcoming Final Cut Pro X use a dark interface as they are typically used for extensive periods of time.

The difference between long exposure to a bright screen than to a dark screen with some bright areas is quite significant. I can work in Premiere Pro and Lightroom for a long time and feel much better than using Microsoft Outlook and Visual Studio at work all day. I find myself squinting at the end of the day when at work.

6
  • 1
    What about energy using? I think it's much lesser
    – Navid
    Jun 15, 2011 at 23:55
  • 5
    @Navid Rahmani That was the case with the older CRT monitors, but with LCD monitors, dark colors use more energy - skeptics.stackexchange.com/questions/4373/…
    – KJ-SRS
    Jun 16, 2011 at 19:26
  • @KJ-SRS According to chart in the link you posted, dark colors use a bit less energy (less of a difference then with CRTs though). The quote you were probably referring to applies to a specific type of LCD (e.g. old watches). Nov 25, 2012 at 16:12
  • This should be the accepted answer. Try reading white text on a dark background for even a few minutes and then look away from the screen ... you will probably see a burn-in effect on your eyeballs where you can still see the outline of the white text you were reading ... leading to eye-strain. Sep 26, 2014 at 14:28
  • Good answer Nick. If you want your Visual Studio fixed, I have a great theme. Can't help you with Outlook though. Feb 17, 2016 at 20:05
7

One advantage of light text on a dark background is that different colours in the text are easier to distinguish.

That might not be important to most readers, but one type of user who makes heavy use of different colours of text is the software developer.

I suspect there are two reasons why it is easier to differentiate between colours on a dark background:

  1. Text on a dark background can be made brighter, while text on a light background is usually given a darker intensity, for reasons of contrast. As we know, it is more difficult to distinguish colours as their intensity decreases.

  2. The glare of the light background is not flooding the senses.


Of course this contrast between colours can be used for more than just text.

(I simply inverted one of these images to create the other.)

1
  • 1
    I found myself having difficulty with insufficient contrast when trying to adopt a dark color scheme on my desktop and, in particular, in the IDE I do development in. Finally I understood that glare from the white interface you're citing is not the problem compared to the glare due to reflections of objects surrounding the monitor from the screen. And the latter is much more visible with the dark scheme, because the monitor is mostly black, and thin (1-2 pixels wide) white letters are mixed with the reflections.
    – Ruslan
    Nov 14, 2019 at 10:29
6

I wouldn't discount the possibility that both Windows and MacOS default to a "light" scheme and people tend to want their applications to all be consistent. I use a dark theme on Windows and too often run into applications that can't handle it (they hard-wire colors or, worse, hard-wire some of them), so if this were just a casual preference and not a real visual need I would probably give up and go back to the scheme that "everybody" wants me to use.

If you can make your application honor the system colors (whatever they are), that would be best. If you need to choose specific colors, as is often the case, then you can either offer themes or provide an easy configuration interface. Users are generally willing to do some one-time configuration of applications they'll use often.

1
  • 1
    I think that modern window-based OS's defaulted at first to black on white to defer them from the old console-based OS's and to make them look more like paper-based products (e.g. books). Now it is simply the standard and requires less work from developers (since the OS default theme is light, the developers don't need to override all the colors). Jul 10, 2012 at 10:14
3

According to the Web Style Guide, black on white is best:

http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html

Black text on a white background has the highest level of contrast.

4
  • Black on white and white on black have the same (maximum) level of contrast. In fact, better contrast levels are dark grey on white and light grey on black, since the maximum contrast can be too much. See this W3C link for how to calculate contrast levels: w3.org/TR/UNDERSTANDING-WCAG20/… Jul 10, 2012 at 10:08
  • @DannyVarod I agree about needing to find the optimal amount of contrast. While it's true that both directions have the "same" level of contrast, text really is a different ballgame than big blocky shapes side by side (as I'm sure you know). As I mentioned in a different comment, light tends to have a spreading effect, so if there's too much light around a thin dark shape, it can obscure it. So, going bolder is much more helpful/necessary with dark-on-light than with light-on-dark. This is especially true on a screen or monitor (as opposed to paper or e-ink screens).
    – Jon Coombs
    Feb 17, 2016 at 19:25
  • @JonCoombs it is untrue regarding then having the same contrast, check W3Cs formula - white on black has higher contrast than black on white. Feb 17, 2016 at 20:00
  • @DannyVarod Yes, that's my point exactly. I figured you probably didn't really mean that they're "the same" in practice, but I did want to clarify this: that the bright part seems to spread out, so white text on black gives a higher visible contrast, whereas black text on white will "lose ground" to the brightness surrounding it. This effect can sometimes actually make it hard to read white text that's too bold--especially with the contrast ratio up all the way--which goes along with what you mentioned about having too much contrast.
    – Jon Coombs
    Feb 20, 2016 at 3:34
2

In my opinion, dark background apps with a light foreground look sexier and more edgy than their counterpart light background apps which are possibly more traditional or conservative.

That said, in my opinion, due to the volume of graphics, controls and icons around which are normally designed to be used on a light background, dark background apps may be slightly more time consuming to build (depending on your environment).

2
  1. On glossy displays reflections are more visible on dark backgrounds
  2. When I was using a display set up to have a noticeable PWM blinking, dark backgrounds were much easier for my eyes in the long run

I guess these are few common reasons for and against dark backgrounds. Anyway in the second case it is very beneficial to set up your display to decrease the PWM blinking.

1

I think, both (dark and light) are good. But this is very individually and both variants with switcher good for all. Dark gamma is more safe for eyes at night, but i can't see anything at day with dark gamma. Light gamma good at day, but it hurt my eyes at night. Dark global gui and web css at night. Light for day. Simple. And they are should have fast switcher :)

Sorry for my Eng

1

It depends on the environment. Brighter themes are better in bright environments and dark themes are better in dark environments.

Therefore e.g. navigation systems for cars switch the theme at night or in tunnels to a dark theme.

It depends on the user. Some people can better see in dark conditions and some users vice versa. I think this has to do with the circadian rhythm but I don't want to overcomplicate things here.

0

According to color theory! Color Theory

White,black and Gray Color are consider to be neutral

But personaly most of the users avoid black and other dark screens screens, in daily routine Wearing black will allow you to keep a low-profile in social settings if that is your intention. Don't wear black if you want to stand out amidst a crowd. Most folks don't even bother to wear black at funerals anymore, it's just too sad to wear dreary and dark colors.

the last part is Taken from ask.com

3
  • In some cultures white is the color for mourning. Jul 10, 2012 at 13:14
  • 1
    If I am not mistaken, the color for mourning in China and in India (which are a significant percent of the world) is white and In the US and in Europe it is black. Jul 10, 2012 at 13:53
  • @DannyVarod - In India and China, white represents peace, light & calm. Its not so much color of mourning, but color of peace & calm - for the spirit that has left the body, with hope it is free. In India its called as "Deh-ant" (End of Body).
    – Alex S
    Sep 9, 2021 at 19:58
0

I find a dark on light works well, but not a white background. I find a muted light color or grey works better than pure white when using backlit LCD or LED monitors. I find black on #DBD2BF, #C5D3D6, #D6C7CB, #BDC7BD, or #C2C2C2 work as good examples.

2
  • 1
    Welcome to the site, @Scott. At the moment, your post doesn't appear to be answering the original poster's question of when to use light text on a dark background. Do you have any evidence of when (in what context or for what users) the dark-on-light or light-on-dark works better (for usability, accessibility, etc)? Jun 22, 2016 at 19:55
  • 1
    Please define what criteria you are using when you say it "works well" or "works better than pure white". Works better how? What are you measuring against?
    – JonW
    Jun 22, 2016 at 20:20
-1

I would say that this is mostly dependent on the user's perception. Many users are comfortable in dark themes whereas may are comfortable on light themes.

The dark on light themes are more widely used now a days as the user who is using the system will be at ease while using it. The light color does not stress the user's eyes much. The light color should also be of mild shade to improve the UI satisfaction of user.

The dark on light will help the user to highlight the important content and it is also easy to use it.

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