fix(button): increase contrast

[caugner]

Description

Increases the contrast between the background color with/without hover, all while ensuring a visible hover effect.

Motivation

Resolve accessibility issues.

Additional details

As of 120d223:

WCAG contrast ratios

State	Light (main → branch)	Dark (main → branch)
YES default (no hover)	3.81:1 🔴 → 7.74:1 🟢	10.49:1 🟢
YES hover	3.66:1 🔴 → 7.44:1 🟢	9.56:1 🟢 → 5.54:1 🟠
NO default (no hover)	5.02:1 🟠	6.35:1 🟠
NO hover	4.53:1 🟠 → 5.67:1 🟠	6.24:1 🟠

Legend: 🔴 fails AA (<4.5:1) · 🟠 passes AA (≥4.5:1) · 🟢 passes AAA (≥7:1) — thresholds for normal text.

Screenshots

	Before	After
Light Yes
Light No
Dark Yes
Dark No

Related issues and pull requests

Fixes #653.

[github-actions]

82f3524 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.

[LeoMcA]

Nice!