Recent color contrast changes and accessibility updates

Question

Last month, we kicked off an initiative around accessibility. We made the announcement on MSO because originally we had intended for the rollouts to only happen on SO and on the Teams product. Once the work on this began, we realized it made sense for some changes to be deployed network-wide. We were able to be a little more ambitious than we had planned and decided to take advantage of that, since the changes that we could make network-wide will benefit more people.

We started rolling out some color contrast changes. The community noticed some of these changes last week, particularly around accepted answers. We’re sorry that we didn’t announce those pushes would be network-wide prior to them going out. That was an oversight, and we’re trying to get better at making sure we can give you a heads up on changes.

As the team has been working on this project, we’ve run into some issues around color hacks, legacy code, etc. We have decided to put a pause on this initiative and future updates so that we can sort that out.

Some of the color contrast changes that have been deployed network-wide, or will be deployed soon, are:

• Post Summary:

  • The answer count was updated to a darker green

  • Ignored: the opacity was removed, the text was lightened, and the answer count was updated

  • Deleted: the opacity was removed and the background and text were lightened

  • Watched: the text and title were darkened

  • View counts: three classes were updated: “warm” (orange to yellow), “hot” (medium to dark orange), and “supernova” (orange to red)

    

(full image)

• The accepted answers checkmark was updated to a darker green:

  

• Comments: The number of votes was updated to a darker grey, and the text was darkened on the character limit counter:

  

• Our "cool" class needed increased contrast, so the color was darkened:

  

• Mod flag: The background color was darkened:

  

• Right sidebar: Increased text contrast in the top yellow module and the watched tags module:

  

  

Thank you for reporting concerns about deployments and reporting bugs that you’ve spotted. The team is reviewing that feedback. We’re actively thinking about accessibility and how to resume this work in the near future. Taking this pause will allow us to fine-tune the approach to these important changes based on what we’ve learned so far.

As Rosie mentioned in the original MSO post, a core part of our mission is that our products and tools empower people to find what they need to develop technology. We want the platform to be a space where everyone can easily access the information they are seeking. We will come back to Meta in the near future with the new plan and timeline once it’s been solidified. We’re looking forward to working on these improvements with you.

Answer 1

tldr: I'm not happy the community wasn't consulted in any level at first, and that accessibility design changes need to be more holistic, rather than trying to pass an audit on its own sake.

A couple of points

We’re sorry that we didn’t announce those pushes would be network-wide prior to them going out. That was an oversight, and we’re trying to get better at making sure we can give you a heads up on changes.

This is deeply annoying, considering historically there's been situations where the broader, non-SO community has been ignored. Even inadvertently, this hurts.

Something like this ought to have been on the main meta and featured. I wouldn't call it unforgivable, but it's certainly something that ought to be a learning experience on what not to do and a standard process for making network-wide changes. I am, at the very least rather disappointed.

From the comments - there's one that is of interest here

From here

Accessibility improvement work is ongoing. As mentioned in the initial SO post, this current initiative's scope is based on a third-party audit that was done earlier in the year. Some of the long-standing requests may be addressed as we move through that work, and some will need to be assessed in a future stage, or as part of other projects. We're taking the long view here, and having the community continue to identify particular issues is extremely helpful

Historically SE's done great work, even though the 'dark ages', of testing changes like these through community members. I'm not a developer but I do recall from school that user acceptance testing ought to be part of the development process. Auditors don't use the site day to day—they're checking against a set of rules I'd guess (and while you're probably lucky enough not to get this one), occasionally not to be trusted. While accessibility redesigns are welcome, it's worth remembering the folks who spend many hours here have their own design needs, and are trying to find a balance.

Considering it’s already possible to roll out design changes to meta first and feature a post, you already have a way to do user acceptance testing and feedback without needing to do a massive amount of additional work.

There are a few cases where the design might be more accessible in terms of 'the rules' - but the design goal, to make things less obvious might be forgotten.

With the darker green - while it might fit the guideline, the 'old' green wasn't meant to stand out hugely, just be a state differentiator. It was subtle on purpose, and consistent with the green we use elsewhere including the top bar.

Changes are controversial - and I do realise a good chunk of 'why' stuff was changed might be lost and forgotten over time, and sometimes critique seems harsh (I've been guilty of that myself, though I ended up getting what I wanted)—it's a reflection of the fact that we care deeply and are passionate about the network.

Answer 2

What happened with ignored tags?

The design change summary here lists

Ignored: the opacity was removed, the text was lightened, and the answer count was updated

This change was reported as a problem, as questions with ignored tags now mostly blended into the list of other questions:

Ignored tags no longer gray out the questions

The answer then says that an additional change was shipped on 2022-09-13 that made everything in the post greyscale. Most notably, the tags themselves would have a grey background. This change is not mentioned in the text I quoted, yet it is demonstrated in the screenshot slightly further down:

I can confirm the change was live that at least made an attempt to make questions with ignored tags easier to ignore (yet maybe not easy enough)

As of writing this (2022-09-16) it seems the fix talked about in the answer has been reverted.

The announcement here only talks about the initial change. What happened with the fix? Are there any plans of fixing ignored tags even more, so they are easier to visually distinguish? Is that not a direction that is going to be considered?

---

Follow up: High contrast dark mode tags now blend into the background

Answer 3

In dark mode, visited links are lighter than nonvisited links, and this throws me off every time after visiting a couple of questions. Can this be inverted?

Answer 4

I would like to address Berthold's comment:

I can't speak to whether or not that specific green might change again, there are many factors that contribute to these decisions.

I hope opinions of the community members too is one of those "factors". I would like to give a few good examples of discussions with the community before implementing new features:

• Unpinning the accepted answer from the top of the list of answers

  Accepted answer was unpinned on Stack Overflow based on a test. The company could have done the same to all communities, but that didn't happen. Instead of imposing an SO-specific change on all SE communities, the company left it for the individual communities to decide if they want to change the answer-pinning based on community consensus through discussion in per-site metas. This is laudable!

  The recent accessibility related updates takes a completely different approach compared to the answer-pinning.

  We made the announcement on MSO because originally we had intended for the rollouts to only happen on SO and on the Teams product. Once the work on this began, we realized it made sense for some changes to be deployed network-wide.

  I understand that making the site more accessible is an important thing to do, but deploying changes network-wide should only be done after taking input from at least few users. Instead of rolling out the accessibility related changes network-wide, this could have been MSO specific or MSE specific such that the users could share feedback. After receiving feedback from MSE/MSO users, comprehending the feedback, implementing necessary feature-requests requested by the users, fixing bugs, only then the changes should be rolled out network-wide. Beta-testing is always needed when features which play a crucial role for normal users are updated/modified.

  I understand that you can't take feedback from per-site metas for making accessibility-related changes like you did for the answer-pinning, but please do the beta testing at least in one site before deploying changes network-wide.

• When the community members gave feedback about Changes to answer sorting menu: moving menu, "Newest" sort option, renaming sort options, the company went back to the drawing board and came up with this Revisiting changes to answer sorting menu: better use of space, moving menu into a dropdown, ascending/descending sort options, clearer descriptions. That's nice, right?
  _Source

---

I understand that your intentions are good, accessibility is important! But, SE is functioning because of the community and community consensus; please respect them.

Answer 5

What happened with ignored tags?

Part 2: High contrast boogaloo

I already reported that the tag change that was fixed apparently got reverted. Confirmed by Dan Cormie in a comment to my post. The comment also said:

We’ve reintroduced the fix in a next version that will be deployed by early next week.

It seems some fix is already live:

However, it is not the same fix as before. Here is how it looks in high contrast dark mode:

Now, the background is almost entirely black*.

Which definitely was not the case last time a fix was applied that changed how tags were shown. I do not have a screenshot to show it but the background there was grey.

---

* Fun fact, the background of the question is rgb(0, 0, 0). The background of the almost entirely black tags is rgb(12, 13, 14). This makes them stand out more than watched tags in high contrast dark mode where the background is set to rgb(6, 6, 7).

Answer 6

Does this project continue? It has been almost two months since this announcement and I am not aware of any updates to the UI that are to do with accessibility.

As a high contrast dark mode user, I am particularly interested if it will be updated to make some parts more contrasting. There are multiple areas where there is barely any distinction. And a lot of times it is not even noticeable.

For all intents and purposes, dark mode and high contrast seem to have been abandoned as projects. I hope this accessibility initiative does not get similarly left behind.

Answer 7

If this change was about improving accessibility then there is a long way to go. The Wave tool has been available for years and although not everything that is flagged can or should be addressed it is a good place to start.

This page shows 22 errors and 255 contrast errors. This includes 3 missing form labels which should be easy to fix, 9 broken ARIA references and 7 broken ARIA menu items. Most of the icons seem to be classed as low contrast which may not be easy to fix.

I would expect that the missing form labels and broken ARIA references should be at least as important to fix as the color of checkmarks

Answer 8

I am satisfied with the darker green as it allows me to read without straining my eyes. Maybe it is a tad too strong, comparing to the one we had previously before it was changed to lighter one back in 2019, but I am not going to nitpick. See Bring back the deeper-green rep change color

However, that new darker green color has been applied only in some places, while other still have lighter, unreadable green color. For instance, reputation on profile pages. Please replace that light green in all other places, too.

Answer 9

View counts: three classes were updated: “warm” (orange to yellow), “hot” (medium to dark orange), and “supernova” (orange to red)

Two things:

1. Shouldn't the progression be yellow > orange > red? The way it's phrased yellow precedes orange in the "warm" category.

2. If "heat" is the overarching theme of the view counts I think the new saturated colors are just shades of dark, most view count colors aren't warm anymore.