The border of field types on the "add field" step has a too low color contrast

Created on 18 June 2025, 28 days ago

Problem/Motivation

The border of a field type on the "Add field" step has a too low color contrast with 1.3:1 (#dedfe4 against #ffffff - WCAG 2.2 SC1.4.11) .

The border is visual information that is necessary to identify the user interface component the user is able to interact with.

Steps to reproduce

Proposed resolution

Increase the color contrast of the field type border to at least 3:1

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

๐Ÿ› Bug report
Status

Active

Version

11.0 ๐Ÿ”ฅ

Component

field system

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.

  • Field UX

    Usability improvements related to the Field UI

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @rkoller
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia libbna New Delhi, India
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia libbna New Delhi, India

    I've updated the border color from #dedfe4 to #949494. The border is now much more visually distinct.

  • Pipeline finished with Failed
    26 days ago
    Total: 646s
    #526771
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia roshanibhangale

    Hi

    I have tested the issue on the Drupal 11.x

    After MR3986 is applied successfully, Add fields has the border is now dark and border color is updated to #949494.

    Hence this can be move to RTBC +1

    Attaching screenshot for reference.

  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom the_g_bomb

    Confirmed, patch applies and improves the border contrast.

    I have also checked the new contrast with a contrast Checker.

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    thanks for the MR! i agree #949494 has a high enough contrast, but problem is that this color is not one of the available color variations for claro. the list of available variables is:

      /* Gray variations. */
      --color-gray: #232429;
      --color-gray-900: #393a3f;
      --color-gray-800: #55565b;
      --color-gray-700: #75767b;
      --color-gray-600: #828388;
      --color-gray-500: #919297;
      --color-gray-400: #adaeb3;
      --color-gray-300: #c1c2c7;
      --color-gray-200: #d3d4d9;
      --color-gray-100: #dedfe4;
      --color-gray-050: #f3f4f9;
      --color-gray-025: #f9faff;
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia libbna New Delhi, India

    I checked using the contrast checker, and --color-gray-500: #919297; meets the expected contrast ratio.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia libbna New Delhi, India

    Forgot to attached the screenshot of the final output.

  • Pipeline finished with Failed
    22 days ago
    Total: 488s
    #530220
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    thank you! I've updated the issue summary to reflect the ui changes. and as said in the issue summary the contrast of 3.1:1 is meeting the requirement. so looks all good now.

  • ๐Ÿ‡ฏ๐Ÿ‡ตJapan neptune-dc

    I have confirmed that the new border color is being applied at `admin/structure/types/manage/article/fields` > Create a New Field. +1 RBTC

Production build 0.71.5 2024