Contrib.social

Increase the color contrast for components like appearance switch, select elements, checkboxes, radio buttons, text fields, text areas, and date fields

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

Problem/Motivation

In dark mode the color contrast of the border against the adjacent background color of the component is below 3:1 to meet SC1.4.11 (See the table in
https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or component.background.xlsx.zip → for more details). The following article provides some more background information about SC1.4.11: https://yatil.net/blog/non-text-contrast-in-detail-ui-components

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

Steps to reproduce

  • Check some of the components on for example admin/appearance/settings/gin

Proposed resolution

  • Increase the contrast for --gin-bg-input against --gin-border-color-form-element in dark mode to get a color contrast of at least 3:1

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

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024