0

Today the box that indicates if a question has an accepted answer has changed colour. This was done in an effort to improve the accessibility of the site. A noble goal which I generally applaud.

If we look at the previous layout of the box, with white text on a light green background, it used #48A868 as background and #FDFDFD as foreground. Which results in a contrast ratio of 2.91:1 using this contrast checker. The same page also indicates that this level of contrast fails all levels of WCAG 2.1 compliance.

If we then look at the current design, white text on a darkgreen background, the values used are #2F6F44 as background and #FDFDFD as foreground. This gives a contrast ratio of 5.93:1, which is in compliance with WCAG 2.1.

This approach however gives a very dark feel to the page, and you can compare it for yourself in the two screenshots below:

Screenshot of question page with new colour scheme

versus

Screenshot of question page with old, lighter, colour scheme

Now this obviously appears like someone put a developer at work to solve a design problem. And I know from experience what that's like. Usually the outcomes are less than desirable. Now I don't claim to be a designer, but I greatly value "light" designs, as opposed to the more depressing dark designs.

At the same time, I do see that there is a need to be more accessible, so I came up with an alternate solution, because I don't want to be just bashing here. That's too easy.

Therefore I present to you a contrast rating of 6.55:1 (even better than the current solution):

Screenshot of the question page with black text on light green background

Using dark text #0c0d0e on the original background #48A868. To me this preserves the light feel of the site far better than the large dark rectangles that are currently implemented.

I hope the current design decision can be reconsidered!

6
  • 28
    iunno... that seems worse to me
    – Kevin B
    Sep 7 at 20:41
  • 30
    I'm not a designer, but personally I find the dark text on green version very difficult to read, in particular distinguishing numbers like 6 and 8 Sep 7 at 20:43
  • 1
    IMO just stick to white background, dark green text (new dark green) with matching border and use the icon to differentiate between accepted and not accepted.
    – Kevin B
    Sep 7 at 20:44
  • @samcarter_is_at_topanswers.xyz, its black text on the original colour.
    – Luuklag
    Sep 7 at 20:44
  • @KevinB feel free to mock up and propose here as an answer.
    – Luuklag
    Sep 7 at 20:45
  • 2
    The new color for dark mode looks awful too ( looks even worse if you're using LegacyQuestions). Ryan M came up with better colors for light mode. Maybe someone could do the same for dark mode too. Sep 7 at 22:12

3 Answers 3

35

The issue isn't the white text; it's the choice of heavily desaturated colors that only look green when they're also light.

Here's #FDFDFD white text on a #128739 green background, meeting WCAG AA standards with a contrast ratio of 4.53:1.

A screenshot of posts from the Meta Stack Exchange frontpage edited to use the above colors

6
  • 3
    You must be a real designer ;)
    – Luuklag
    Sep 7 at 21:25
  • If this green is used it has to be used as only a background color and not text. It doesn't give enough contrast with "favorite yellow" (#FDF7E2).
    – Laurel
    Sep 7 at 22:00
  • 1
    Define enough contrast @Laurel. We're not talking about text in that instance, so there isn't a massive need for contrast.
    – Luuklag
    Sep 8 at 6:54
  • @Luuklag Enough contrast according to WCAG AA (4.5:1 ratio). If the green is changed to this color, it can be used as a background for white text (like when there is an accepted answer) but it can't be used for text with a transparent background (which is the case when there is no accepted answer), since that's a 4.3:1 ratio on favorite questions. Currently the same green is used in both these places.
    – Laurel
    Sep 8 at 9:53
  • 1
    So then the fix would be to always use white text. It would probably hardly be noticeable if the text is yellowish or white. @Laurel
    – Luuklag
    Sep 8 at 9:59
  • @Luuklag You're misunderstanding what I'm saying. I'm talking about the text lettering (not background!) in the rest of the interface that's also this shade of green.
    – Laurel
    Sep 8 at 14:47
29

What I don't like aesthetically is that it takes a really dark and prominent part of the design and makes it even more dark and prominent. All the while we've de-emphasized the accepted answer mechanically by unpinning it on many sites.

Give it less EMPHASIS!

Even without changing the green, it looks better when the only thing with a green background is the checkmark:

Favorite question with green-background checkmark only, desktop

Here's the old lighter green for the background, #600:

question with green-600 background checkmark only, mobile

Even no background works (HT Justin for the mock-up):

green check on white background

Having a border around the checkmark and "X answers" helps keep it tied together. Alternatively, light shading can be used:

checkmark with 1 answer, Grey background

That is not a mock-up but a picture of how ignored questions currently look (no, they shouldn't look like regular questions). I would use some green at least for the checkmark if this was used for non-ignored questions.

13
  • 14
    Not gonna lie, I think this is a better solution. Even drop the differing background for the checkmark. Essentially, if accepted, just add a checkmark the same color as the text. The background over-emphasizes a piece of information that is not super important. I wonder if we ever did UX research on keeping the answers designed that way or just continued doing it because that was the way it's always been done...
    – animuson StaffMod
    Sep 8 at 3:28
  • 9
    Despite the fact that I've posted a "competing" answer (which I'll leave up in part since it demonstrates effectively that it doesn't have to be muted to be accessible), I like this solution better, for exactly the reasons @animuson describes. It's overemphasized. The old design, IIRC, used to emphasize the score with this prominence, which I think was more useful. The number of answers is quite possibly the least important piece of information there, a point that I've raised elsewhere about the new post design.
    – Ryan M
    Sep 8 at 5:02
  • @animuson also not gonna lie, there's been a continuous push to retire the "accepted answer" concept and deemphasizing it in the design seems like a step towards that end. Also related was making the rep popup smaller in the notification bar, while that did go towards reducing its addictiveness I'm wondering if "rep and right answer" are being pushed to the background altogether. (As if providing the right answer isn't important enough to be emphasized, and the grey crowd will just take care of things.)
    – bad_coder
    Sep 8 at 6:09
  • 1
    @bad_coder how often is the best answer the accepted answer? There are tons of cases where the accepted answer is not the "best" approach to solve something. It's just accepted because the OP had littlest work implementing that answer.
    – Luuklag
    Sep 8 at 6:53
  • Update: I am apparently not recalling correctly about the old design, though the score did used to be more prominent (though it was the answers count with the green background). The general point about emphasizing unimportant information stands, though.
    – Ryan M
    Sep 8 at 7:28
  • @animuson Here's probably the most relevant info on why they are designed that way: meta.stackoverflow.com/a/321419/2756409 and meta.stackoverflow.com/a/321505/2756409 (design choices were implemented circa April 2016)
    – TylerH
    Sep 8 at 14:25
  • I like this but how about no green background and just make the checkmark itself green? Sep 8 at 17:44
  • @CaveJohnson You're not the first to suggest that but I didn't have time to make more mock-ups.
    – Laurel
    Sep 8 at 18:13
  • 1
    Here ya go: i.stack.imgur.com/tYn4u.png (cc @CaveJohnson).
    – Justin
    Sep 9 at 13:02
  • The line around the box is too thin, and a recent change about 1 month ago (I haven't seen any post about it) puts a blue box outline around most of the post elements you click on (at least using Firefox). I seriously dislike such thin elements (for someone who has difficulty seeing it's a nuisance) and fuller design elements are altogether more palatable. Whatever the case, choosing emptied elements with less color and more monotonous background is certainly not a good design choice since over 90% of any page is already empty monochromatic space.
    – bad_coder
    Sep 9 at 16:08
  • @bad_coder What about a light grey background? Does it look better or worse for you?
    – Laurel
    Sep 9 at 16:21
  • 1
    @bad_coder Re: recent change about 1 month ago ... puts a blue box outline around most of the post elements, do you mean Some buttons on the site are being highlighted even on mouse-click?
    – Justin
    Sep 9 at 17:53
  • Oh god before "the whole question area get filled with green" to show accepted - bring back the pre-pandemic styling. Sep 22 at 8:15
8

I don't see the point of changing the color in the question listing:

question listing

to make it inconsistent with the color used in the profile page:

profile page

It looked better the way it was before.

And the same for Dark Theme, the green is all flushed out:

enter image description here

1
  • 4
    "Flushed out" or "washed out"?
    – Laurel
    Sep 8 at 2:05

You must log in to answer this question.

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