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.