Problem/Motivation

The focus color in the navigation module is using a different shade of green than the focus color used in Claro and is not meeting the required color contrast of at least 3:1 for SC1.4.11:

Navigation: (rgb(0,204,109) : rgb(255,255,255) -> 2.1:1)
1 for the green of the focus outline against the white of the navigation sidebar background

Claro Header: (rgb(38,167,105) : rgb(243,344,249) -> 2.8:1)
1 for the green of the focus outline against the grey of the header background

Claro main: (rgb(38,167,105) : rgb(255,255,255) -> 3.1:1)
1 for the green of the focus outline against the white of the background

Steps to reproduce

  • go to for example admin/modules and check the color contrast for the top level menu item people in the sidebar and the filter field

Proposed resolution

There are two options how to solve this:

  1. Use --color-lightninggreen (#26a769) on the navigation sidebar as well. That way the color would be consistent across the navigation and the rest of claro - the problem that way the focus outline would still have a too low color contrast against the header background.
  2. Use --drupal-admin-color-green-400 (#009952) instead of --drupal-admin-color-green-300 for the navigation sidebar and the focus for the rest of claro.

It looks like option 2 would be the preferable choice. Found the different shades of green in variables.css in the navigation module. going with --drupal-admin-color-green-400 for the navigation and claro in general, aside the overall consistency, it would also have another positive side effect, the focus would have enough color contrast against the background color of the header in claro as well:

#009952 against #fff (general background) 3.7:1
#009952 against #F3F4F9 (header) 3.4:1

Remaining tasks

Review

User interface changes

Before

before

After

after

Introduced terminology

NA

API changes

NA

Data model changes

NA

Release notes snippet

NA

CommentFileSizeAuthor
#6 Screenshot 2025-02-26 at 12.02.07 PM.png139.33 KBrinku jacob 13
#6 before.png156.72 KBrinku jacob 13
#2 claro_main.jpg172.94 KBrkoller
#2 claro_header.jpg175.31 KBrkoller
#2 nav_sidebar.jpg134.17 KBrkoller

Issue fork drupal-3498326

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.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Title: The focus outline is using a different shade of green than the rest of Claro » Focus outline has a too low color contrast and uses a different green than Claro
Issue summary: View changes
StatusFileSize
new nav_sidebar.jpg134.17 KB
new claro_header.jpg175.31 KB
new claro_main.jpg172.94 KB

Updated the title and issue summary and added screenshots

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Issue summary: View changes

rinku jacob 13 made their first commit to this issue’s fork.

rinku jacob 13 opened merge request !11299

rinku jacob 13’s picture

rinku jacob 13 commented
StatusFileSize
new before.png156.72 KB
new Screenshot 2025-02-26 at 12.02.07 PM.png139.33 KB

I've created a Merge Request based on Proposed Resolution 2. Could you please review the Merge Request.
before the CSS style changes are applied
img2
After the CSS changes:
img3

rinku jacob 13’s picture

rinku jacob 13 commented
Status: Active » Needs review
smustgrave’s picture

smustgrave commented
Issue summary: View changes
Status: Needs review » Reviewed & tested by the community

Seems pretty straightforward and the multiple screenshots

Did update the summary slightly to include the before/after

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented

Using --drupal-admin-color-green-400 (#009952) seems the more reasonable approach in terms of design and it'll keep the same variables so Gin&other can keep any override.

nod_ closed merge request !11299

  • nod_ committed b6569266 on 11.1.x 
    Issue #3498326 by rinku jacob 13, rkoller, smustgrave, ckrina: Focus...

  • nod_ committed 667827ba on 11.x 
    Issue #3498326 by rinku jacob 13, rkoller, smustgrave, ckrina: Focus...
nod_’s picture

nod_
Primary language French
Location Lille
commented
Version: 11.x-dev » 11.1.x-dev
Status: Reviewed & tested by the community » Fixed

Committed and pushed 667827baf8f to 11.x and b6569266a24 to 11.1.x. Thanks!

rinku jacob 13’s picture

rinku jacob 13 commented
rinku jacob 13’s picture

rinku jacob 13 commented
rinku jacob 13’s picture

rinku jacob 13 commented
rinku jacob 13’s picture

rinku jacob 13 commented

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.