Problem/Motivation

The disabled form labels that appear under the "secondary" node settings in the Seven theme do not meet WCAG AA section 1.4.3 requirements for text contrast.

Steps to reproduce

  1. Use the Standard install profile
  2. Login to Drupal 8
  3. Navigate to /node/add/article. The Seven theme should be in use.
  4. Ensure that there is at least one disabled field in the node meta data settings in the right-hand sidebar (or, manually set one to disabled using dev tools).
    • TIP: add the form-disabled class to the div.form-item wrapper.
  5. Run DAP Chrome plugin or other WCAG compliance checker on page. See a message similar to the following.

    "Minimum contrast of 4.43 with its background is not sufficient to meet WCAG AA requirements for text of size 13.008px and weight of 400."

    screenshot of disabled form fields, and corresponding HTML markup.

Proposed resolution

Review current colors and backgrounds for form labels within secondary settings and determine a suitable change that is in line with the Seven theme styles that also passes WCAG AA.

Proposal: darken the disabled form label from #737373 to #686868.

Remaining tasks

Update .form-disabled in core/themes/seven/css/components/form.css, change the color: #737373; to color: #686868;

User interface changes

Update Seven secondary disabled label styles to increase contrast for disabled secondary field labels.
Stable and Classy themes are NOT affected.

API changes

None

Data model changes

None

CommentFileSizeAuthor
#9 Untitled.png211.25 KBsahil432
#8 2930542-8.patch422 bytessahil432
Screen Shot 2017-12-13 at 11.00.53 AM.png188.81 KBsdewitt

Comments

sdewitt created an issue. See original summary.

sdewitt’s picture

sdewitt commented

Updated summary.

sdewitt’s picture

sdewitt commented
Version: 8.4.x-dev » 8.5.x-dev

Changed version to 8.5.x-dev

andrewmacpherson’s picture

andrewmacpherson commented
Issue summary: View changes

Thanks for reporting this @sdewitt.

This styling happens when the wrapper DIV has the .form-disabled class. I've update the steps-to-reproduce to mention this.

The background colour comes from a transparent CSS background-image linear-gradient, but using an eyedropper I figured it works out as #ECECEC in Firefox. The foreground text colour is #737373, so the resulting contrast is 4:1 (according to Lea Verou's Contrast Ratio - https://leaverou.github.io/contrast-ratio/#%23737373-on-%23ececec). Note: this is a different figure to the one @sdewitt reported, but still less than the recommended 4.5:1 value.

I propose we fix this by darkening the form label to #686868, which gets a ratio of 4.7:1 against #ECECEC on the Lea Verou tool. This slightly exceeds the required 4.5:1, but the the background colour is a CSS linear-gradient and this extra margin is intended to cover the discrepancy we've seen when measuring with different tools.

Note that WCAG SC 1.4.3 Contrast (minimum) has an exemption for "inactive user interface components". I'm unclear whether this applies to the form <label> or just to the <input>. SInce it only narrowly misses the required contrast, we may as well just darken it.

Run DAP Chrome plugin

Can you tell us more about which tool this is? I Googled the phrase, but found an unrelated "download accelerator" extension. All the colour checker tools I tried don't handle the transparency from CSS background-image.

Update: I see it's the IBM DAP Plugin, which you mentioned in #2034915-14: [meta] Track progress in WCAG 2.0 conformance. I've never tried that one yet.

andrewmacpherson’s picture

andrewmacpherson commented
Title: Seven disabled form labels in node secondary settings on entity form displays do not meet WCAG AA 1.4.3 for contrast » Disabled form labels in Seven theme's node meta-data do not meet WCAG AA 1.4.3 Contrast (minimum)
Issue tags: -field labels, -Entity forms +CSS, +Accessibility, +Novice, +SprintWeekend2018

A very simple patch is needed, suitable for a first-time patch contributors.

Tagging for the upcoming Drupal Global Sprint Weekend at the end of January.

Polite request: if you already have D8 commit credits, please consider leaving this issue for a first-time contributor.

andrewmacpherson’s picture

andrewmacpherson commented
Parent issue: » #740756: Ensuring Proper Color Contrast for Seven
Related issues: -#740756: Ensuring Proper Color Contrast for Seven
sahil432’s picture

sahil432 commented
Assigned: Unassigned » sahil432
sahil432’s picture

sahil432 commented
Status: Active » Needs review
StatusFileSize
new 2930542-8.patch422 bytes

Created my first patch and provided screenshot for the same.

sahil432’s picture

sahil432 commented
StatusFileSize
new Untitled.png211.25 KB

Forgot to add screenshot

andrewmacpherson’s picture

andrewmacpherson commented
Status: Needs review » Reviewed & tested by the community
Issue tags: -SprintWeekend2018

Patch #8 and screenshot are correct.

I tested this manually, since D8 core doesn't have any disabled fields in the node meta-data. When the .form-disabled class is present, the label now has a color contrast of 4.7:1.

Thanks @sahil432 and @sdewitt, this is a nice attention to detail and a great first core contribution.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

  • lauriii committed 957ff36 on 8.6.x 
    Issue #2930542 by sahil432, sdewitt, andrewmacpherson: Disabled form...

  • lauriii committed 6fc5ef1 on 8.5.x 
    Issue #2930542 by sahil432, sdewitt, andrewmacpherson: Disabled form...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Committed 957ff36 and pushed to 8.6.x, also cherry picked to 8.5.x. Thanks!

Status: Fixed » Closed (fixed)

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