Update: New Colors Launched

Question

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

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.

Answer 1

status-completed 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.

Answer 2

status-review 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:

Compare this with the same review in regular dark mode:

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).

Answer 3

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)

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.

Answer 4

bugstatus-completed ref 473

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

Answer 5

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.

Answer 6

status-completed

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

Answer 7

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.

Thank You.

Answer 8

status-planned ref 493

Highlighted links have inconsistent visited and unvisited underline colors.

Stack Overflow: light mode

Stack Overflow: dark mode

Answer 9

bug status-completed

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:

They look too similar to each other now.

Answer 10

status-completed

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

Here's a screenshot of what I mean:

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.

Answer 11

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:

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

Answer 12

bug status-planned

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
Now

Answer 13

Dark mode border colors are way too bright:

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

Answer 14

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

The rest of the site now uses the darker shade.

Answer 15

bug

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.

Answer 16

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

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):

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

or light mode:

or high contrast light mode:

Answer 17

status-planned ref 488

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

Answer 18

bugstatus-planned 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.

Answer 19

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

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

Answer 20

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):

Compare with the other colour schemes

Regular dark mode

Regular light mode

High contrast light mode

Answer 21

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

Answer 22

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

:root {color-scheme: dark;}