Increase the color contrast of the bulk action bar

Created on 13 February 2025, 2 months ago

Problem/Motivation

Same as for the drop button, this issue is not necessarily a compliance one. But the problem is, that the background of the bulk action bar is close to the background layer color wise and therefore the color contrast is rather low. That way it is easily possible that the appearance of the bulk action bar goes unnoticed when a user is selecting an entity.

In comparison Claro uses a clearly visible dark bulk action bar with a rather large color contrast, that way when the component is showing up it is immediately perceived (See the table in https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or bulk_action.xlsx.zip โ†’ for more details).

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

Steps to reproduce

  • Go to admin/content and select an entity so the bulk action bar shows up

Proposed resolution

  • Increase the color contrast between the background color of the bulk action bar and the background layer but ensure that at the same time the components (buttons and labels) within the bulk action bar have a high enough color contrast (>= 3:1) against the new bulk action bar background.

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

  • Issue created by @rkoller
  • ๐Ÿ‡จ๐Ÿ‡ฆCanada mgifford Ottawa, Ontario
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia rinku jacob 13 Kerala

    The background color for the ViewBulk actions in the Gin admin theme is being overridden by other styles that were specifically designed for the Gin theme.

    If we remove these core ViewBulk actions styles, the default styles (like those in Claro) will be applied, where the background color is #232429.

    Should we update the Gin ViewBulk action background color to match Claro's, or should we increase the contrast of the existing color?

  • ๐Ÿ‡ณ๐Ÿ‡ฑNetherlands batigolix Utrecht

    The sticky bar uses as background a mix between white and the accent color that the user has chosen. You can make the background and the text of the sticky bar darker (and get a >3 contrasat), but at some point you run into contrast problem with the submit button (which has a fixed color).

    Probably it is more feasible to remove the Gin specific styling for the sticky bulk edit bar, but it is quite a big change in the original design.

Production build 0.71.5 2024