What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

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   FFFFFF   FFEFC6     1.14            73
Gaming           FFFFFF   DDF5FF     1.13            44
Cooking          FFFDF1   F6F8DE     1.06            33
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
Stack Overflow Contrast Example

User Experience
User Experience Contrast Example

DBA
DBA Contrast Example

share|improve this question
2  
Contrast on the new beta design is also a bit low (IMO). –  Mat Mar 31 '12 at 14:11
    
@Mat Good point, added the numbers for the beta sites (they're all the same color scheme, right?) –  Jeroen Apr 1 '12 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 '12 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 Apr 1 '12 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 '12 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 '12 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 '12 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 '12 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 '12 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 '12 at 17:42

1 Answer 1

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
// @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!

share|improve this answer

You must log in to answer this question.

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