[Accessibility] Low contrast / readability of matches, highlights, and selected text.

[juliangarnier]

Check for existing issues

• Completed

Describe the feature

Problem

Selected text, matches and highlights can result in low contrast / unreadable text:

Hard to read text in search results:

Selecting a text can in some cases make it harder to read:

Matching brackets are almost unnoticeable:

Currently themes rely on transparency / blending color for highlights, but this causes a lot of issues (#7333, #17599, #16380, #4678, #4859), and I think they could all be addressed with this:

Solution

Expose an optional foreground color property for each of the different match / highlight / selection styles:

    "search.match_background": "#dfc184ff",
+   "search.match_foreground": "#282c34ff",
    "editor.document_highlight.read_background": "#dfc184ff",
+   "editor.document_highlight.read_foreground": "#282c34ff",
    "editor.document_highlight.write_background": "#dfc184ff",
+   "editor.document_highlight.write_foreground": "#282c34ff",
    "players": [
      {
        "cursor": "#5ac1feff",
        "background": "#5ac1feff",
        "selection": "#dfc184ff"
+       "selection_foreground": "#282c34ff"
      }
    ],

If applicable, add mockups / screenshots to help present your vision of the feature

By manually setting high-contrast background and foreground colors to these properties, we make sure the text will alway be readable in all scenarios:

[juliangarnier]

Updated the issue to focus more on the actual problem and suggest a solution.

[AlbertMarashi]

@juliangarnier I'm curious to hear what you think about

• remove text color blending and fix multiple background renderings on assistant panel #17606

This PR completely removes color blending with foreground colors, (which is more like how CSS color works)

Text selection is an interesting case.

I'm of the opinion that this is clearer:

Than this:

I think we have 3 main options:

1. remove all syntax coloring in selections, make the selection color whatever was specified in your proposed solution
   • personally, my answer here is no, because it will make seeing syntax very difficult if everything is the same color
2. perform a blend of foreground & background colors using the alpha/opacity value (if present) in editor.document_highlight.read_foreground and editor.document_highlight.write_foreground specifically during selection
3. continue with the status quo

Chrome & Firefox Selections

I think browsers are a good reference example here as they've spent a lot of time thinking about accessibility, and how they do text selection.

• They only highlight the background
• They do not change foreground colors whatsoever
• (Both chrome & firefox behave in this way)

---

Figma

However, it appears that tools like figma appear to be potentially doing an "overlay" color (over the text) as opposed to a background color (under the text)

---

Relation to my PR

My PR linked above, may partly solve some of these issues, particularly in cases like comments, where currently, most themes use a "gray" color. This breaks accessibility guidelines.

Instead, what my PR will enable is the usage of transparent foreground colors, such as #FFF4 to represent a comment via opacity

This is the difference:

You can see that the left has better contrast, as the whiteness is applied over the blue selection, whereas on the right, the foreground brightness stays constant (this leads to reduced contrast during selection)

[juliangarnier]

@juliangarnier I'm curious to hear what you think about

• Add hint/predictive theme stylings, remove text color blending and fix multiple background renderings on assistant panel #17606

I'm guessing you're asking about the remove foreground color blending part?
I think it's great! And clearly a step in the right direction for better contrast.

Text selection is an interesting case.

It is but my idea is to provide a more global solution to color highlighting, not only selection.

I think we have 3 main options:

1. remove all syntax coloring in selections, make the selection color whatever was specified in your proposed solution
   • personally, my answer here is no, because it will make seeing syntax very difficult if everything is the same color

Not exactly. The idea is to have an optional selection_foreground, if not set, then the foreground color stays the same.

There is also the SublimeText way: The selection foreground can be optionally set at the syntax level, allowing fine grained highlighting depending of what part is of the code is selected:

{
    "scope": "comment",
    "foreground": "color(var(grey))",
    "selection_foreground": "color(var(bg2))",
}

hl.mp4

2. perform a blend of foreground & background colors using the alpha/opacity value (if present) in editor.document_highlight.read_foreground and editor.document_highlight.write_foreground specifically during selection

This won't guaranty good contrast though, or requires som contrast checking checking (Sublime allows that at the theme level too like this color(var(bg2) min-contrast(var(selection) 3.5))

3. continue with the status quo

I think 1. can be implemented without any breaking changes, since this it won't have any effect if a selection_foreground is not defined.

I think it's important to find a general solution that can improves every part of the highlighting system, not only selection. For example, search results highlights, where losing syntax highlighting is less important than losing contrast:

The nice thing about the solution of adding an optional selection_foreground color is that it doesn't conflict with the curent system, and simply adds more control over contrast when building themes.

[notpeter]

See also:

• Improve Contrast in default themes #15521

[thataboy]

I like how sublime handles this. By allowing a selection border.

You can have a selection background color as well (I've made mine almost transparent). Or you can have a background color and no border.

Sublime also uses underline for read/write highlight

You can still have diagnostics

[juliangarnier]

Sublime has a really nice theming system indeed

[AlbertMarashi]

+1 on ability to create borders for selections

[thataboy]

+1 on ability to create borders for selections

WIP. I got something.

[marcospb19]

My 2 cents on visibility: I can never see where my cursor is when I'm going through search matches.

Answer: cursor is on second "pane" match.

(It's harder when they're not adjacent.)