Increase color contrast for the chip component

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