Accessibility Update: Colors

Question

As you may already know, we were working on accessibility last year. We took a break about a few months ago to assess how we were approaching the problem and rethink that approach. We never want to sacrifice usability for accessibility. Both are very important at Stack Overflow. With that in mind, we decided to more methodically and systematically approach accessibility so that we are ensuring that no one’s experience suffers. Our goal here is to be more inclusive, not less.

Next Step: Colors

Instead of going in and fixing colors one at a time, the Stack Overflow designers plan to redefine the colors within our design system, Stacks. This redefinition should allow us to do the following:

• Create brighter, accessible friendly colors instead of all colors simply being dark and mundane
• Ensure colors that pass contrast in light mode also pass in dark mode
• Create wider coverage more quickly instead of designers and developers fixing contrast issues one element at a time

We’ve gone through the site and tried to identify colors that are currently used to convey some sort of meaning. We’ve identified the following colors: Orange, Blue/Powder, Red, Green. Orange is used to represent our brand. Blue is used to represent links, buttons, and status. Red is used to represent errors. Finally, green is used to represent answers, status, and success. Do you agree with these colors? We will design our new color system around these and share what we come up with alongside comps (mockups) of what those new colors may look like across Stack Overflow, Stack Exchange, and Teams.

Beyond

While the design team steps away to focus on colors, our Community Managers are working to go through the backlog of accessibility requests from Meta Stack Overflow and Meta Stack Exchange. This will help us determine next steps regarding accessibility. We appreciate your patience and input during this process. It is incredibly important to our designers to create equal access to knowledge and enable learners from all levels and backgrounds and we will continue to keep you updated as we progress through our work.

Answer 1

My current research focus is readability and accessibility of web content. As an invited expert of the W3C/AGWG (World Wide Web Consortium Accessibility Guidelines Working Group) I've been involved in co-authoring the future WCAG 3 (W3C Accessibility Guidelines 3), namely contrast/color related specifications. I'm a Color Scientist at Myndex Research and the creator of APCA (Accessible Perceptual Contrast Algorithm) Methods and Guidelines.

That said, I'll chime in with a few thoughts. Opinions expressed are my own and do not necessarily reflect those of the W3C or AGWG.

We never want to sacrifice usability for accessibility

Well good! Because usability is accessibility. Or vice versa.

The whole point of accessibility is to make content easy to read, understand, and interact with. For everyone.

If you ever feel that you're sacrificing usability for accessibility, then something is very wrong.

• Create brighter, accessible friendly colors instead of all colors simply being dark and mundane

Yipe! "Brighter" does not necessarily mean accessibility friendly. For instance, a layout that is filled with lots of bright saturated colors all over the place can be cognitively overstimulating for some.

And a bright white background behind text in light mode is fatiguing.

As for "accessible colors", that can have more than one meaning—see the "Deeper Dive" below.

• Ensure colors that pass contrast in light mode also pass in dark mode

1. Use adjusted colors, don't try to shoehorn a color into working for both modes as you'll find it very frustrating and end up with non-accessible results, not to mention:

2. WCAG 2.x contrast math does not work for dark mode, use APCA instead for dark mode (or all modes).

   • If you have a rare legal requirement, like Ontario, that requires strict 1.4.3 compliance, then use WCAG 2 or BridgePCA for light mode, and APCA for dark mode, as WCAG 2 only requires one mode.

3. It is usually best to maintain the same or similar hue for interactive controls between modes for cognitive reasons.

   • The inverted or negative look can be very confusing.
   • but a deep red for light mode needs to be a light red or pink to be used with dark mode.
   • pure red or pure blue needs to be the darkest color in a pair of colors.

And now a deeper dive:

Readability and Accommodating CVD User Needs

User needs follows two broad categories

• READABILITY requires good acuity and contrast sensitivity
• DISCERNIBILITY requires color discrimination and recognition

Reading
With or without color vision deficiency (CVD) all visual readers require ample luminance contrast for fluent readability. Those with CVD do not need any extra or different consideration when it comes to luminance contrast, the singular exception would be red against black for those with protan, as they see red darker they lose luminance contrast for the specific case of red against black or red against a dark color.

All vision types need very good luminance contrast because the high spatial frequency of text, especially body text, has a much lower threshold of contrast sensitivity. Color contrasts, as in hue or chroma, do not play into readability, except if they interfere with luminance contrast or cause chromatic aberration.

As such, the content author need only to make sure that all sighted users have ample luminance contrast for readability, based on the importance of the use-case of the particular text. The only CVD need is prohibiting text that's red against black for protan, and avoiding color pairs that interfere with reading.

Discerning
CVD do have functional problems differentiating some hues, and therefore a user need towards discerning differences between items, particularly for things like color-coded data on a map.

For this reason, the single most important thing to do is to ensure that there is something other than pure color communicating the information. Color, as in Hue and colorfulness, should never be the sole means of communicating information.

This is important for all forms of vision, and all visual users. For instance cultural differences may result in different color interpretations, so rely on non-color dependent indicators to accommodate all visual users.

Accommodating color-coding in non-text largely requires that all color-coded information is discernible and understandable without the color (hue) being present, in other words, make it a functional design in black-and-white first.

"make it right in black-and-white"

---

Accommodating reading

The content author need only to make sure that all sighted users have ample luminance contrast for readability.

Accommodating differentiation

All color-coded information must be understandable without the color being present.

Color as in hue is a useful tool to enhance information,
but not to be the sole source of information.

---

Dark Mode

It's important to remember that the contrast calculation in WCAG_2.x cannot properly calculate for dark mode. SC 1.4.3 is not at all suitable for dark mode. Take a look at this comparative example:

Bridge PCA, APCA-W3, or even DeltaPhiStar can calculate for dark mode much more effectively.

APCA Brief Overview

For the quick intro to modern perceptually uniform contrast, see "Why APCA"

The FAA study on accessible color palettes

rosap.ntl.bts.gov/view/dot/57220
You might find the FAA's study on accessible colors for video displays interesting, at least to skim over.

Modern Color/Contrast Theory

The Realities And Myths Of Contrast And Color
A plain language, as brief as humanly possible yet in-depth primer to vision, color, and contrast for design, with an emphasis on typography and readability needs. Published at Smashing Magazine.

Opinions expressed herein are mine and do not necessarily reflect those of the W3C.

Answer 2

Thank you for making this an intentional part of the site design! As someone with red-green colorblindness, I find the use of red and green to denote opposite meanings to be tough to distinguish sometimes. Using blue in place of green helps tremendously. I know red-green colorblindness isn't the only form, but it's the most common one out there (it actually consists of 4 types: protanopia, protanomaly, deuteranopia, and deuteranomaly).

If colors can't be changed, increasing the area that a color covers is probably the next best option. E.g. using bold fonts instead of thin ones. As an example, it's hard to name the color of the "Discard" text at the bottom while I'm writing this answer:

Based on cultural and context clues I can assume it's probably red (and the specific color isn't terribly important in this instance), but if you asked me "is that text red or green?" I wouldn't be able to tell you. If I increase the font weight to bold or put it next to text of the opposite color then it's easier to tell.

Answer 3

We’ve identified the following colors: Orange, Blue/Powder, Red, Green. Orange is used to represent our brand. Blue is used to represent links, buttons, and status. Red is used to represent errors. Finally, green is used to represent answers, status, and success.

Instead of "here are the colors we are going to use and here's what they mean", I think it would be better to approach this from "here are the parts of our interface, and here's how we will communicate information to users about how they work." That might involve color, but it could also be shape, font, location, or other visual cues.

My experience is that the use of colors on the network is very incoherent. Just in the top bar here on Meta, the logo is blue (not orange), you have gold, silver, and bronze in the user's flair, you use red for notifications in my inbox and that the review queue needs looking at but green for notifications that I've gained reputation. All the buttons are gray, not blue.

Sometimes there's a Blue dot to indicate something is "new". In the reputation popup you use tiny dots of color to indicate what type of badge was earned, but you don't carry over the black/gray background that you use on the badges page to distinguish tag badges from the other sort of badges.

Red tags are special moderator-only tags. Some tags are grey and some are blue with no real indication of why. The staff badges are salmon-colored, so I guess that's orange but they're awfully similar to the red tags. I understand a different color for moderator-only tags, but moderator badges are blue, so why wouldn't that be the color of "moderation/moderators"?

If a color has been used very consistently, its meaning becomes intuitively obvious as you use the site. If it is used inconsistently, it is just noise, not information.

For example, how do I know the "Show activity on this post" icon is actually a button I can click when I'm on a touch screen with no tool tips? Why is "Discard" linked text (but red, not blue) and not a button? Are you just going to use a different shade of blue for links I've already visited?

I think "blue means button/link/status" and your other categories are too broad to be useful. For example, in the inbox popup the envelope indicating the "message has been read" status is gray, so blue doesn't really mean "status". It's a highlight that is not positive (green) or negative (red). Often in the current interface color doesn't indicate what kind of thing something is, it's just there to get our attention. If we embrace that, then we can look at the use of color with a more critical eye and see that sometimes we have too many things on the page vying for our attention. We might also think about how a screen reader is going to be able (or not able) to present the information we're trying to convey with color.

If we look at the text under the title of a question:

Is it obvious that you can click on the modified date, but not on the creation date or number of views? Shouldn't it be? In the new scheme would you just make the text blue, or would you also stylize it so that people could tell it was clickable regardless of how well they see a particular color?

Answer 4

Just out of curiosity on the "mundane" evaluation,

Create brighter, accessible friendly colors instead of all colors simply being dark and mundane

- who is it who thinks the current color scheming is mundane, and who thinks that's problematic?

Was this a specific question in a user survey? If so, what are the numbers?

If not, I'm curious as to why that was thought to be a point worth mentioning, since whether something is mundane seems to me to be something that is (to a degree) subjective. I don't think everyone has the same definition of what is and isn't mundane or how mundane it is. That's compared to your following paragraph on the proposed colours, which seems to have a focus on improving consistency of colour usage, which is objective. Isn't a problem that can be described objectively sufficient to motivate the solution? Why bring up a subjective problem with no survey results to back it up?

I'm not asking this because I'm personally against making things "less mundane" (in fact- I myself actually really enjoyed the (2022?) April fool where there were a bunch of themes. My favourite one was the one with bright and vibrant colors and sparkles and such). I'm asking because I think it's important what the majority of people think. Again, I don't think everyone has the same definition of what is and isn't mundane or how mundane it is, and not everyone is like me who likes things with more vibrancy and sparkles.

---

Update: Now that the changes have gone through, I'm pretty sad. The notifications are less cyan and closer to purple (less "bright/cheery"). Comment flags are duller, comment votes are duller, rep notification bubbles are duller, etc. I'm confused. I thought the changes were supposed to make things less "mundane"?

Answer 5

Ensure colors that pass contrast in light mode also pass in dark mode

Would that also extend to the high contrast modes?

Answer 6

How is this going to affect each site's "brand" colour? (the colour that gets used in the buttons, links, and often also in the banners).

Will those be changed in any way? Do any of them require any changes to meet the goals of this project? If so, what strategy will be taken to meet those goals without "stripping away individuality" of the network sites?

Answer 7

I would like to remind you guys of this open question:

hot network questions have inconsistent CSS for visited/not visited depending on the site you're on

I asked about this in 2016 and there hasn't been any update since then. Am I right in assuming that this color update will also take this into account?

Answer 8

Will any changes be made to badges and their colours?

I've always personally found

• it hard to distinguish between the gold and bronze colours, and
• that the gold blends into the white backgrounds much more than the silver and bronze such that it looks like an odd-one-out. Perhaps some thin, darker outlining on the icons could help with that.

Answer 9

My perception of color is (AFAIK) pretty much “normal”.  But today I noticed that I had a problem with the interaction between code formatting and markup for revision history (a.k.a. edit history):

    

In the above screenshot (which is from Unix & Linux Stack Exchange), “depends on A” is in code format, and “ A” is an addition.  I have trouble seeing the difference.

(The screenshot is from “Side-by-side” mode in Firefox.  AFAICT, “Inline” mode is identical.  “Side-by-side Markdown” mode is better:

    

… because it doesn’t use code formatting (it just shows you the backticks), but it’s still easy to miss if the added part is small.)

Please add this to the list of cases you’re looking at.

Answer 10

Allow me to address the text color on Physics' front page, which has low contrast against the white background.

I added Text color of topics on Physics.SE frontpage, and in a comment it was proposed that I raise the issue in this thread.

Answer 11

I'm bothered by a series of claims in the original post

We never want to sacrifice usability for accessibility.

What this should mean is that a method, process, or color selection is developed such that, e.g., someone with color impaired vision can readily use the site and someone like me, who isn't, can also use the site... and enjoy it. In my experience, sites designed to be one thing for every one inevitably excludes those without difficulties to embrace those who have difficulties. Which brings me to...

Our goal here is to be more inclusive, not less.

In the last ten years phrases like that have almost always meant, "the majority should willingly give way to the minority." Please don't misunderstand me, I'm all for ensuring the fullest accessibility! But rather than providing a simple and/or straightforward means of achiving that goal for everyone, inevitably we get stuck with...

the Stack Overflow designers plan to redefine the colors within our design system, Stacks

Which is a complex and programmatic solution that the average user is unlikely to be competent to install and work with. But what really gripes me is when we get to...

We will design our new color system around these and share what we come up with...

Which sounds an awful lot like what you're going to do is pick a minimalist color set that ensures (theoretically) that everyone can readily perceive and use all the stacks — so long as the majority who doesn't need anything to change is willing to give up their comfort for those who need it.

One more time... I have no problem with providing maximum accessibility! But suggesting that we'll have one color set imposed on everyone feels like early 1990s tech to me. Have I misunderstood something, or are we really talking about selecting one color set? If so, why? In an age when I can change the color of the light in my room by flipping the switch a couple of times... why?

Why wouldn't Stack Exchange create a user-profile-based color selection system? And why wouldn't one of the choices be, "change nothing?"

Maybe I'm missing something. I hope I am.

1. Stack Exchange's design system is far too complex for the average user to use to create a custom color set. And yet if you want to be 100% inclusive, the option of a custom color set is required.

2. Stack Exchange selecting colors feels arrogant to me. Here in the U.S., the color red means stop and error while in China it symbolizes joy and happiness. It's common to find red wedding dresses in China reflecting the good fortune wished upon the happy couple, while here in the U.S. we frequently use white. Yes, I'm using examples that don't have much of anything to do with a color monitor, but my point is that forcing a color choice on the world doesn't seem useful because I don't think Stack Exchange programmers can know what the entire world needs.

Unless we're talking about a very, very restricted number of screen objects, There won't be one set of colors that will be universally acceptable to everyone.

On the other hand, it makes a lot of sense to give people the ability through their profile settings to easily and quickly shift to one or more high-contrast color settings, or color combinations to avoid documented color blindness problems, or at least one standards-based selection.

And if none of those work for a specific user, give us a link in our profiles that opens a list of screen objects and let people choose a custom color set that works for them. That would be as inclusive as anyone can possibly be without having to become a programmer to do it.

Answer 12

I entirely agree with this, but if possible can we have some sort of dark mode along with this? Light mode currently hurts my eyes.