Home » What are the negative and positive aspects of dark color scheme?

What are the negative and positive aspects of dark color scheme?


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

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)

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.

Related Solutions

Extract file from docker image?

You can extract files from an image with the following commands: docker create $image # returns container ID docker cp $container_id:$source_path $destination_path docker rm $container_id According to the docker create documentation, this doesn't run the...

Transfer files using scp: permission denied

Your commands are trying to put the new Document to the root (/) of your machine. What you want to do is to transfer them to your home directory (since you have no permissions to write to /). If path to your home is something like /home/erez try the following:...

What’s the purpose of DH Parameters?

What exactly is the purpose of these DH Parameters? These parameters define how OpenSSL performs the Diffie-Hellman (DH) key-exchange. As you stated correctly they include a field prime p and a generator g. The purpose of the availability to customize these...

How to rsync multiple source folders

You can pass multiple source arguments. rsync -a /etc/fstab /home/user/download bkp This creates bkp/fstab and bkp/download, like the separate commands you gave. It may be desirable to preserve the source structure instead. To do this, use / as the source and...

Benefits of Structured Logging vs basic logging

There are two fundamental advances with the structured approach that can't be emulated using text logs without (sometimes extreme levels of) additional effort. Event Types When you write two events with log4net like: log.Debug("Disk quota {0} exceeded by user...

Interfaces vs Types in TypeScript

2019 Update The current answers and the official documentation are outdated. And for those new to TypeScript, the terminology used isn't clear without examples. Below is a list of up-to-date differences. 1. Objects / Functions Both can be used to describe the...

Get total as you type with added column (append) using jQuery

One issue if that the newly-added column id's are missing the id number. If you look at the id, it only shows "price-", when it should probably be "price-2-1", since the original ones are "price-1", and the original ones should probably be something like...

Determining if a file is a hard link or symbolic link?

Jim's answer explains how to test for a symlink: by using test's -L test. But testing for a "hard link" is, well, strictly speaking not what you want. Hard links work because of how Unix handles files: each file is represented by a single inode. Then a single...

How to restrict a Google search to results of a specific language?

You can do that using the advanced search options: http://www.googleguide.com/sharpening_queries.html I also found this, which might work for you: http://www.searchenginejournal.com/how-to-see-google-search-results-for-other-locations/25203/ Just wanted to add...

Random map generation

Among the many other related questions on the site, there's an often linked article for map generation: Polygonal Map Generation for Games you can glean some good strategies from that article, but it can't really be used as is. While not a tutorial, there's an...

How to prettyprint a JSON file?

The json module already implements some basic pretty printing in the dump and dumps functions, with the indent parameter that specifies how many spaces to indent by: >>> import json >>> >>> your_json = '["foo", {"bar":["baz", null,...

How can I avoid the battery charging when connected via USB?

I have an Android 4.0.3 phone without root access so can't test any of this but let me point you to /sys/class/power_supply/battery/ which gives some info/control over charging issues. In particular there is charging_enabled which gives the current state (0 not...

How to transform given dataset in python? [closed]

From your expected result, it appears that each "group" is based on contiguous id values. For this, you can use the compare-cumsum-groupby pattern, and then use agg to get the min and max values. # Sample data. df = pd.DataFrame( {'id': [1, 2, 2, 2, 2, 2, 1, 1,...

Output of the following C++ Program [closed]

It works exactly like this non-recursive translation: int func_0() { return 2; } int func_1() { return 3; } int func_2() { return func_1() + func_0(); } // Returns 3 + 2 = 5 int func_3() { return func_2() + func_1(); } // Returns 5 + 3 = 8 int func_4() { return...

Making a circle out of . (periods) [closed]

Here's the maths and even an example program in C: http://pixwiki.bafsoft.com/mags/5/articles/circle/sincos.htm (link no longer exists). And position: absolute, left and top will let you draw: http://www.w3.org/TR/CSS2/visuren.html#choose-position Any further...

Should I use a code converter (Python to C++)?

Generally it's an awful way to write code, and does not guarantee that it will be any faster. Things which are simple and fast in one language can be complex and slow in another. You're better off either learning how to write fast Python code or learning C++...

tkinter: cannot concatenate ‘str’ and ‘float’ objects

This one line is more than enough to cause the problem: text="რეგულარი >> "+2.23+ 'GEL' 2.23 is a floating-point value; 'GEL' is a string. What does it mean to add an arithmetic value and a string of letters? If you want the string label 'რეგულარი...