fix: improve color contrast in menu element example for accessibility

[yashrajbharti]

Description

I changed the background color of the menu element example from bisque to black to fix the inaccessible color contrast issue, improving readability and meeting WCAG 2.1 contrast ratio standards.

Motivation

The previous background color did not meet the minimum contrast ratio requirement, making the text difficult to read for users with visual impairments (and even hard for normal users). This change improves accessibility across browsers.

Additional details

• MDN menu element example
• The issue is reproducible on macOS Monterey using Safari 17.5, Chrome 128.0.6613.138, and Firefox 130.0.

Related issues and pull requests

Fixes #2839

[github-actions]

It looks like this is your first pull request. 🎉 Thank you for your contribution! One of the project maintainers will triage and assign the pull request for review. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

[estelle]

this makes it more accessible in dark mode, but makes the link above impossible to read in light mode.

[yashrajbharti]

Okay, fixing it for both light and dark modes and checking in all the major browsers

[yashrajbharti]

Making the following changes fixes the color contrast issue as checked in all major browsers:

(But I couldn't find a way without using a @media query for color schemes, and I didn't wanted to re-color the states of anchor tag, which by default comes with accessibility out of the box.)

.news {
  background-color: bisque;
  padding: 1em;
  border: solid thin black;

  @media (prefers-color-scheme: dark) {
    background-color: black;
  }
}

menu {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: 0;
  gap: 1em;
}

button {
  color: black;
  background: white;
}

@estelle Should I go for it?

[yashrajbharti]

The latest commit fixes the color contrast issues that occurred in Safari due to its user agent style sheet setting the color buttontext. This can also be fixed using color: unset.
The commit also cares about the light and dark modes where color contrast are now better for readability (greater than 5.6 in all cases).

Added image below:
Light theme:

Dark theme:

Safari (17.5)

[estelle]

I added a comment to #2839 (comment) which I thought I had added here. I am hesitant to merge anything targeting the issue with the Safari button as this should be a webkit fix.

[yashrajbharti]

There is something more to it, the same code gives different results if pasted from interactive example in the docs to the mdn playground, thus I fail to reproduce the bug on MDN playground. However, I have added a report to webkit bugzilla with a link to this a11y button issue #2839 , and <menu> element example from mdn web docs | menu.

[estelle]

Thanks @yashrajbharti. Let's close this rather than commit it, as it is better to keep the examples as basic as possible (the fewest features needed).