Problem/Motivation

I had opened that issue already over in the Gin queue https://git.drupalcode.org/project/gin/-/work_items/3506320

The title of navigation blocks is using the same color in light and dark mode. In light mode that combination has a high enough color contrast of 4.62:1 while in dark mode it only has 3.1:1 the required minimum for SC1.4.3 is 4.5:1

Dark mode
--admin-toolbar-color-gray-700 (#6d7583) against the background (#2a2a2d) of the navigation sidebar 3.1:1
1

Light mode
--admin-toolbar-color-gray-700 (#6d7583) against the background (#ffffff) of the navigation sidebar 4.62:1
1

Steps to reproduce

  • Go to /admin/config/user-interface/navigation-block and press the enable edit mode
  • Configure one of the navigation blocks and enable Display title and save everything
  • Go to appearance/settings/default_admin and switch between light and dark mode and take a look at the navigation block title each time

Proposed resolution

Ensure that the navigation block titles always have a color contrast of at least 4.5:1 in light and dark mode

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
dark.jpg39.91 KBrkoller
light.jpg39.38 KBrkoller

Issue fork drupal-3637233

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

rkoller created an issue. See original summary.

hoxton made their first commit to this issue’s fork.

hoxton opened merge request !17773

hoxton opened merge request !17774

hoxton’s picture

hoxton commented

using --admin-color-text-loud on toolbar-block__title 's color is able to maintain the contrast requirements.

hoxton’s picture

hoxton commented
Status: Active » Needs review
rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Status: Needs review » Needs work

thank you for working on it. there are two problems you have chosen the branch name main for MR17774 which collides with the default branch name for the core repo. therefore i was unable to check out and manually test your changes.
and looking at the diff i am not sure picking --admin-color-text-loud is the right choice. that name carries a meaning semantically. the page title currently uses the following according to devtools: --admin-toolbar-color-gray-700: var(--drupal-admin-color-gray-700, #6d7583). I probably would stick to the --admin-toolbar-color-gray scale and try the closest available variable that reaches at least a color contrast of 4.5:1 within that gray scale in dark mode.

hoxton’s picture

hoxton commented

I will make the corrections for branch name.

For the contrast thing, trying --admin-toolbar-color-gray-500 gave contrast of 4.43:1 in dark mode and
3.22:1 in light mode. It was the closest to the required scale.
Using --admin-color-text-loud may be ok with block title and it aligns with the contrast requirement.