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

Created on 13 February 2025, 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.

Drupal CMS a11y

wcag143

wcag1411

Merge Requests

!593Improve the color contrast for the menu item of the current page
Open
Unnamed author
updated about 2 months ago

Comments & Activities

Issue created by @rkoller
Comment 2 months ago →
🇨🇦Canada mgifford Ottawa, Ontario
In this example, the "Extend" link is orange on a light orange background. This is lower contrast than the other links, making it harder to read for many people. It should be the opposite.
Comment 2 months ago →
🇮🇳India sandip
I am working on it.
Merge request !593Issue #3506319: Added visble border to active menu item on Forced color mode. → (Open) created by Unnamed author
Pipeline finished with Success
about 2 months ago
Total: 203s
#439757
Comment about 2 months ago →
🇮🇳India sandip
I have added a visible border to the active menu item in forced color mode. However, the task of increasing color contrast is still pending. As I’m currently occupied with other work, I’d appreciate it if someone could take it up. Thank you!

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024