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

juliangarnier commented 1 month ago

Check for existing issues

[X] 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 commented 1 month ago

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

AlbertMarashi commented 1 month ago

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

https://github.com/zed-industries/zed/pull/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:

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
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
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 commented 1 month ago

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

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))",
}

https://github.com/user-attachments/assets/6715c84a-cb22-4e0a-a1dd-4c32cfc2db72

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

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:

hl2

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 commented 1 month ago

zed-industries / zed