interactive-examples icon indicating copy to clipboard operation
interactive-examples copied to clipboard

Published 20 hours ago • verified publisher icon mdn

fix: improve color contrast in menu element example for accessibility

Open yashrajbharti opened this issue 5 months ago • 3 comments

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

yashrajbharti avatar Sep 16 '24 06:09 yashrajbharti