Focus outlines of form elements on media grid images have a too low color contrast

Created on 13 February 2025, about 2 months ago

Problem/Motivation

By placing the checkbox and the two buttons in front of the images on the media grid page it is close to impossible to guarantee that if one of these elements gets into focus that the focus outline has a high enough color contrast. The background aka the images will always be heterogenous and inconsistent.

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

Steps to reproduce

  • Go to admin/content/media-grid and try to navigate the media grid by keyboard by tabbing through the focusable elements.

Proposed resolution

  • Try to ensure that the color contrast of the focus colors and the accent colors in dark and light mode is larger than 3:1 against the background, which is close to impossible. The only potential way might be in contrast to the proposed resolution in [#Improve the accessibility of the focus outlines] which recommends only using a single colored solid outline to make an exception and to go with two outline colors in this case, so at least one of them is meeting or is at least close to the required color contrast.

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

Production build 0.71.5 2024