StackExchange/Stacks

`.s-btn__filled` does not provide enough contrast in high contrast mode

ycantu opened this issue · 1 comments

Describe the bug
.s-btn__filled does not provide enough contrast in high contrast mode regardless of theme.

To Reproduce
As a user with high contrast enabled

  1. Visit https://stackoverflow.com/questions
  2. Hover above a watched tag to show a popover
    • If you have no watched tags, first click the "Watch tag" button

Expected behavior
The color property for the class should be high contrast against it's background color.

Screenshots
image

Dropping a note for future me/whomever winds up trying to resolve this:

On stackoverflow.com, we have the following defined style:

.s-btn__filled.is-selected {
  color: var(--theme-button-filled-selected-color); // var(--powder-900)
  background-color: var(--theme-button-filled-selected-background-color); // var(--powder-500)
...
}

This is the root of the issue. The high contrast light/dark divergence stops for powder are 300/400. Anything ≤ 300 will become lighter and anything ≥ 400 will become darker.