13

I was having a look at the "Reputation" tab in Stackoverflow and it occurred to me that the yellow used to highlight the new entries doesn't stand out a lot from the white background. I really have to screw up my eyes to see the difference.

enter image description here

That made me think: is there any rule to know if two colors are going to appear distinct enough to the user's eyes? For example, while #FFFFFE and #FFFFFF are two different colors, it's obvious there won't be any noticeable difference to the human eye. In general at what point do we know that two colors are going to appear clearly different?

Improve this question
1
  • 3
    it may be you monitor's setting, in my screen the contrast is clear
    – Naoise Golden
    Dec 23, 2011 at 13:06

4 Answers 4

Reset to default
5

There is a tool for checking color contrast in accordance to an specification by the W3C to determine if there's enough contrast "when viewed by someone having color deficits or when viewed on a black and white screen".

This is a working draft but as close a standard as it gets in web.

In this case, you should test the contrast between the different colors in use. Let's say we want to use the following colors:

 - ForegroundColor1 
 - BackgroundColor1
 - BackgroundColor2

Then define the desirable contrasts:

 - ForegroundColor1 <> BackgroundColor1 = Contrast Ratio 9
 - ForegroundColor1 <> BackgroundColor2 = Contrast Ratio 9
 - BackgroundColor1 <> BackgroundColor2 = Contrast Ratio 1.5

The contrast to use between colors is the designer's desition, taking into account to comply with the specification between foreground and background colors (4.5 minimum contrast ratio) and an enough contrast for the background colors —which the W3C specification doesn't cover.

If you ask me, background colors shouldn't be too much contrasted. If seen in black and white, no highlighted background is better than having a hard time with the foreground.

Improve this answer
5
  • 2
    While this is a good resource, I think the question is asking about two adjacent background colours, rather than contrasting a foreground and a background colour. ie: how close (or distant) the background colours can be (or should be) in order to be able to both easily differentiate them, and retain suitable contrast between the common foreground colour. (Perhaps with the added constraint of not wanting the backgrounds to be too different!?)
    – Roger Attrill
    Dec 23, 2011 at 12:08
  • True, the specification is intended for background/foreground contrast, but the formulas specified can be used more generally to estimate the contrast in any situation.
    – Naoise Golden
    Dec 23, 2011 at 12:28
  • This is a good resource, but I agree with @rogerAttrill, the tool cannot be used to evaluate two adjacent background colors. I just tried it and my colors don't pass the test since, of course, light yellow text on white background would be unreadable.
    – laurent
    Dec 23, 2011 at 13:21
  • You are right, the minimum contrast ratio in the W3C is too much for contrasts between background colors. I edited the answer to take this into account.
    – Naoise Golden
    Dec 23, 2011 at 13:24
  • 1
    OP's question is not so much about absolute contrast level control as it is about a transition point for visual perception of a distinct difference. Though subjective, it is certainly an important UX aspect.
    – Kris
    Dec 25, 2011 at 11:58
2

There is no definitive answer to that question.

There are so many things that are outside of your control and/or knowledge as a designer that you can't have a "rule" to say how far apart two RGB-color-values have to be. Some things to consider:

  • Quality, type and settings (brightness and such) of your computer screen affect this a lot (check out Atwood's tips). This factor can be negated if you have control over the medium (e.g. computer screens) used, which is rarely the case for online apps.
  • Color blindness can be a factor as well (keep in mind: some people -specially males- are only "a little" colorblind)
  • The demographics of your user base are probably important too (especially age, I'd imagine).
Improve this answer
1
  • Even if all the above factors are identical, individual response can (does) vary. However, the question is essentially about the human visual discrimination of wavelengths.
    – Kris
    Dec 25, 2011 at 12:02
1

It makes a huge difference whether this is about adjacent colors (which include background-foreground contrasts) or non-adjacent colors. Our eyes are very sensitive to perceiving a difference between adjacent colors. But we're very poor at recognizing a non-adjacent match.

Color differences in adjacent colors can be expressed in delta-E. 1 delta-E is the smallest color difference our eyes can perceive. The higher the delta-E, the higher the contrast and the more visible the difference. If you own a ColorMunki, it will be able to tell you the delta-E of two colors instantly.

Where it comes to non-adjacent colors, no measurement or calculation can be taken for granted, because it very much depends on the surroundings of the color. This can even go as far as perceiving one and the same color as white or black, depending...

Improve this answer
-1

UX recommendations on color contrast

For one, the difference cannot be expected to be uniform across the spectrum. The human eye's sensitivity varies from color to color. A lighter Red (not necessarily, though) may be more easily perceived than a lighter Blue (say).

For this reason, what we really need may be

  1. a color sensitivity table spanning the visible spectrum
  2. a cross-reference table for combinations of colors

If we consider that at least sixteen million colors are possible for display, that sounds like a major job indeed. However, there might be some body of research that can be a rough guide.

That said, a simpler approach would be consult the various UX recommendations on color contrast widely available online.

Improve this answer
4
  • 6
    "a simpler approach would be consult the various UX recommendations on color contrast widely available online" That is so NOT what we want to promote on this site. We want canonical answers right here.
    – Roger Attrill
    Dec 23, 2011 at 11:25
  • @RogerAttrill Since I have seen these references right here on SE many times over, I am not repeating them. It would be fairly easy for anyone to look up on this site for more precisely what may be suitable.
    – Kris
    Dec 23, 2011 at 11:32
  • 1
    In that case: add links to those answers on SE.
    – Marjan Venema
    Dec 23, 2011 at 12:29
  • 'In general at what point do we know that two colors are going to appear clearly different?' -- the main intent of my answer relates to the OP. It is not about UX recommendations as such. Therefore the question of further discussion on that does not arise.
    – Kris
    Dec 24, 2011 at 6:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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