8dd960c was deployed to:https://fred-pr666.review.mdn.allizom.net/

Please update the plain button hover contrast in dark mode as well:

 /* Plain */  &[data-variant="plain"] {    &:hover {--      background-color: light-dark(var(--color-gray-80), var(--color-gray-20));++      background-color: light-dark(var(--color-gray-80), var(--color-gray-40));    }

The current hover is almost not noticeable. In the following video, theClear button has the above change:

In the above video, the buttons are zoomed in, but in the normal case hover color change is not visible.

Please update the plain button hover contrast in dark mode as well:

 /* Plain */  &[data-variant="plain"] {    &:hover {--      background-color: light-dark(var(--color-gray-80), var(--color-gray-20));++      background-color: light-dark(var(--color-gray-80), var(--color-gray-40));    }

The suggestion passes WCAG AAA:7.14:17.39:1

@mdn/content-team Do you approve the changes in this PR, and/or Onkar's suggestion?

Yes approve both 👍

I looked into applying@OnkarRuikar's suggestion, but noticed that all neutral dark variants have similar contrast issues, see the following screenshots, with hover on the middle button:

Here's how these would look with increased contrast (1120399):

@Rumyra Does that look right?

Edit: Contrast ratios are12.35:1 and7.39:1 respectively, both passing WCAG AAA.

@caugner thanks for increasing the scope of the fix. The dark theme is looking good.

In the Light theme could you increase darkness a bit more? I am using a LED screen and the hovered unhovered difference is not that stark.

In the Light theme could you increase darkness a bit more?

I assume you're referring to this one:

Here's how this looks with increased "hover contrast" (34c264c):

Contrast is7.39:1 (previously13.25:1), still passing WCAG AAA.

I'm thinking that we shouldn't mix these changes up in a single PR:

• The original changes areincreasing contrast between text and background color.
• The other changes are decreasing contrast between text and background color, to increase contrast between background color with/without hover.

There are other places that could use more hover contrast:

Also include the search box suggestion list and left sidebar list. In right sidebar in-viewport items could use more prominent blue background.