Contrib.social

Increase the color contrast for Gin switches

Open on Drupal.org →
Created on 13 February 2025, 5 months ago

Problem/Motivation

In dark mode, the Gin switch component isn't meeting SC1.4.11, so the user is unable to easily distinguish the interface component.

In light mode the switch component is compliant with the requirement (See the table in https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or gin_switch.xlsx.zip → for more details).

The visual presentation also differs between the two modes, in dark mode the selected accent color is applied to the switch when checked, while in light mode it is not. In Forced Colors mode the toggle in the unchecked state is invisible.

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

Steps to reproduce

  • Check the switches on for example admin/appearance/settings/gin. 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 of the toggle against the switches background, as well as the switches background against --gin-bg-layer is at least 3:1 in light and dark mode for every accent color and state
  • Ensure that the toggle in the unchecked state is visible in 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

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024