Inaccessible color contrast ratio in menu element example

[yashrajbharti]

What information was incorrect, unhelpful, or incomplete?

The current color scheme of the menu element example does not meet accessible contrast standards, making it difficult to read.

Safari

(EDIT: as mentioned by @estelle, color: buttontext; causes the color of button almost the same as its background resulting in a poor color contrast ratio of 1.2)

Chrome

Firefox

Contrast ratio

What did you expect to see?

I expected the example to use colors that meet the Web Content Accessibility Guidelines (WCAG) 2.1, specifically the contrast ratio of at least 4.5:1 for normal text.

This can be fixed using background-color: black and we can remove the black border (if we want). This fixes both the color between button text and it's background and anchor (link) text and the background.

Do you have any supporting links, references, or citations?

You can verify the contrast issue using accessibility testing tools like Contrast Checker or by using browser developer tools to inspect the element's styles.

The menu element example can be found here.

Do you have anything more you want to share?

The issue is reproducible on macOS Monterey using Safari 17.5, Chrome 128.0.6613.138, and Firefox 130.0. It is not browser-specific, as the contrast issue appears consistently across all of them.

[github-actions[bot]]

It looks like this is your first issue. Welcome! 👋 One of the project maintainers will be with you as soon as possible. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

[estelle]

This actually seems to be an issue with the Safari user agent style sheet setting the color buttontext.

Got to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button using Safari. If you remove all the CSS in the live example, the button is not legible.

input:is([type="button"], [type="submit"], [type="reset"]), input[type="file"]::file-selector-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
border-top-color: buttonface;
border-right-color: buttonface;
border-bottom-color: buttonface;
border-left-color: buttonface;
background-color: buttonface;
box-sizing: border-box;
}

This is from my Safari's User Agent Style Sheet - the color: buttontext; is the culprit. The color buttontext in Safari seems to be #dcdcdc.

[yashrajbharti]

Reported to webkit bugzilla with the following attachment from mdn web docs.

[estelle]

Thanks @yashrajbharti.

Closing as this is a webkit issue rather than an MDN issue.