6

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?

Improve this question
1
  • Two comments: (1) In the example images on SO Meta, white is the background which means the foreground-background contrast tools will work for your purposes. (2) ColorBrewer will help you find colors for large area fills. It is based on color perception research in maps (i.e. solid fill colors in adjacent areas). You can find the papers describing the research here.
    – user1757436
    Commented Dec 8, 2015 at 17:34

2 Answers 2

Reset to default
3

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.

Improve this answer
2
  • 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
    Commented Apr 12, 2012 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
    Commented Sep 20, 2013 at 12:23
0

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

Improve this answer
1
  • 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
    Commented Apr 12, 2012 at 14:37

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.