I am looking to redesign a website over which I have little control outside the colour scheme. I want to find usability evidence to back up my change decisions, or else use that evidence to adjust my proposal.

The current website has a dark blue background behind the text area (#1b3676 background with #D5D4D4 text). Because of the overwhelming blueness throughout that design, I want to change to a design which instead has a more bluey-charcoal colour behind the text area (#2d3c53 background with the same #D5D4D4 text). There are to be other colour changes around the place, such as the use of an accent colour which looks better on the darker background, but the legibility of these two colour schemes is what's in question here.

Snippet comparing the old to the proposed new:

Colour comparison old (top) and new (bottom)

I've been trying to search for articles on Google which compare the legibility of light text on differently coloured dark backgrounds, but whatever I try, "dark background" is always interpreted as meaning "black background everywhere" rather than "background colour that is darker than the text colour in the reading pane". Because of this, I can't find anything to confirm or rebut my suspicion that it's easier to read the text on the less coloured background than the more coloured one, despite the fact that there is slightly higher contrast with the bluer blue.

Are there any good studies or articles comparing usability of different coloured dark backgrounds?

Edit: Links to the example pages (colours relevant only): Existing / Proposed

  • While making daek theme before I researched on legibility of text. I made kind of conclusion to never use paragraph I mean long texts in dark backgrounds. Cause we human recognise a letter shape by it's edges. So in dark bg leterr glows and harder to get it's edges. Regarding your question I think whatever bg color that doesn't glow much is ok. In your case less saturated colors are good to go – Jivan Mar 26 '18 at 1:26
  • The problem is you're making a very small change to the design. You're using the same colors with a saturation change. Not making a real change like switching to material design or something. So do some user testing. I think users can see the difference, Get two ipads or an ipad pro, put your design on one and current on another, go to a comic store or someplace similar that would have some relevant people and ask them which is better. Make sure you're in a dark place ; > – moot Mar 26 '18 at 15:12
  • @moot This is a small online community who is using this website. It's hosted on a platform, Wikia, which doesn't allow dramatic interface changes like switching to material design (wouldn't want to either). Basically, formal user testing other than just asking community members' opinions is well beyond the scope of the project. Anyway, I'm just asking about saturation vs readability here. – Imamadmad Mar 26 '18 at 23:47
  • Please read my comment again? I didn't say switch to material design. I didn't say do formal testing, Taking two ipads to the comic store is the opposite of formal. You're talking about a legibility issue, not readability. You're trying to argue the eye strain of the brighter blue outweighs the loss of contrast or something similar. You should test instead of trying to find support for your solution and then testing. – moot Mar 27 '18 at 7:23

Whilst I don't have links to any studies regarding this, one great argument for color choice is accessibility.

Accessibility takes into consideration color blindness and legibility of your color and text color.

One way to get hard evidence, one way or the other, is to verify the contrast ratio by using a color contrast checker tool. The higher the contrast ratio, the easier to read your text will be.

WebAIM provides the tool that proven and used by companies like Google.

Here is the link to WebAIM.

  • Both the colours in consideration have great contrast (AAA worthy). However, are there any other readability/usability/accessibility concerns with dark background colours, especially in regards to colour saturation of that background? – Imamadmad Mar 26 '18 at 10:09
  • I'm uncertain about that. The problem with choosing a colour is that there is too much room for opinions. – RobbyReindeer Mar 26 '18 at 10:39

It will not be easy to find a article that helps your scenario. Because your context is very specific to your application environment. I think you should create a outline for yourself, according to the application scenario. My personal opinion of the colors you have used is, it's something related to the idea you need to convey. Weather it should be cheerful, trustworthy or dull etc. In addition to that, the longer texts are not good on the darker backgrounds.

  • Why are "longer texts not good on the darker backgrounds" ? Any reasoning to back that up? – RobbyReindeer Mar 26 '18 at 10:57
  • @RobE "Longer texts not always good on the darker backgrounds" would be the right phrase. Human eye always detects the text hierarchy. Mostly the notice titles which are relatively larger in size. If you can do A/B testing with at least 20 people, you will see the results. I am afraid I cannot give you the reason. Should be something psychological. – WenukaGTX Mar 27 '18 at 3:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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