38

Note: this question has been seperately asked again for the Stack Overflow redesign. Post below is updated with these "NEW" values.

My question: could the background colors for questions marked as "favorite" on variuos SE sites be reviewed and where needed be updated to provide more contrast?

The reason I'm asking is because I like this feature a lot, but some SE sites have quite low contrast between favorite and non-favorite questions.

Originally I wanted to ask my question in the dba.SE meta site. However, there I found someone else asked my question a while ago. So instead I was about to try and give an answer to the question. For this I did a small experiment, determining contrast on several SE sites I like to visit.

SE Site             Regular  Highlight  Contrast Ratio  Color Difference ↓
---------------     -------  ---------  --------------  ------------------
Stack Overflow OLD  FFFFFF   FFEFC6     1.14            73
Gaming              FFFFFF   DDF5FF     1.13            44
Cooking             FFFDF1   F6F8DE     1.06            33
Stack Overflow NEW  FFFFFF   FFEFC6     1.06            30
Programmers         F4F4F4   E9F2FD     1.03            22
Beta sites          FDFDFD   F2F7FE     1.06            18
Electronics         FEFDF7   FEF8EA     1.04            18 *
Cycling             FCFCFC   FCF8EF     1.03            17 *
User Experience     FFFFFF   FFFBF2     1.03            17 (UX? d'oh!)
DBA                 FFFFFF   FFFBF2     1.03            17 (!)

* Pattern background, colors are averaged.

The number in the last column matches with my own (subjective) experience: the difference between fav and normal question is hardest to see in those SE sites.

These results made me turn to the main Stack Overflow Meta, because perhaps the SE network would benefit from a broader review of these colors? Within my own particular subset of SE sites it's mainly UX and DBA where favorite questions don't pop out much.

Note on Cycling
The numbers for Cycling were a wee bit tricky, I noticed the background isn't a solid color. To get the colors for comparison I just a quick'n'dirty method: resize a sample to 1x1 px and use that color code (assuming/hoping my editor actually averages the color). For a screenshot comparison see the related meta question on cycling.

Note on the numbers
For the values above I used this online tool. I did not research available tools very deeply so if there are any objections to this particular one let me know, and I'll grab some results with a different tool.

Some screenshots
Here are some screens from the biggest contrast (SO) and the two low ones (UX and DBA):

Stack Overflow OLD
Stack Overflow Contrast Example

Stack Overflow NEW
Stack Overflow Contrast Example (new design)

User Experience
User Experience Contrast Example

DBA
DBA Contrast Example

Improve this question
10
  • 3
    Contrast on the new beta design is also a bit low (IMO).
    – Mat
    Mar 31, 2012 at 14:11
  • @Mat Good point, added the numbers for the beta sites (they're all the same color scheme, right?)
    – Jeroen
    Apr 1, 2012 at 8:58
  • Yes, they all have the same style (or should shortly if there are still some on the old Sketchy theme).
    – Mat
    Apr 1, 2012 at 9:04
  • This is definitely an issue worth consideration, so thanks for raising it. I personally think that the contrast is a bit too high on Stack Overflow, to the point that I find the orange background distracting. I think the values on some of the other sites are more sane. In particular, I like what's being used on the Beta sites. Then again, I'm quite young and don't have any vision problems. So if this poses a problem for other users, it should definitely be tweaked.
    – Cody Gray - on strike
    Apr 1, 2012 at 9:29
  • 1
    I find the highlighting on SO to be a bit too much too - but I generally don't like the color scheme at all, so... :) For me, the theme here on meta hits the spot exactly in terms of contrast.
    – Mat
    Apr 1, 2012 at 13:50
  • I've made a similar point about the Cycling SE which can be seen here. Using your method the Cycling SE only has a contrast level of 1.02!
    – Ambo100
    Apr 8, 2012 at 15:42
  • 1
    @Ambo100 Thanks for the added info, I've updated the question to include some numbers on Cycling (though that was a little tricky, see text)
    – Jeroen
    Apr 8, 2012 at 16:02
  • @Mat shame your bounty has passed with no response :'(. I was tempted to propose some new colors in an answer, but figured it must of course also "fit" with the design. Things would probably get ugly SE would go with a proposal that just changes hue or brightness until contrast hits a certain mark :)
    – Jeroen
    Apr 10, 2012 at 7:06
  • @Jeroen: was worth a shot. The Q did get a few more views and votes (all up!) so it was worth it. If you do have proposals for better design, don't hesitate to post them - might not have effect, but who knows? (I totally suck at UI design in general, colors in particular :-) )
    – Mat
    Apr 10, 2012 at 10:17
  • 1
    @Jeroen - I added numbers for Electrical Engineering, it also has a pattern. We've had trouble with contrast before on electronics here, here, and here. I suggest making more noise about it on your meta.
    – Kevin Vermeer
    Apr 10, 2012 at 17:42

1 Answer 1

Reset to default
4

Personally I don't believe "design by committee" works all that well, so the community coming up with new colors is probably not the answer to this question. I did ask for some help at UX.SE on the theoretical part of contrast, but that didn't turn up anything conclusive (yet).

Besides: as far as I'm concerned the designs of SE sites are great, both visually and funcationally! So the best answer to this question would be that if and when the SE design team has some time they'd have a look at these favorite-colors and try to increase contrast a bit while keeping things pretty.

In the mean time I created my own slightly (okay: "very") hackish workaround with a user script for the Greasemonkey plugin for Firefox. If anyone wants to use/adapt it (or update it for a similar addon for a different browser), here's the hack I use:

// ==UserScript==
// @name           SE
// @namespace      SE
// @description    SE colors
// @grant GM_addStyle
// @include        *
// ==/UserScript==

var replacements = {
    'ux.stackexchange.com' : 'rgba(255, 220, 180, 0.4)',
    'dba.stackexchange.com' : 'rgba(255, 240, 160, 0.4)',
    'electronics.stackexchange.com' : 'rgba(255, 245, 180, 0.4)',
    'bicycles.stackexchange.com' : 'rgba(190, 255, 230, 0.4)',
    'stackoverflow.com' : 'rgb(255, 245, 211)',

    // won't work, SE has a more !important style :'(
    'cooking.stackexchange.com' : 'rgba(230, 248, 180, 0.4)',

    'beta-and-the-rest' : 'rgba(210, 230, 250, 0.4)'
};

GM_addStyle('.tagged-interesting.question-summary ' + 
    ' { background-color: ' + 
    (replacements[window.location.hostname] || replacements['beta-and-the-rest']) + 
    '}');

If anyone has additions/updates: feel free to edit!

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .