Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contrast isn't great in find results #145744

Closed
Tyriar opened this issue Mar 22, 2022 · 5 comments · Fixed by #145930
Closed

Contrast isn't great in find results #145744

Tyriar opened this issue Mar 22, 2022 · 5 comments · Fixed by #145930
Assignees
Labels
accessibility Keyboard, mouse, ARIA, vision, screen readers (non-specific) issues bug Issue identified by VS Code Team member as probable bug insiders-released Patch has been released in VS Code Insiders terminal-find Relating the terminal's find widget verified Verification succeeded
Milestone

Comments

@Tyriar
Copy link
Member

Tyriar commented Mar 22, 2022

Testing #145629

We draw the find match selection on top of the text which reduces contrast pretty badly

Terminal:

image
image

Editor:

image

Should we use a border instead of a solid rectangle to workaround this? It would look different from the editor but at least it wouldn't introduce contrast problems

This is what it looks like with these style overrides:

.xterm-decoration.xterm-find-result-decoration {
    border: 1px solid rgba(234, 92, 0, 1) !important;
    box-sizing: border-box;
    background: transparent !important;
}

image

The white background on selection is due to "terminal.selectionBackground": "#ffffff"

We should support border styles anyway to cover the high contrast case:

image

@Tyriar Tyriar added bug Issue identified by VS Code Team member as probable bug accessibility Keyboard, mouse, ARIA, vision, screen readers (non-specific) issues terminal-find Relating the terminal's find widget labels Mar 22, 2022
@Tyriar Tyriar added this to the March 2022 milestone Mar 22, 2022
@meganrogge
Copy link
Contributor

meganrogge commented Mar 22, 2022

I like the idea of a border instead of a filled rectangle. It's pretty hard to see otherwise

@martin2469
Copy link

I'd like to work on this if no one else is

@Tyriar
Copy link
Member Author

Tyriar commented Mar 23, 2022

@martin2469 we'll be working on this in the next couple of days as it blocks the release

@rzhao271
Copy link
Contributor

The border colour seems good for dark themes, but it's a bit hard to see for light ones.

@Tyriar
Copy link
Member Author

Tyriar commented Mar 25, 2022

We hope to move back to using background color eventually so this would get fixed then.

@github-actions github-actions bot locked and limited conversation to collaborators May 7, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
accessibility Keyboard, mouse, ARIA, vision, screen readers (non-specific) issues bug Issue identified by VS Code Team member as probable bug insiders-released Patch has been released in VS Code Insiders terminal-find Relating the terminal's find widget verified Verification succeeded
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants
@Tyriar @rzhao271 @meganrogge @martin2469 and others