Problem/Motivation

Accessibility Insights report:

Element has insufficient color contrast of 2.55 (foreground color: #111111, background color: #545560, font size: 11.3pt (15.04px), font weight: normal). Expected contrast ratio of 4.5:1

Use background color: #7e7f90 and the original foreground color: #111111 to meet a contrast ratio of 4.79:1.

Snippet:

<a href="#main-content" class="visually-hidden focusable skip-link"> Skip to main content </a>

I didn't check against Gin.

WCAG: SC 1.4.3 Contrast (Minimum) (Level AA)

Steps to reproduce

  • Log in as admin.
  • Go to /admin/appearance.
  • Set Default Admin as the admin theme.
  • If it's not already appearing in dark mode, go to /admin/appearance/settings/default_admin, change "Appearance" to "Dark", and submit the form.
  • Press the TAB key until the skip link becomes focused and visible.
Expected

The text / background has sufficient contrast.

Actual

It has low contrast.

screenshot

Proposed resolution

Not sure.

The light mode skip link has a dark background with light text.

Maybe this one should have the opposite: light background with dark text.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#4 3621109-skip-link-dark-mode-contrast.patch1.65 KBrupeshghar
#4 after-full-page.png114.93 KBrupeshghar
#4 before-full-page.png114.73 KBrupeshghar
dark-mode-skip-link-low-contrast.png19.94 KBkentr

Issue fork drupal-3621109

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

kentr created an issue. See original summary.

kentr’s picture

kentr commented
Title: Dark mode skip link has too low color contrast » Dark mode skip link has low color contrast
kentr’s picture

kentr commented
Title: Dark mode skip link has low color contrast » Skip link in dark mode has low color contrast
Issue summary: View changes
rupeshghar’s picture

rupeshghar commented
StatusFileSize
new before-full-page.png114.73 KB
new after-full-page.png114.93 KB
new 3621109-skip-link-dark-mode-contrast.patch1.65 KB

Corrected css rule which was affecting skip link color override. Please review patch and test.

AI-Generated: Yes (Used Claude to help generate the patch and reviewed/tested the output before submitting).
I had not read the policy and had reviewed the output but missed out on disclosure - will ensure to share this info from next time.

kentr’s picture

kentr commented

@rupeshghar thank you for your contribution.

Was the patch generated with an LLM? Please note that disclosure is required: Policy on the use of AI when contributing to Drupal.

kentr’s picture

kentr commented

Also, we don't use patches anymore. It needs to be in a merge request.

rupeshghar opened merge request !17032

rupeshghar’s picture

rupeshghar commented
Status: Active » Needs review

@kentr I have updated the previous comment and mention the usage of the AI but also have done the human review. the disclosure was missing which I will take care from next time.
I've also created an MR for this. Thanks

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

MR has a pipeline issue that needs to be resolved first. And solution is adding back gin

mgifford’s picture

mgifford
he/him
Primary language English
commented

Why does the MR (or patch) still refer to Gin?

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Yeah, the MR doesn't look right. We should be using one of the semantic variables in https://www.drupal.org/docs/core-modules-and-themes/core-themes/default-... instead of using a .dark-mode class (which will eventually be phased out). We should also probably add in a border (using a semantic color variable).