Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

There are several questions on UX (e.g. here, here, here) already about contrast. However, all of those are about text, and the contrast between text and background, most off them referencing this W3 bit at some point. My question is slightly different, I want to know:

  • Are there any standards for contrast between two solid color fills?
  • How to measure this contrast (and possibly: color difference) between two solid color fills?

More specifically, I'm after the scenario where two adjecent blocks (with text) on a webpage have different solid background colors. For example:

#EEEE33            > #FFFFCC           > #FFFFDD

example of background-color differences

Even more specifically, I'm looking for answers to help get an educated answer to this SO meta question about the contrast between background colors of tagged-interesting questions on the SE network. For example, the background color of favorited questions on UX vs SE:

UX.StackExchange                         StackOverflow.com

UX vs SO contrast of favorites

Edit: In the picture above I'm interested in the background difference between a favorited and a non-favorited question (which for UX is quite a small difference, but for SO it's quite okay).

So, to summarize: what methods (standards? measuring techniques?) are available for difference in solid-fill background colors of adjecent blocks on a website?

share|improve this question

2 Answers 2

Take a look at this from W3

Than I use always this simple tool to find quickly a good combination between foreground and background color. Hope it help.

share|improve this answer
    
+1 for snook! It's a handy tool. –  msanford Apr 11 '12 at 19:42
    
The tool is the same one I used for the mentioned meta SO question. The link to W3 however is about contrast between foreground and background, which is not what I'm looking for in this question: I'm looking for contrast between two background colors. –  Jeroen Apr 12 '12 at 14:30
    
This doesn't answer the question and really only offers a solution already given in the question (and which doesn't work). –  Koen Lageveen Sep 20 '13 at 12:23

There are and can be no standards for solid color fills. Because it depends.

As a rule, you can use the highest contrasts for the most important information and work your way back to the least important information with the lowest contrast. This way you'll create a layering of information. So the amount of contrast depends on how important you deem the information that the contrast should convey. Here's the NASA color usage page on the subject.

Actually, your example of UX.StackExchange vs Stackoverflow.com shows that in the case of Stackoverflow, the number of answers is much more prominent than the item it relates to. Because the background of the number of answers has a much higher contrast. One may wonder if this is a wise choice...

share|improve this answer
    
Thanks for your response! Of course, it always "depends", but that doesn't automatically mean there can be no standards, right? For the foreground/background contrast it also "depends", yet there's the W3 measurements that provide some suggested values. Surely there could (should?) be some similar numbers for background/background contrast? –  Jeroen Apr 12 '12 at 14:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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