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.

We've discussed the problem in the weekly Drupal CMS a11y track meeting today. For the record the attendees were, @katannshaw, @rkoller, and @the_g_bomb

Steps to reproduce

Proposed resolution

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

Remaining tasks

User interface changes

Before:
the dialog modal for adding a field

After: (using --color-gray-500 #919297 against the white background #ffffff results in a color contrast of 3.1:1)
the dialog modal for adding a field

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#13 border-color.png1.92 MBneptune-dc
#12 add_field_after.jpg121.18 KBrkoller
#11 image (2).png77.82 KBlibbna
#10 image (1).png50.28 KBlibbna
#8 3530855-WebAIM_Contrast_Checker.png248.07 KBthe_g_bomb
#6 3530855_2.png113.13 KBroshanibhangale
#6 3530855_1.png47.42 KBroshanibhangale
#5 image.png59.52 KBlibbna
add_field.jpg119.33 KBrkoller

Issue fork drupal-3530855

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

rkoller created an issue. See original summary.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Issue summary: View changes
libbna’s picture

libbna commented
Assigned: Unassigned » libbna

libbna opened merge request !12420

libbna’s picture

libbna commented
Assigned: libbna » Unassigned
Status: Active » Needs review
StatusFileSize
new image.png59.52 KB

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

roshanibhangale’s picture

roshanibhangale commented
StatusFileSize
new 3530855_1.png47.42 KB
new 3530855_2.png113.13 KB

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.

roshanibhangale’s picture

roshanibhangale commented
Status: Needs review » Reviewed & tested by the community
the_g_bomb’s picture

the_g_bomb commented
StatusFileSize
new 3530855-WebAIM_Contrast_Checker.png248.07 KB

Confirmed, patch applies and improves the border contrast.

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

Screenshot of Contrast checker results

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Status: Reviewed & tested by the community » Needs work

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;
libbna’s picture

libbna commented
StatusFileSize
new image (1).png50.28 KB

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

libbna’s picture

libbna commented
Status: Needs work » Needs review
StatusFileSize
new image (2).png77.82 KB

Forgot to attached the screenshot of the final output.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Issue summary: View changes
StatusFileSize
new add_field_after.jpg121.18 KB

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.

neptune-dc’s picture

neptune-dc commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new border-color.png1.92 MB

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

  • longwave committed dadcf295 on 11.2.x 
    Issue #3530855 by libbna, rkoller, the_g_bomb: The border of field types...

  • longwave committed e7013351 on 11.x 
    Issue #3530855 by libbna, rkoller, the_g_bomb: The border of field types...
longwave’s picture

longwave
he/him
Primary language English
Location UK
commented
Version: 11.x-dev » 11.2.x-dev
Status: Reviewed & tested by the community » Fixed

This is eligible for backport as an accessibility bug fix, but does not apply cleanly to 10.6.x. If anyone wants to backport this down to 10.x please open a backport MR; otherwise we will just fix this in 11.x and move on.

Committed and pushed e7013351307 to 11.x and dadcf295d0c to 11.2.x. Thanks!

For changes like this, screenshots are only helpful if they show both before and after, so I have not credited anyone that only uploaded "after" screenshots.

longwave closed merge request !12420

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.