Improve the color contrast for the menu item of the current page

Created on 13 February 2025, about 2 months ago

Problem/Motivation

The menu item for the current page is visually highlighted by a change in the background color and the menu item’s button label color. Problem is, most of the colors for menu item labels against the color of the background are not meeting the minimum requirement of 4.5:1 for SC1.4.3. Neither are most of the background colors meeting a minimum color contrast of 3:1 against the background of the navigation sidebar (See the table in https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or current_page.xlsx.zip for more details).

In Forced Colors mode the label for the active menu item is not visible at all.

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

Steps to reproduce

  • Check the navigation sidebar after visiting admin/content/media or admin/structure/types. For testing the issue in Forced Colors mode make sure that you’ve switched to dark mode before.

Proposed resolution

  • Make sure that the color contrast between the menu item label and the background for the current page has at least 4.5:1
  • Increase the color contrast of the colorized background against the background of the navigation sidebar.
  • Make sure that the active menu item is also communicated in the Forced Colors mode
  • Remaining tasks

    User interface changes

    API changes

    Data model changes

🐛 Bug report
Status

Active

Version

4.0

Component

User interface

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024