fix(button): increase hover contrast

[caugner]

Description

Increases the contrast between the background color with/without hover.

Motivation

Increase contrast:

• Light before: ❌ 3.68:1
• Light after: ✅ AAA 7.46:1
• Dark before: ☑️ AA 4.55:1
• Dark after: ☑️ AA 5.68:1

Additional details

	Yes	No
Before
After

Related issues and pull requests

Fixes #653.

[github-actions]

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

[OnkarRuikar]

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, the Clear button has the above change:

button_contrast-2025-08-31_11.06.45.mp4

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

[caugner]

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:1 7.39:1

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

[Rumyra]

Yes approve both 👍

[caugner]

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 are 12.35:1 and 7.39:1 respectively, both passing WCAG AAA.

[OnkarRuikar]

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

[caugner]

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 is 7.39:1 (previously 13.25:1), still passing WCAG AAA.

[caugner]

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

• The original changes are increasing 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.

[OnkarRuikar]

There are other places that could use more hover contrast:

hoverContrast.mp4

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