red in default light theme too subtle

[jrieken]

Like quite a few other men (https://en.wikipedia.org/wiki/Color_blindness#Frequency_of_red-green_color_blindness_in_males_of_various_populations) I suffer from impaired red/green vision and for my eyes the red value rgba(128, 0, 0, 1) from our default light theme is almost impossible to tell apart from the default black.

[jrieken]

related to #4133

[bgashler1]

Good find, @jrieken . This is not the only color that I've heard from users is in need of some tweaking. I will enhance the contrast.

[isidorn]

Moving this to June milestone because it is not critical
@bgashler1 please be aware of issues which you assign to the current milestone as we plan to fix them in the current milestone. I moved this out to June because we are wrapping up May

[bgashler1]

Problem

Trying to solve this color blindness issue for markdown header syntax (and possibly other places where this color value is used).

This is a simulation I created using color tools in Illustrator of Protanopia (color blindness where you can't see red)

Notice the red headers look almost exactly the same as the black text.

This is only an issue in the light theme, not the dark theme, because we a nice blue in the dark theme which works with the two most common forms of color-blindness.

I like how Quiet Light theme solves this.

They bold their text, and it's a different shade of red. It also helps you understand the hierarchy while you write it and the monospaced nature of the font is not compromised, so no alignment issues.

However, I don't want to change our color if possible, because it's used in hundreds of places in our code and is consistent with Visual Studio IDE.

So what if we just bolded our current color like Quiet Light?

While it fixes it in the plain text, as you can see a header is not rendered bold in our preview of markdown. So, bolding isn't actually literally how it will be styled, and this could be confusing potentially.

Also, we don't use bold in the dark theme, so we would need to apply it there as well.

Would changing the shade of the color, though, make a difference?

Obviously, you can see that there is numerically more color present in all color channels (meaning more brightness to contrast against text).

But actually all colors are not showing up well in red color blindness. Notice how even Quiet Light doesn't have enough contrast in their red when I take the boldness off of it on the headers.

Possible solutions

1. Make bold (like Quiet Light theme), and do that as well in dark theme for consistency.
2. Make markdown headers very similar to the color as bold markdown token (which is like what we already do in the dark theme).
   • This would leave other usage of this color unaddressed, but the only one reported so far that I know of is with markdown. So it would buy us some time to reevaluate all our colors.
3. Change all instances of this color

Difficult to do, and we should carefully test it in all situations. We can't simply make the red more bright, because for example in HTML, this color is used to mark tags and another lighter shade of red is used to mark attributes (which sit right next to tags).

My proposal

Go with option 2 for now, which will fix the markdown and also be more consistent with the dark theme.

We can put this as part of our UI/UX holistic work on colors which Steven and I will be working on (moving to July so this can be part of that).

[bgashler1]

This is what that option looks like...

(simulating red-color-blindness)

(regular)

Pretty similar, huh? I'm using rgb(36, 36, 181), but we can of course discuss that.

[bgashler1]

I decided not to change the color of the heading but instead apply a bold font-weight (as is used in the Quiet Light theme). If anyone disagrees, please let me know. I think the bold color fixes this in a very conservative way by helping people who have trouble seeing the red to differentiate headings based on the boldness (it also helps everyone parse documents for headings faster with the heavier weight, regardless of his/her color perception).

Lastly, It also makes it easier for people to distinguish between bold and headings by having two different colors. This is why I chose not to go with option 2 above.

Here is what it looks like with protanopia simulated...

Vs. none-protanopia