103

Stack Overflow just got updated with some new styles. This includes a new, more vibrant shade of green for accepted answers, and questions with existing answers are now denoted by only a square:

enter image description here

There have also been some other changes, like the block quote background:

enter image description here

Code formatting has also apparently changed fonts, but I can't see any difference.

Is there anyplace that has mentioned this update either as a planned update or as an ex post facto announcement?

It'd be great to have an official post to talk about this/give feedback, especially since not everyone was in favor of the initial changes (the lack of contrast in quotes, the distracting vibrancy of the green, the lack of compliance with 1.4.1 of WCAG - Use of Color, et cetera).

39
  • 50
    -1, There are no free hand circles. I don't know where to look Apr 20, 2016 at 20:39
  • 20
    @BhargavRao I flagged your comment as offensive; There are no actual downvotes on this post.
    – CubeJockey
    Apr 20, 2016 at 20:40
  • 49
    Updated with freehand circles
    – TylerH
    Apr 20, 2016 at 20:41
  • 17
    I don't like that green.. At least on my screen it's too aggressive..
    – Floern
    Apr 20, 2016 at 20:46
  • 56
    Meta best seller: 50 shades of green ...
    – rene
    Apr 20, 2016 at 20:51
  • 9
    I actually like the new design, looks better now.
    – Maroun
    Apr 20, 2016 at 21:08
  • 2
    @MarounMaroun Personally I like the new green as well.
    – TylerH
    Apr 20, 2016 at 21:11
  • 3
    I like it! Now we just need to get rid of that ugly yellowish background.
    – matt.
    Apr 20, 2016 at 21:14
  • 24
    Thanks for noticing the color update. We're monitoring feedback from everyone and will make a post later. This update is part of a massive work on our part to reduce the number of colors as well as reduce our bandwidth on CSS. So far we've gone from about 110 grays to 15 with this update. We will be making changes to fix bugs though.
    – Hynes
    Apr 20, 2016 at 21:14
  • 55
    Like all UI changes, I anticipate hating it for several days and then slowly forgetting that it was ever different.
    – joran
    Apr 20, 2016 at 21:16
  • 8
    One green to rule them all. Except that other, lighter green. Okay, so two greens to rule them all. Apr 20, 2016 at 21:18
  • 3
    @Hynes Glad to know you guys are watching for it, but again, just a simple meta post somewhere saying "hey, we're consolidating our color palettes, look for ongoing changes and post bugs here as answers!" would be great :-) *hint hint*
    – TylerH
    Apr 20, 2016 at 21:20
  • 38
    A change in greenery on 4/20? Well played, SE!
    – X3074861X
    Apr 20, 2016 at 21:37
  • 9
    Grey on green looks absolutely terrible now in the badge/privilege trackers @Hynes - hovering amplifies the effect, too
    – Rob Mod
    Apr 20, 2016 at 23:15
  • 4
    I love the new colors. They look great.
    – Jeremy
    Apr 21, 2016 at 2:30

2 Answers 2

57

Update 04/21/2016

We appreciate everyone's feedback so far. The design team spent some time today reviewing complaints surrounding the green's brightness and the number of green backgrounds. Here are two updates we're making:

  1. We're changing the green's hue to a cooler, bluer green. This will dull some of the green's brightness. Here's a comparison of the previous greens to the newer greens: New Greens!
  2. We've removed the faint background-color behind answered questions, going instead with a one-pixel border treatment. This reserves background colors only for accepted answers. Throughout the Stack Exchange network, the only thing that changes for answered questions is the status color changes from black to green. While Stack Overflow is a part of the Stack Exchange network, it also is unique and can be treated differently. We feel this solution allows a person to understand quickly what hasn't been answered, what has been answered, and what has an accepted answer. This also reduces the colors in the question list and makes it less overwhelming.

As an aside, we are continuing to look at the favorite question highlighting. We understand that many have complained about the yellow background and some have offered some interesting solutions on Meta Stack Exchange. We hope to have an update for this in the near-future.


For a while the product team has known that we needed to consolidate our UI to make sure we were providing a more consistent UI and UX experience. Yet it was always more of a "nice-to-have" than a must-have. Over the last few months we've started extending the Stack Overflow UI in new (and exciting!) ways with Documentation, Jobs, Developer Story, and Teams. These extensions nudged a consolidated UI library to the forefront.

Yet what really pushed this was growth of our CSS to over 600 kB. So a few weeks ago we began to consolidate and reduce repetition. This update completes the last of the "low-hanging" fruits. So far we've reduced the raw CSS by almost 150 kB. In particular it has minimized variation among main colors by almost 50 colors each. We're still planning to reduce further, because performance is so important to us.

In addition to performance gains, consolidating the CSS was an opportunity to finally make a few updates to Stack Overflow that match the new branding that we rolled out last summer.

33
  • 31
    I, for one, welcome our new green overlords. Apr 20, 2016 at 23:22
  • 13
    This feels so...right. Tell the devs on this work that they really did a good job.
    – Makoto
    Apr 21, 2016 at 0:17
  • 4
    Has the yellow background been changed too, or have I just gone mad? I swear it wasn't always so upsetting. Something like #FFF8E7 is a lot less tear inducive, and it works fine for the "featured" box too. I swear I've never disliked a color so much. (Hint: me going mad is entirely plausible.)
    – Veedrac
    Apr 21, 2016 at 0:28
  • 24
    I thoroughly dislike having my attention yanked to the bright green boxes. Consolidating styles is all well and good, but this particular change seems unnecessarily disruptive. Please reduce the contrast to something which isn't actively distracting. (Speaking frankly, as a user I don't actually care about your branding; I just want the site to be nice to use. Any branding that makes the site worse should perhaps be called into question.)
    – phils
    Apr 21, 2016 at 1:17
  • 7
    Forget the branding, @phils. Focus on the less CSS. Faster green is better green.
    – Shog9
    Apr 21, 2016 at 2:48
  • 1
    @Veedrac Looks like it's already been muted from #fff8dc to #fdfaee.
    – TylerH
    Apr 21, 2016 at 4:50
  • 1
    Did you check the color contrast against WCAG AA because to me it looks like the dark green on light green is not compliant.
    – ivarni
    Apr 21, 2016 at 5:18
  • 1
    @Flimm hah, don't you know of SE's efficiency! They're clearly upset about the css bloated to 600kb+! not kB! kB is for the "Common as muck!" folk! :)
    – Pogrindis
    Apr 21, 2016 at 9:35
  • 4
    @Flimm Obligatory XKCD...
    – CaptJak
    Apr 21, 2016 at 12:51
  • 5
    @j08691 The background-color on accepted answer doesn't have inherent semantic meaning either. All of these have learned meaning. We did explore eliminating the box completely, but didn't feel strong enough about it right now to change it. We may revisit it again after people have more time to interact with it.
    – Hynes
    Apr 21, 2016 at 20:22
  • 5
    Thank you thank you thank you for removing the background color on answered questions. I'd love to see that border removed as well (the real info being shared with the viewer is given by the number), but I'll take each victory as it comes.
    – TylerH
    Apr 21, 2016 at 20:43
  • 8
    As an aside, we are continuing to look at the favorite question highlighting. We understand that many have complained about the yellow background and some have offered some interesting solutions on Meta.SE. We hope to have an update for this in the near-future. <-- just made my day
    – matt.
    Apr 21, 2016 at 22:49
  • 8
    Going with the outlined unanswered is much, much better than the faded green box. It will still take getting used to, but much better, thanks. Apr 22, 2016 at 2:16
  • 1
  • 2
    @Pang You should post a question tagged with bug about that so that it can receive individual attention.
    – TylerH
    Apr 24, 2016 at 5:51
33

I was puzzled why the white on green text boxes were very distracting, drawing my focus from other text elements on the page, while the other (white on blue or orange) text boxes weren't contributing to any such distraction.

After some quick searching, I found out that the human eyeball is most sensitive to green light, less to red and least to blue. This is reflected in the luminosity function:

Y = 0.2126 R + 0.7152 G + 0.0722 B

green light contributes the most to the intensity perceived by humans, and blue light the least.

I have no familiarity with this color spectrum sensitivity math. Perhaps one of the many talented designers at Stack Overflow who understands this could find a more optimum shade of green which would be less disruptive while trying to read the question titles!

According to the range of comments, perhaps it would help to shift the new color consensus from the Vibrant; Vivid; Distracting; Aggressive; Weird; Clashes end of the spectrum, moving it closer to the Great; Right; Nice side.

10
  • 3
    I learned something. Thanks :)
    – phils
    Apr 21, 2016 at 3:11
  • 9
    A more pastel version of the same green would be less jarring I think. This would reduce the contrast between accepted/non-accepted answers, but I don't think it would be a problem given the extreme contrast introduced by the latest change. Apr 21, 2016 at 4:15
  • @MarkRansom: But what if we want contrast between accepted and non-accepted answers? That's what I like most about the change: I can easily tell the difference between empty questions, possibly full questions, and finished questions. Apr 21, 2016 at 19:16
  • @NicolBolas Distinguishing between the different states is fine, but should accepted questions be most noticeable? Aren't unanswered or non-accepted questions the ones that need more notice?
    – user4151918
    Apr 21, 2016 at 19:20
  • @PetahChristian: Accepted questions have always been the most noticeable. The main thing that's changed is the ability to easily tell the difference between unanswerd and answered-but-not-accepted. Apr 21, 2016 at 19:28
  • @NicolBolas The main thing that changed is the colors. We already were able easily distinguish between unanswered (black 0 on white background) and answered but unaccepted (white number on olive background). Accepted questions weren't more noticeable than unaccepted questions, since they (had a different foreground color, but) both had used an identical olive background (to show that both had answers).
    – user4151918
    Apr 21, 2016 at 19:38
  • 2
    @NicolBolas it's a balancing act. I think you can indicate the difference WITHOUT SHOUTING IT OUT. I also think there's merit in reversing the emphasis so that the empty questions stand out while the accepted answers are muted, but that clashes with the expectation that an absence of color corresponds to an absence of answers. Apr 21, 2016 at 20:09
  • 2
    @MarkRansom It also clashes with the expectation that people come here for good answers. Answerers are the minority on the site; it's targeted for people who come seeking knowledge.
    – TylerH
    Apr 21, 2016 at 20:48
  • 1
    @TylerH the people who come for answers go directly to a question, they don't peruse the front page. Or if they do, it's only to find the Search button. Apr 21, 2016 at 21:20
  • @MarkRansom The first time they come to the site, yes, but a major effort of the site (like any site) is geared toward passing traffic, e.g. trapping the user's interest and keeping them here. Even the search results use the same colors and styles.
    – TylerH
    Apr 22, 2016 at 0:05

You must log in to answer this question.

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