71

November 22, 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.



Update (November 14th, 2023):

We rolled out the following fixes last week:

  • Visited links have been made darker
  • Adjusted the contrast on the right sidebar
  • Visited links in the community bulletin have more contrast
  • Corrected the color on the sidebar notice.
  • The text color for unvisited and visited links has been corrected to be more obvious as to which is which.

We are continuing to review feedback and make adjustments based on that and will provide further updates as those are made.


First and foremost, I want to personally apologize for the amount of bugs that occurred due to this initiative. We have a retro planned and will work towards ensuring that this doesn't happen again. You can read more about those aforementioned updates in the original announcement.

Bugs

Thanks to this community, we have caught a lot of bugs. Below is a list of the bugs that we have fixed and shipped:

  • Moderator Tags: Darken type and border color
  • Vote button selected state color
  • Highlight color in achievement notifications are too dark
  • Bounties count copy in dark mode is staying white
  • Review queues tab using incorrect red in dark mode
  • Portuguese SO dark mode rendering incorrectly
  • Question author cards contrast missing
  • Scroll bar not visible in dark mode
  • Count of CM escalations on user profile is low contrast
  • Link text is low contrast against new contributor indicator
  • Topbar in chat.se makes username and mod links difficult to see
  • Increase saturation of dark mode (see below)
  • Clicking on the meta link on any site meta besides MSE creates temporary grey box
  • Watched tags contrast on RPG.se
  • Related and Linked questions in sidebar not using variable white
  • CopySnippet button should not be primary btn

These are things that we are actively thinking about:

  • Visited links
  • Should we add borders to regular tags
  • Required tags should be less intrusive.
  • Tag contrast on deleted posts
  • Tag contrast on watched tags in dark mode

Update to Meta SE Theme

In response to zcoop98's post, we’ve made a change to the SE Meta theme link colors to add more contrast between visited and unvisited links. Below we break down the changes made.

  1. default link color:

    • original #4E82C2 vs new #4179BE
    • we bumped the lightness by 3 so that we could have at least 70LC on a white background (this should be very subtle and almost unnoticeable)
  2. hover link color:

    • original #3969A4 vs new #325C90
    • the new value is close to what the original visited color was, increasing the contrast as a middle stop
  3. visited link color:

    • original #36649D vs new #254874
    • started from the increase amount we have for blue links on SO and increased that even a bit further

Before vs after the new changes to link colors

Updated Dark Mode

We have heard your feedback on the saturation of Dark mode. The original palette that was shared targeted a -70Lc, but we have lowered that to -60Lc in light of feedback. This is much closer to what was shared in round of feedback before launch. We value your feedback and hope that this strikes a better balance of hitting accessibility standards set out by the community while maintaining a pleasant experience.

If this dark mode is still too high in contrast for our default dark mode, we will need to rethink our alignment with APCA for dark mode.

20
  • 19
    Hello - For any more bugs (that haven't already been reported) that are found, would it be better to (a) report them here, (b) report them into the original post, or (c) make a new question for each? I can do any of those, but I'd like to know what you (or SE?) would prefer we do...
    – cocomac
    Oct 26, 2023 at 20:11
  • 2
    Amen, I'll vote for any progress you can make on the dark theme on SO. Eye-strain with that theme is really bad. The bright-outlines and the use of blue for links, tag backgound, etc.. on the Top Questions list makes it tough to get through. Add some 55+ year old users to your beta team -- they will tell you real quick. It's much harder on older-eyes than the original. Keep up the good work -- and beta it next time :) Oct 27, 2023 at 6:21
  • 7
    @cocomac Just so we don't have to keep watching multiple posts, let's put any new bug reports on this one.
    – SpencerG StaffMod
    Oct 27, 2023 at 14:06
  • 32
    Please rethink your alignment with APCA for dark mode! The current stackoverflow.com dark mode, with washed-out pastel colors, is visually unappealing and totally off-brand. I find it worse than the old dark mode in every single way. The original dark mode had actual primary colors like oranges and reds, while the new one has all these pinks and bright blues everywhere. If people wanted high contrast, there was already a high-contrast theme for the site.
    – mbaird
    Oct 27, 2023 at 15:35
  • 3
    When does this roll out? I haven't spotted any changes in the glaring new 'punchiness' in any of the areas I'm watching. [I'm not watching dark mode, I'm not a troglodyte;))
    – Tetsujin
    Oct 27, 2023 at 17:38
  • 7
    I appreciate the update, but splitting the issue into two questions only serves to divide attention. Also there are 76 answers on the original post and you have listed 16 bugs that have been addressed. Perhaps establish a single post to serve as status update for bug tracking? And create a comprehensive list of bugs, feature requests, and aesthetic concerns that the community can see?
    – pilchard
    Oct 28, 2023 at 11:36
  • 6
    Unvisited links are low contrast. Visited links(this post) are nearly black. I would expect this design to be the opposite: visited links should be the lighter color. The dark blue highlighting in the "help" tooltip is too dark and low contrast. The lighter grey text in the box is also lower contrast. Things were already made harder to read when the change to platform based fonts, at least for browsers on Windows. All in all, these choices make things harder to read.
    – Booga Roo
    Oct 30, 2023 at 23:19
  • 5
    One would have thought Stack Exchange had learned their lesson with the accessibility "improvements" made to the voting icons. Clearly not... Nov 9, 2023 at 21:04
  • 2
    You really need a slider before and after for these kind of image comparisons.
    – Daviid
    Nov 10, 2023 at 12:16
  • 5
    Wasn't forcing us all to have boring-looking near-identical sites supposed to stop precisely this sort of ship-it-and-hope-it-looks-ok thing from happening again?
    – Richard
    Nov 11, 2023 at 18:45
  • 4
    @SpencerG those are pretty... minor, changes. Appreciate this, but take a look below please. There is answer with 31 upvotes, which reports a very clear and very annoying bug, that cause element to be almost invisible. It was not fixed, and didn't get any attention i.e. no feedback saying staff even noticed it. Same for most of the below answers. This gives a feeling that, well, the sentence "We are continuing to review feedback and make adjustments based on that" might not hold much. I mean, what feedback exactly is being reviewed? Which isn't, and why? Nov 14, 2023 at 17:54
  • 3
    @ShadowWizardIsSadAndAngry We have logged every piece of feedback left on this question and the previous post. The one you referenced is particularly tricky to fix and is still being worked on. There will continue to be fixes and updates to the bugs flagged here. I can appreciate that it may not be happening as quickly as you like, but we are continuing to work on them.
    – SpencerG StaffMod
    Nov 14, 2023 at 18:12
  • 3
    @SpencerG thanks, but sometimes status-review is being added to such "feedback answers", and sometimes not. So it can become very confusing. and lack of any visible feedback like that means we have no way to really know it's being seen, hence my bad feeling. Nov 14, 2023 at 18:19
  • 2
    Kudos to lowering dark mode to -60Lc - it is much, much easier on the eyes now. Wow, what a rough debut, but the combined voices of all produced a better product. (a feedback system really does work :) Nov 15, 2023 at 1:36
  • 4
    I wonder who on Earth thought that this dark mode was okay. It almost made me sick (literally) just looking at it. The contrast was the worst I've ever seen on any major website.
    – Robo Robok
    Nov 17, 2023 at 14:24

22 Answers 22

42

ref 475

The Add button in "Your Communities" is very difficult to see. I haven't edited my communities list in a long time so I don't know if this is due to the latest colours update.

enter image description here

9
  • 1
    According to the screenshot here, most likely it is indeed result of the colors change, or previous not-so-long-ago design change. Oct 28, 2023 at 7:18
  • 32
    btw there also a "Reset" button at the bottom Oct 30, 2023 at 18:37
  • 18
    @αλεχολυτ Where? ;) Oct 30, 2023 at 18:39
  • 1
    Next to "Save" button Oct 30, 2023 at 19:01
  • 1
    Thanks for reporting, both button issues (save and reset) have been logged. I'm told this issue is a bit trickier but I'll aim to have it fixed soon since the legibility is really bad.
    – Carrott Staff
    Nov 20, 2023 at 23:41
  • @Carog how did the colour of a button end up being a tricky thing to change? I know web development can be finnicky, but that's honestly quite surprising.
    – T. Sar
    Nov 22, 2023 at 21:54
  • 1
    @T.Sar I was just as surprised as you were. It's the area of code this button lives and how theming gets intertwined in there. Our developers have a suspicion of the issue but need to investigate further to be sure. Different areas of code require different code reviews and approvals which add more layers complexity sometimes, it's all part of the fun. Happy to share more details if I get the specifics once resolved.
    – Carrott Staff
    Nov 22, 2023 at 22:10
  • @Carog ~40 days later, any updates? Jan 2 at 7:19
  • 1
    @ShadowWizardLoveZelda It's fixed! I was out of office so was unable to update the status of this post until now. Thanks for the reminder. The fix was done before the holidays but it likely only got pushed to production last week.
    – Carrott Staff
    Jan 8 at 15:20
30
+50

ref 486

Difference in high contrast dark mode code reviews is impossible to see

Here is how a review looks in high contrast dark mode:

Showing a diff in high contrast dark mode. Left is in red, right is in green. There is no indication of what was changed between left and right.

Compare this with the same review in regular dark mode:

Showing a diff in regular dark mode. Left is in red, right is in green. There is VERY CLEAR indication what was changed between left and right.

In particular, the addition is the issue. The regular background for "added" is var(--green-100) (from a rule with selector .full-diff .inserted > div) which resolves to rgb(34, 63, 47). The colour of the background of the added text (the part that says ^image in the left) is var(--green-200) (from a rule with selector body.theme-highcontrast span.diff-add) which also resolves to rgb(34, 63, 47).

3
  • 11
    This suddenly made me realise that diffs are probably hell for anyone with red/green colourblindness. I wonder if there's an option to switch them out on the renderer with different colours
    – Robotnik
    Oct 31, 2023 at 21:57
  • 2
    I believe this was an issue in High Contrast mode before the color changes were implemented but now it's slightly worse. We have less variations of red and green but still need to meet a 7:1 ratio for text in HC mode. I've logged the issue but I think we might have to take a custom approach (as suggested by @Robotnik) with what colors we can use here.
    – Carrott Staff
    Nov 21, 2023 at 23:16
  • 1
    @Carog "I believe this was an issue in High Contrast mode before the color changes were implemented but now it's slightly worse." Before the colour change, I could see the diffs. If you mean "the difference wasn't as sharp as as we wanted" then perhaps that's true but it was clearly visible. I strongly disagree that it's "slightly" worse.
    – VLAZ
    Nov 22, 2023 at 6:40
28

Thanks Piper. With regard to dark mode, I still feel like there is not enough contrast between links to questions and links to tags. For example, compare what it (more or less) looked like previously on a question list page (on the left, below) vs how it looks now on the same page (on the right, below)

comparing the old main page with the new to show wash-out effect of link colors

While the question titles and tags are both technically links, their importance on pages like this is completely different. Almost always someone is going to want to visit a specific question from this page rather than a given tag's page. And yet, on the new layout, the same color being used for the text of the title and for the text of the tag creates a 'washed out' effect that distracts me--it also makes me feel like I'm in high contrast mode, when I'm not.

Having something closer to the old look would be better, in my opinion.

3
  • 13
    This is a symptom of trying to reduce the amount of blues on the site. The tags used to be a different blue (aka powder). I see what you're saying though. Let me toss this back to the group and have them brainstorm.
    – Piper Staff
    Oct 26, 2023 at 19:43
  • I went with a gray 1/2 way between the normal question and the lighter background for those in your watched-tags list for the tag background. That made it much, much better. Oct 27, 2023 at 6:22
  • 5
    Not to mention, the newer font color on the right makes me think I have visited all of those questions, because it is a light blue.
    – TylerH
    Oct 30, 2023 at 15:53
22

ref 473

Black text on red background is hardly readable on the flag page for spam, rude or abusive flags:

Unreadable text

5
  • 6
    I'd close that page immediately, never to return:\ It looks like geocities in the early 90s.
    – Tetsujin
    Oct 28, 2023 at 18:04
  • 2
    @ShadowWizard it's the same page for mods as well as for regular users Oct 30, 2023 at 11:12
  • 3
    @ShadowWizardIsSadAndAngry - yup, it's the same for everybody. It's kind of OK on white - I mean, it's shouty, but it's on a page all about shoutiness really. it's just on black it looks like something from 1992. All it needs is a scrolling marquee & some animated emojis ;)
    – Tetsujin
    Oct 30, 2023 at 13:08
  • The spam/abusive flags section of the mod dashboard has the same color scheme, and it is similarly hard to read.
    – Ryan M
    Oct 30, 2023 at 21:17
  • 2
    Thanks for reporting, oof this is pretty hard to read. Seems we were using a custom red for this element (for some reason) instead of the red from our design system. The issue has been fixed.
    – Carrott Staff
    Dec 7, 2023 at 19:20
17

OK, after my earlier comment, I now see the changes… I can't say it's any better, just different.

Subtle areas of colour are now eye-wateringly distracting. It seems too much emphasis has been on dark modes & light mode now looks like a kid was let loose with a paint box, or threw Jelly Tots randomly at pages. Any subtlety is gone, we've got bright splotches of colour everywhere.

My first meta post about the hideous new colours was part-fixed as a bug… Did the purple highlight just get worse? but fixing the bug didn't fix the colour scheme, only subdued it very slightly.
I've raised a post on music meta to have the colour scheme changed to get rid of the purple highlights altogether. Can we ask staff for a new colour scheme?

This really is now the worst colour scheme on all the sites I'm regular on.
tbh, the front page you see as you enter is fine - it's just as you get deeper into the rabbit hole. Even the hideously bright new Meta section doesn't hurt - as it's the only site with a yellow themed banner, so it doesn't immediately claim your entire attention.

The generic blue on many sites has also had a bad colour punch, but it's not quite so bad as the purple.

Note: Graphic Design have no truck with any of this - blacks & greys, with an amusing hint of cyan as a nod to the printers. Photography don't even have the cyan, even better. Subtle.
I wonder if we should ask them…
Just on the contrary to show it can be done right, even recently - Sound Design just got its 'graduation' colours last year - & it's lovely.

1
  • 1
    lol, I'd not looked at Graphic Design. So simple and readable.
    – pilchard
    Oct 28, 2023 at 18:06
16

Enter image description here

Copyright information is not visible clearly on the Physics Stack Exchange site.

1
  • 3
    Thanks for reporting, we've made updates to the text colors within the footers on our default themes and some custom themes (including Physics). The goal for these changes is to have a minimum of lightness contrast value of Lc60 on all text within the footer.
    – Carrott Staff
    Nov 20, 2023 at 22:36
15

The current user's username seems to be less contrastful with the card background. This is an accessibility concern. Could you please change it so that the readability is maintained? The related image is below.

currentuser card color less contrastful with background

Thank You.

2
  • 2
    This should have been fixed yesterday. Let me dig and see why the fix didn't work for the Math SE
    – Piper Staff
    Oct 27, 2023 at 13:41
  • 3
    @Piper It now looks too light here on this site. The contrast between the highlight and the white background is now too low, and it now takes more effort to see if a given comment or answer was posted by the question author. Oct 29, 2023 at 7:23
15

ref 493

Highlighted links have inconsistent visited and unvisited underline colors.

Stack Overflow: light mode

Stack Overflow light mode link color inconsistencies

Stack Overflow: dark mode

Stack Overflow dark mode link color inconsistencies

5
14

The 'compulsory' meta tags should not just be lighter; they should be a different color that isn't the same as the bounty label.

For example, the bounty indicator +100:

The 'compulsory' meta tags should not merging with bounty label

They look too similar to each other now.

7
  • 2
    There's enough spacing, so I don't think it's a bug. If you mean you want the bounty amount color to be different, please clarify and this is a feature request. Nov 8, 2023 at 12:00
  • 1
    @ShadowWizardIsSadAndAngry I have edited post. Nov 8, 2023 at 12:56
  • 5
    I completely agree with you that having both pieces of information presented the same way visually, despite them not being related or having the same level of importance to the reader, is odd, and makes it collectively harder to parse.
    – zcoop98
    Nov 8, 2023 at 16:42
  • 2
    It looks like that is something they are thinking about. In the post is listed "Required tags should be less intrusive.". Hopefully they differentiate from the bounty indicator. Nov 8, 2023 at 17:29
  • 2
    Yes, we're looking at the style for required tags altogether. I'll add a note that the current style also matches the bounty label style (which I agree feels a bit odd in this scenario).
    – Carrott Staff
    Nov 20, 2023 at 23:12
  • 2
    Related post about style of required tags
    – Carrott Staff
    Nov 20, 2023 at 23:18
  • 1
    A new tag style has been released, we've included a new required tag as part of the change that does not match the bounty label. More details here
    – Carrott Staff
    May 21 at 14:25
13

Should visited and unvisited links in Hot Meta posts have their colours swapped?

Here's a screenshot of what I mean:

Hot meta posts section screenshot

Can you guess what links are visited? Spoiler: top three are visited, and the bottom one is not. Usually colours work vice versa: visited links have less contrast than unvisited, engaging clicks on new links.

This concern applies both to dark and light modes.

7
  • 3
    This is already posted on the previous question but since it is such an obvious bug, and because they chose to split the topic into a new question I think noting it again is worthwhile. Also somewhat related to my answer on this question.
    – pilchard
    Nov 8, 2023 at 17:42
  • @pilchard sorry, failed to notice this report on previous question. I swear I looked through answers there! Nov 8, 2023 at 17:48
  • 1
    This is also somewhat mentioned in this question too. Listed under "These are things that we are actively thinking about" they have "Visited links" Nov 8, 2023 at 18:00
  • 2
    @CaveJohnson definitely worth noting, but given the number of times it's been reported now, and the rest of the internet, I can't imagine what there is to think about. 🤔
    – pilchard
    Nov 8, 2023 at 18:27
  • 1
    Did they change this? I think those colors are now switched for me. Nov 9, 2023 at 14:26
  • 1
    @Michael seems so! Nov 9, 2023 at 14:31
  • 1
    An update did go out to make this switch for black/grey links. I've marked this as completed.
    – Carrott Staff
    Nov 22, 2023 at 21:41
12

The background of close and flag modals is too bright in high contrast dark mode

The background of the close and flag modals is quite a light grey compared with the normal background. The sub-text in the options is both smaller and also a light grey, which makes it a bit hard to read in some cases:

High contrast dark mode with close dialog open. The regular background is black, while the background of the close dialog is a grey which sticks out a lot.

Compare this with a screenshot I have of the previous high contrast dark mode colour scheme (before the 2023-10-19 update):

Old high contrast dark mode with close dialog open. The regular background is black, and the background of the close dialog is a dark grey which is essentially also black but can easily be distinguished as a separate element.

12

The buttons are different sizes under runnable snippets.

The two-button version only seems to be on questions with snippets, not answers. Both buttons used to be the same size after the color palette update, as shown in this post that asked for the icon contrast to be increased. The comments mention unprimarying the second button is done, but do not mention an icon change.

The icon seems to be different now. Maybe the new ⏵ one is taller than the ⧁ was? The text is no longer vertically centered in the button.

Time Screenshot
Before new palette ???
After new palette Screenshot
Now Screenshot
1
  • 2
    Thanks for reporting. There's a class missing on the button with an icon that will fix the spacing issue. I've logged it with the appropriate team but it's likely a low priority (even if an easy fix).
    – Carrott Staff
    Nov 20, 2023 at 23:07
9

Dark mode border colors are way too bright:

Stack Overflow

Just to show the difference between Stack Overflow dark mode and other websites, here is the GitHub website dark mode:

GitHub dark mode

9

The shades of blue at https://<site>.stackexchange.com/users/current?tab=bounties don't match:

enter image description here

The rest of the site now uses the darker shade.

8

Although this rather annoying bug seems to have been fixed, most of the bugs that are most pressing in high-contrast dark-mode do not seem to have been fixed. The close and flag panels in addition to the 404 page (also review pop-up panels) are still of a low-contrast style even with high-contrast mode enabled. Please fix the inconsistent/low contrast elements in the high-contrast mode.

6

The background on the reputation page is too bright in high contrast dark mode

Reputation changes in high contrast dark mode. There is a stark difference between the regular background of the page (black) and the background of reputation entries (light grey).

This would be fine if these were highlighted. But this is just a regular view of the page, this is when the entries are highlighted (when new):

Reputation changes in high contrast dark mode with highlighting. There is a stark difference between the regular background of the page (black) and the background of reputation entries (yellow-ish).

The background makes all entries stand out a lot more than in regular dark mode:

Reputation changes in regular dark mode. There is a small difference between the regular background of the page (dark grey) and the background of reputation entries (lighter grey).

or light mode:

Reputation changes in regular light mode. There is a small difference between the regular background of the page (white) and the background of reputation entries (very light grey).

or high contrast light mode:

Reputation changes in high contrast light mode. Small difference between the regular background of the page (white) and the background of reputation entries (very light grey).

6

ref 488

Comment help has black on dark blue - which seems at odds to 'better contrast'

enter image description here

1
  • 1
    Thanks, this has been reported already on the original post and logged with the team.
    – Carrott Staff
    Nov 23, 2023 at 15:43
5

ref 488

For Collectives, the Markdown help is white on light blue. The same bug applies to clicking the Help button when writing a comment to show that markdown help.

Can the font color or background be changed to something different? I'm not a fan of white text on a light blue background.

Screenshot of Discussions feature with help box containing white instructional text on a light-blue background

7
  • 1
    Seems like it could be the same styling as the comment guidance.
    – Laurel
    Nov 27, 2023 at 20:38
  • related(?): meta.stackexchange.com/a/394150/997587 ref 488 Nov 27, 2023 at 20:41
  • @starball yeah looks the same issue, but probably in two different places in the codebase so fixing one won't fix the other. Nov 27, 2023 at 20:44
  • 1
    Correct, it is the same issue just in dark mode. We need to change the shade values on the highlighted text's background color so that there is enough contrast. The value change will happen in dark and light modes, High Contrast will get it's own fix as well.
    – Carrott Staff
    Nov 28, 2023 at 14:54
  • 1
    @Carog I see same ref as here and here, does it mean it will all be fixed in one go? Nov 28, 2023 at 15:02
  • 1
    @ShadowWizardIsSadAndAngry Yes, it's the same issue.
    – Carrott Staff
    Nov 28, 2023 at 15:13
  • @Carog so that number is the commit number? Neat. :) Nov 28, 2023 at 15:21
5

The contrast for "Looking for your Teams?" may be lacking depending on site colors. For example, here's Biology:

teal text on slightly different teal background

And there's Worldbuilding with this custom graphic, which can cover up the text depending on where you scroll:

Robot image over button, not quite obscuring text (yet)

1
  • Just make us look harder for our team... ;-) Dec 3, 2023 at 7:41
4

Footed background is indistinguishable from regular background in high contrast dark mode

Both regular background and footer background are completely black. The exact same shade: rgb(0, 0, 0):

The page looks like a contiguous black block.

Compare with the other colour schemes

Regular dark mode

The page has a clear distinction between the grey regular background and the black footer background.

Regular light mode

The page has a clear distinction between the white regular background and the black footer background.

High contrast light mode

The page has a clear distinction between the white regular background and the black footer background.

3

The phrase Stack Overflow isn't visible in dark mode:

SO

0

The scrollbar isn't dark themed, which can be fixed with a line of CSS.

:root {color-scheme: dark;}
2
  • 4
    FYI: the team generally stops monitoring announcements for answers a month after it's posted. I'd delete this answer and post this as a new question. Feb 17 at 3:11
  • 2
    I am here @SonictheAnonymousHedgehog. I'll get this over to the team and see what they think. Thank you both!
    – Piper Staff
    Feb 23 at 15:24

You must log in to answer this question.

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