-102

November 21, 2023: To help with internal managing issues, you may see a reference number added next to the status tag on your post. These numbers don't determine the order or priority of issues but will make it easier for internal staff to log and track progress.



October 26th, 2023

Thank you for all the bug reports, feedback, and concerns with this latest update. We have rolled out a handful of fixes based on those and are requesting more feedback on the new post regarding those.


It has been a long journey, but the time has come to finally bring our new colors to production! This post will serve three purposes:

  • The first is to announce the launch of said colors and celebrate with the community who helped us get here.
  • The second is to explain what we changed from our last post.
  • The third is to provide a space to report bugs.

Our new standards

Our goal is still the same: we want to be more accessible without hindering usability and setting standards to ensure we reduce inconsistencies across our sites.

As discussed before, we used APCA to guide our decisions. While we weren’t able to hit lightness contrast (Lc) value of 75 for all text, our large blocks of text do hit this and the rest of our text (with the exception of muted/disabled copy) will have an Lc value of at least 60.

At a high level, our light mode won’t feel that much different, but we believe that our dark mode has come a long way and that is thanks to the advice of a community member. Simply put, WCAG uses a simple contrast calculation that can not adjust for the human nonlinear perception and by using APCA our readability should improve for all users.

We’ve put much more detailed usage guidelines into our design system that discuss color usage, layering, emphasis levels, interaction states, and accessibility standards. We may not be meeting all of our own, new standards yet, but something we are aiming to do over time.

Changes from our last post

From the last meta post, we made the following changes based on your feedback:

  • Desaturated the blues and greens in light mode
  • Changed the hue of green in all modes
  • Darkened and desaturated the yellow in all modes
  • Did an overhaul of the “background” colors in dark mode to more seamlessly blend with their foreground brethren.

Once we got in and started examining the sites we made even more changes. We noticed that there were certain scenarios where our dark mode blue wasn’t passing and had to make adjustments. We also still struggled with our brand color, orange, and had to make the sacrifice to no longer use it in the UI.

We added in a purple color so designers could have the unique color to use for new features and onboarding

New Purple Palette

UI changes of note

The biggest change you’ll notice is the changes to the moderator and required tags. The moderator tags have changed from red to orange so they look less like an error state.

Then: Red moderator tags with red borders

Now: Orange moderator tags with orange borders

The required tags have changed from grey to a bold emphasis level of the site’s themed color. These tags were almost identical to muted tags, which we found to be a source of confusion.

Then: Grey required tags with grey borders

Now: dark blue required tags

Another change you will notice is that our toggles, radios, and checkboxes selecting component (dot/checkmark) will now switch to black instead of staying white in dark mode.

list of checkbox and radio elements in various states

Lastly, we had to lighten the meta theme a little to account for the new way we will do hover states. This will affect all meta sites themed with the black meta color.

Then: Black button with the word button in white

Now: Dark grey button with the word button in white

Next steps

This was a big effort for just a handful of folks so if you find bugs, please use this post to log them and we’ll add them to our backlog. We hope to iterate on this in the future, thinking of things like font size and ensuring we use more than just color to represent information. We appreciate your patience and help as we’ve worked through this. We hope you feel it’s as successful as we do.

46
  • 58
    Does this bring dark mode closer to being available on other sites than SO as well?
    – Mast
    Commented Oct 19, 2023 at 18:33
  • 11
    Should site-specific bugs be reported here, or on per-site meta? Commented Oct 19, 2023 at 18:42
  • 12
    @Mast From our developer... "Yeah, it gets us closer (particularly when it comes to custom themes having sufficient contrast), but we still got a ways to go to ensure a given site’s overrides play nice"
    – Piper Staff
    Commented Oct 19, 2023 at 19:13
  • 55
    Wow, so many bugs reported (some of them blatant) in less than 2 hours. Was this really tested before launching?
    – hkotsubo
    Commented Oct 19, 2023 at 19:34
  • 44
    @hkotsubo Nearly 10k lines of code added, 10k removed, 113 files effected across SE Network, SO sites, Enterprise sites, and Teams tested by 3 designers, 4 developers. Yes, we tried our best to test every corner, but we clearly missed some.
    – Piper Staff
    Commented Oct 19, 2023 at 20:01
  • 76
    10k of lines added, 10k removed and 113 files affected just to change some colors and css stuff? Holy moly! Commented Oct 19, 2023 at 20:29
  • 47
    It just looks so washed out in SO dark mode, it's lost the vibrant colours that made important parts stand out. Did this really get reviewed or did the designers forget about dark mode again?
    – Phil
    Commented Oct 19, 2023 at 21:33
  • 24
    i genuinely thought that my not-normal monitor i'm on right now was the reason the colors in dark mode looked so strange (and not in a good way). starting fiddling with monitor settings for a minute before I saw the post on this... Commented Oct 19, 2023 at 22:00
  • 45
    @Piper Yeah, that's a lot of work, but seriously, didn't anybody try to simply access the homepage in dark mode? Or check the colors of vote buttons? Looking at the bugs reported, many - if not all - of them seem to be basic stuff of the most accessed parts of the site, not hidden things in some obscure page. I don't mean to be rude and tell you how to do your job, but if the change is so big, perhaps you should've done a more comprehensive and careful test.
    – hkotsubo
    Commented Oct 20, 2023 at 0:55
  • 13
    The issues here and in many other changes the team has made to the colors seem like the sort of thing that would be addressed by automated screenshot testing. A human would need to approve the changes, which they would do after verifying that the change is what they expect. For something like this, that'd be a lot to review, but then, it's a large change, and that time is time that doesn't have to be spent in repeated manual testing. It's unsurprising that with dozens of network sites with different themes, manual testing fails to catch stuff; that's where automation can lend a hand.
    – Ryan M
    Commented Oct 20, 2023 at 1:10
  • 37
    I can't speak to accessibility, but the new colors are unpleasant and look washed out in dark mode. I kept thinking my laptop had gone into outdoor-light overbright washed out mode.
    – Andy Ray
    Commented Oct 20, 2023 at 1:26
  • 25
    If you roll out such changes, you should have made an option to restore the previous state (or you should have done better job at testing!). For me personally StackOverflow is completely unusable now, both in light and dark mode. The high contrast toggle does nothing, everything is high contrast.
    – Chaosfire
    Commented Oct 20, 2023 at 6:56
  • 31
    "tested by 3 designers, 4 developers" and not tested by single dedicated quality assurance team / person.
    – luk2302
    Commented Oct 20, 2023 at 8:59
  • 23
  • 11
    We have heard the feedback on Dark Mode. I posted a separate answer addressing that. meta.stackexchange.com/questions/393939/new-colors-launched/…
    – Rosie StaffMod
    Commented Oct 20, 2023 at 12:32

76 Answers 76

1 2
3
7

ref 459

When I view a deleted post (example), the contrast between the red/pink background and the tags isn't great.

enter image description here

I don't have a specific suggestion in mind, but is there a way to increase the contrast between the red background and the tags (other than something like a userscript)?

3
  • Not great in dark mode either i.sstatic.net/Np7zU.png
    – Phil
    Commented Oct 20, 2023 at 2:04
  • 2
    Agree, don't love this. I think we can play around with it.
    – SpencerG StaffMod
    Commented Oct 20, 2023 at 13:44
  • A new tag style has been released which has improved this contrast. More details here
    – Carrott Staff
    Commented May 21 at 14:29
6

In the "Next tag badge" in profile page and inside the "Select your next badge" window the tags has the grey color only.

Screenshots for reference:

enter image description here

enter image description here

6

MSE questions at https://stackexchange.com/questions?tab=realtime still use the old design:

enter image description here

So do the ones shown at the favorite-tag filter, as well as in its dropdown (* show details):

enter image description here

6

Unread responses in the responses tab have a much darker background color

It appears that the background color for unread responses in one's own profile's Responses tab has become darker, reducing contrast:

enter image description here

Can this be made lighter again?

1
  • I've added a new 'answer' encompassing this & many others similar. The overall problem is the orange, everywhere it appears it's way too much.
    – Tetsujin
    Commented Oct 20, 2023 at 8:52
6

I'm not using any theme modifications; my experience is based on, and my feedback is aimed at only unmodified, vanilla, SE-provided themes.

Increased contrast:

To me it seems that by a design choice, contrast had been increased in a lot of such places where it does not serve the user well.

I percieve, a lot of contrast had been added to elements where the overall result is only distraction, percieved visual clutter, which needs a constant, straining effort to ignore, so that one can keep concentrating on one's primary activity on the page.

It is emphasized by the apparent circumstance that the contrast-increasing changes had been rolled out on supporting-role UI elements (like the now-obsidian-black page header strip, and some tags), but not on primary-importance elements.

(E.g. the "Post your answer" button, which is the primary action in my use case (posting this answer), is being not only competed, but defeated, by the prominence of the strip of tags underneath it.)

Lost contrast:

I see a lot of reports where contrast was lost, out of which, I assume, a lot of cases are unintentional, things being overlooked: bugs.

However, the apparent number of such bugs seems to suggest that the code is not in a tidy state; where implementing a consistent sweep around the codebase does not any more promise consistent results, because things might have been done in inconsistent ways.

If that assessment would indeed be accurate, I would advocate for giving priority to tidying up the codebase. Trying to roll out major changes platform-wide on a brittle, untidy codebase could become a burnout-inducing struggle (especially while under the pressure of high expectations), costing in the end more than an initial tidy-up would have costed. (Also: such a tidy-up could contribute to the development / maintenance of an aware interface inventory.)

4
  • I know you should never rewrite software, but… I don't see a way forwards other than a full rewrite of the front-end, taking into account modern HTML (and a corresponding change in what's considered idiomatic Stacks). I'm not sure whether the company has the workforce for that, but if they're willing to open-source Stacks they might be willing to open-source this hypothetical front-end rewrite, and get community contributors to pitch in.
    – wizzwizz4
    Commented Oct 20, 2023 at 12:19
  • 1
    @wizzwizz4 Firing a significant part of your work force and replacing them with unpaid volunteers is probably illegal in most of the world, even in USA. meta.stackexchange.com/questions/337117/…
    – Lundin
    Commented Oct 20, 2023 at 13:25
  • @Lundin I've been pitching this since before the last two layoffs – for "lack of expertise" reasons rather than lack of personnel –, so they'd have a decent argument that it's unrelated. Plus, if they didn't claim copyright over the work (only used it under license, same as a load of other libraries they're currently using) it'd be hard to argue we were working for them, any more than any CC BY-SA 4.0 contributor is working for them. Having volunteer moderators is a far more dubious practice than having open source volunteers, which even Microsoft does these days.
    – wizzwizz4
    Commented Oct 20, 2023 at 13:41
  • 3
    @wizzwizz4 Or them open source volunteers could just join the 100% open source, 100% non-profit alternative at codidact.com? Why involve some private company?
    – Lundin
    Commented Oct 20, 2023 at 13:49
6

In the tags page, when hovering the required-tag button on top, it gets a very bright background and the white text becomes almost unreadable:

required tag unreadable when hovered

Should be changed so it's the same as hovering an actual required tag, e.g.

actual required tag with a proper hover color

6

Usercards and comments for the Asker on MSO are a bit dark for the text colors within

Large user card on MSO Comment user card on MSO

Seems fine on Stack Overflow proper?

Large user card on SO Comment user card on SO

5

Response to the Feedback on Dark Mode

We did test the homepage in dark mode. It's working as intended in the APCA contrast that the Community wanted. We've heard your feedback and are looking into toning it down. However, if we execute on that, there is a good chance we will no longer meet the APCA goal that the community decided on, so we need to be thoughtful about any changes. Luckily, all of the work that has gone into this release has made it easier to switch our colors around. We'll let you know what we land on and when we deploy.

18
  • 16
    Based on the previous post about colors change, I'd say that the suggested screenshot of Dark Mode is very different from the final result. I wouldn't say the latter was "working as intended". Seriously, we just accessed the home page and immediately noticed that everything was unreadable. It's really hard to believe that this was properly tested.
    – hkotsubo
    Commented Oct 20, 2023 at 13:33
  • 19
    Contrast IMO isn't the problem, it's a complete lack of vibrancy. Every light colour is tending towards white. It looks bleached. Also, what's this about "what the community wanted"? Could you please link to the reference for that?
    – Phil
    Commented Oct 20, 2023 at 13:47
  • 11
    Shouldn't the actual "high contrast" mode be the mode that meets contrast accessibility standards? While the regular dark mode should simply be an aesthetically pleasing website with a dark background. I find the amount of contrast on the Stackoverflow dark mode so high now that it quickly causes me eye strain.
    – mbaird
    Commented Oct 20, 2023 at 13:48
  • 9
    @DBS I completely disagree. I think there are issues (bugs) with the current dark mode where dark colors on top of other dark colors (for example tag buttons on the dark background), and light colors on top of, or adjacent to, other light colors that make the individual elements hard to distinguish (washed out), while there are also issues with the extremely light colors (links) contrasting too highly with the dark background, causing eye strain for lots of people. Both are legitimate complaints that should not be discounted just because at first glance they may sound as if they conflict.
    – mbaird
    Commented Oct 20, 2023 at 14:04
  • 9
    I completely agree with Phil above; it's less a contrast problem and more a saturation one, at least for me personally. Before the change, dark mode had colors and indicators that were easily distinguishable by color– now, nearly every colored element leans towards white, which makes everything feel washed out and more dull by comparison. I imagine this is even worse for folks with high contrast settings on their monitor.
    – zcoop98
    Commented Oct 20, 2023 at 15:04
  • 19
    I still want to know how many people in the community really wanted an APCA contrast dark mode, compared the the total number of people on the site using dark mode, and why that had to be done in the regular dark mode theme, instead of the high-contrast dark mode theme. I think the majority of people were really happy with the StackOverflow dark mode theme as it was.
    – mbaird
    Commented Oct 20, 2023 at 18:10
  • 8
    Seems kinda weird to me to see that the community wanted APCA, when i haven't heard of that, and am probably among the most active meta users.... there's no way i missed a post somewhere. I use darkmode almost everywhere, but SO's dark mode has never been appealing to me. You've done a great job with the blog's dark mode design, and even so labs, but i still can't stand SO's dark mode... neither before or after.
    – Kevin B
    Commented Oct 20, 2023 at 20:59
  • 2
    Counterpoint: the contrast/saturation home page looks mostly fine to me in dark mode (other pages, less so). If something is saturated, there should be a reason, in terms of emphasizing important content. For example, the green on the answer indicator is washed out, and that's good, because it's not that important to the page as a whole. It doesn't jump out, because it shouldn't. If there's one thing I'd want to jump out more, it's the indicators for content in watched tags. These should jump out as things I should be looking at, and they don't.
    – Ryan M
    Commented Oct 20, 2023 at 22:38
  • 3
    Please, just make one theme with pale colors for APCA and other one with bright colors like previously for normal people! Theme with current changes looks like I have problems with my eyes... Commented Oct 21, 2023 at 6:45
  • 3
    Even if the community really wanted APCA and voted for it, I'm pretty sure nobody was expecting it to be implemented like this. If that's what APCA looks like, I prefer to not have it
    – hkotsubo
    Commented Oct 21, 2023 at 12:28
  • 2
    @D.W. thanks for that link. Looking at the screenshots of what they said the StackOverflow dark mode was going to look like, they still had the StackOverflow "orange" color in those screenshots, and dark text on light backgrounds was bolded, neither of which is the case in the final result. Also their screenshots left out tons of things, like notification badges, and the color of visited links. The color of the pagination buttons in the screenshot was also different. I would say what was upvoted and approved by people was not what they actually delivered.
    – mbaird
    Commented Oct 21, 2023 at 15:20
  • 9
    are you sure the community wanted APCA dark mode? Based on what statistics/requests? Fro the actual response on this threads it seems really the opposite
    – NicoCaldo
    Commented Oct 21, 2023 at 20:32
  • 4
    “High contrast” is not the only visual accessibility requirement that exists. That's why software designed for usability (e.g. Windows 98) has high contrast themes, rather than making everything high-contrast by default. (Saying nothing new, but saying it slightly differently.)
    – wizzwizz4
    Commented Oct 23, 2023 at 11:14
  • 1
    I think folks trying to make an enemy of APCA are misunderstanding the situation to some degree; prior to APCA, the only major accessibility metric/ measure for font contrast was specified by WCAG 2, which has notable drawbacks that APCA directly aims to address. The problem here appears to be less about APCA, and more about an approach that apparently optimized for the accessibility metric rather than the overall experience. That's not APCA's fault, especially if it provides a genuinely better measure of contrast.
    – zcoop98
    Commented Oct 31, 2023 at 18:30
  • 2
    The goal of APCA and accessibility in general is usability; using APCA in a way that ends up with a less usable, more washed out interface/ experience isn't APCA's fault– it's a fault of losing sight of the end goal while applying the standard.
    – zcoop98
    Commented Oct 31, 2023 at 18:38
4

enter image description here

Can the SE logo be vertically centered? IMO, we don’t need it there, but if it is there, it should likely be centered with everything else

1
4

The colors of the mod tags look a lot like the colors of the staff label on users.

enter image description here

Due to the color changes, I thought the tags were entirely new ones, staff-exclusive. Will this be confusing?

0
4

Some sites look all bleak and blurry now, to the point where it is affecting visibility. When I launched https://electronics.stackexchange.com/ this morning I sincerely thought my monitor was acting up, because the colors and contrast were suddenly all bleak and seemingly of low resolution. I can't really pin-point it, I think it's related to poor choice of font colors on the post headlines, but it seems that all fonts in general are of much lower resolution now somehow.

Whereas https://electronics.meta.stackexchange.com/ looks OK, as does SO etc.

Kindly rollback whatever changes you did to https://electronics.stackexchange.com since it is literally painful for the eyes. As anyone can tell, making the sites less readable isn't an improvement and that's not something that needs discussion or tweaking either - just rollback the changes. The site was fine before.

3
  • I am not following; it looks fine to me. Could you add a screenshot about what you find to be so bleak or blurry, so I can better understand?
    – SpencerG StaffMod
    Commented Oct 20, 2023 at 13:04
  • @SpencerG All of it...? As I said I can't pin-point it or I'd post a screenshot. I just know that as a regular visitor of the site, when I opened the site in my web browser this morning, I thought my monitor was malfunctioning. You'll need a before/after pic to tell, I guess.
    – Lundin
    Commented Oct 20, 2023 at 13:11
  • @SpencerG Maybe just open electronics.meta.stackexchange.com and electronics.stackexchange.com/questions side by side on the same monitor. One looks very nice and readable, one looks bleached and low contrast.
    – Lundin
    Commented Oct 20, 2023 at 13:13
4

Code blocks need darker background on white theme

I can barely see the light gray here.

(Regarding the comments: I haven't performed any color calibration, nor adjusted the display color profile in any way. There are no userscripts running, and this is a fresh Linux installation. I believe a good design should still look ok on consumer-grade hardware.)

pic

4
  • 2
    I think this is similar to your other answer. I think it's a local screen-contrast issue, not a global site issue. Your image here shows the grey as 246,246,246 If I make a new code block here I get 220,220,220, which is perfectly acceptable. I only just spotted your other post also has a screen-cap which is already lighter than the actual site colours, so I definitely think you have a profiling/calibration issue.
    – Tetsujin
    Commented Oct 20, 2023 at 9:10
  • @Tetsujin This is a fresh manjaro install, I didn't touch any monitor settings, color profiles are disabled. I'd wait for more people to confirm what color they get. My only guess is that it could depend on the browser (FF here). Commented Oct 20, 2023 at 9:22
  • 1
    If profiling is disabled… you have no colour-matching in place at all. What you actually see is really nothing more than 'random chance'. No display is perfect out of the box. Even manufacturer-provided profiles are an approximation of many different physical displays.
    – Tetsujin
    Commented Oct 20, 2023 at 9:25
  • 4
    That looks like a perfectly acceptable subtle-background on my setup.
    – DBS
    Commented Oct 20, 2023 at 10:38
4

Least on meta.stackexchange, especially on the front page - the ultra-saturated mandatory tags are glaring Its unlikely to affect any other site - and even if it fits accessibility guidelines, it affects usability of the site for some.

1
4

When you go to a site you haven't previously visited, there is a small introduction.

In the introduction, there is a close button, as shown here:

Dialog with almost invisble X button

Can you see the close button? No? Some cropping has made it easier to find than in the actual dialog. Still no? Here it is:

Same dialog but with the X button pointed out

Please make the close button easily visible.

This point has been raised before and not fixed, but as the colours are new, it may be a new bug.

4
  • 3
    already reported 100% the same, this one isn't related to the recent change so should not be reported here. Commented Oct 21, 2023 at 20:36
  • 3
    It's the sort of thing that revamping the colors to increase contrast should have addressed, but didn't. I think it's legitimate to report here.
    – Ryan M
    Commented Oct 25, 2023 at 0:55
  • 1
    There was an issue with the banner using dark themed colors but the buttons still using light themed colors. We've applied the proper overrides and the issue has been resolved.
    – Carrott Staff
    Commented Jan 9 at 15:25
  • @Carog Thank you :) Commented Jan 9 at 15:55
3

Need darker background for tags on light theme

The tag background is almost white, I have a hard time discerning it from the white background.

(Regarding the comments: I haven't performed any color calibration, nor adjusted the display color profile in any way. There are no userscripts running, and this is a fresh Linux installation.)

pic

6
  • It's pale, but it doesn't bother me. It does its job as a highlight, unlike a lot of the new ones which have been punched up to 'garish'. I see RGB 225,232,239 - i.sstatic.net/Np8S4.jpg
    – Tetsujin
    Commented Oct 20, 2023 at 8:49
  • @Tetsujin Maybe this depends on the monitor. I've had the same issue at work, with designers using increasingly pale colors. :P Maybe the contrast is better or more expensive monitors. Commented Oct 20, 2023 at 8:54
  • 1
    I have a fully colour-calibrated rig here, so I know I'm seeing [to within one digit] what the designers intended. Many displays at factory defaults are over-contrasty [because it makes them look better on the shop floor] & if yours is just tipping towards the lighter end on that pale blue, then yes, it will start to vanish for you. I've mocked up what can happen with an over-contrasty screen - i.sstatic.net/GckvY.jpg - it's exaggerated for emphasis, but I can now just see the pale blue in this.
    – Tetsujin
    Commented Oct 20, 2023 at 9:03
  • I only just noticed your screen-cap here is also lighter than the actual site colours - it should be 229,235,243 - i.sstatic.net/4awUW.jpg
    – Tetsujin
    Commented Oct 20, 2023 at 9:13
  • @Tetsujin Just rechecked without userscripts, and the color stays as it was on my screenshot. Commented Oct 20, 2023 at 9:20
  • 1
    Then you have a calibration/profiling issue local to that machine.
    – Tetsujin
    Commented Oct 20, 2023 at 9:22
2

ref 489

The MathJax wrapping bug is now back after these color changes. Here's an example of what I mean:

A user profile from Math.SE where MathJax wraps awkwardly in the Questions tab

This is the same bug as here, here, and here. Reproduction details: Windows 10, both Chrome and Edge (latest versions as of this post).

2
1 2
3

You must log in to answer this question.

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