Contrib.social

Increase color contrast for the chip component

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

Problem/Motivation

The chip labels (published, experimental, new, and beta) have a high enough contrast against the chip background, but there are two problems. The "chip" components are not easily distinguishable as a chip due to a too small color contrast of their background color against the page background (See the table in https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or chip_component.xlsx.zip → for more details).

Aside from that, it has to be noted that there are only two different chip colors (grey and green) for five different states. On one hand, it is not entirely clear what message each color is communicating, therefore, you are required to scan and read every chip label, and on the other hand that “message” is getting lost in Forced Colors mode.

That leaves the question, is the information communicated by green and grey important at all, what is the difference between the two, are two color states enough, and would adding more colors make sense?

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

Steps to reproduce

  • Check the chips 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

    • Even though it is not necessarily a compliance-related issue it might be good to increase the color contrast for the chip background for easier cognition.
    • Enquire if two different states are enough or if it would make sense to add more colors?

    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
  • Comment 20 days ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    Do we have a list of the currently supported chips?

    I made some suggested CSS changes:

    @media (forced-colors: active) {
  .gin-status,
  .gin-new-flag,
  .gin-experimental-flag {
    forced-color-adjust: none;
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border: 3px solid ButtonText !important;
  }
}

@media (prefers-contrast: more) {
  .gin-status,
  .gin-new-flag,
  .gin-experimental-flag {
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border: 5px solid ButtonText !important;
    font-weight: bold;
  }
}

    However, I'm just seeing the one chip now.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024