Problem/Motivation

Configuring a Webform field to be 'Read only' applies the following CSS:

/**
 * Readonly inputs. (@see .form-disabled)
 * @see https://www.wufoo.com/html5/attributes/21-readonly.html
 */
.webform-readonly input[type="date"],
.webform-readonly input[type="datetime-local"],
.webform-readonly input[type="email"],
.webform-readonly input[type="number"],
.webform-readonly input[type="password"],
.webform-readonly input[type="search"],
.webform-readonly input[type="tel"],
.webform-readonly input[type="text"],
.webform-readonly input[type="time"],
.webform-readonly input[type="url"],
.webform-readonly textarea {
  color: #717171;
  border-color: #bbb;
  background: #ededed;
}

However, this CSS does not meet WCAG 2 AA minimum contrast ratio thresholds. Reference: https://accessible-colors.com/

My text color is #717171 at 18px and regular weight
My background color is #EDEDED

My design must be AA compliant
Fails AA
Required contrast ratio: 4.5
Your contrast ratio: 4.17

Steps to reproduce

  1. Configure a Webform field to be 'Read only'
  2. Run axe DevToos: https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdo...

Proposed resolution

Update readonly styling to meet WCAG 2 AA minimum contrast ratio thresholds

Remaining tasks

  1. Write a patch
  2. Review
  3. Commit

User interface changes

Readonly input meets WCAG 2 AA minimum contrast ratio thresholds

API changes

None

Data model changes

None

CommentFileSizeAuthor
#6 3378197-6.patch422 bytesjrockowitz
#4 Increase_contrast_ratio_by_changing_background_color-3378197-4.patch532 bytestguerineau

Comments

idebr created an issue. See original summary.

jrockowitz’s picture

jrockowitz commented
Status: Active » Postponed (maintainer needs more info)

Please suggest the right colors/contrast.

idebr’s picture

idebr commented
Status: Postponed (maintainer needs more info) » Active

Per https://accessible-colors.com, either:

Passes AA
if you change background color to #F6F6F6
New contrast ratio: 4.52

or 

Passes AA
if you change text color to #6B6B6B
New contrast ratio: 4.55
tguerineau’s picture

tguerineau commented
StatusFileSize
new Increase_contrast_ratio_by_changing_background_color-3378197-4.patch532 bytes

# Issue summary
This patch aims to solve the issue with the contrast ratio in read-only webform fields. As per WCAG 2 AA standards, the color contrast ratio needs to be 4.5 or higher. However, the existing contrast ratio was found to be 4.17.

# The solution
To address this, I changed the text color from `#717171` to `#6B6B6B` in the `.webform-readonly` CSS class. This brings the contrast ratio up to 4.55, ensuring we meet the minimum contrast ratio required by WCAG 2 AA.

# Next steps
I've attached a patch with these changes. This patch should be applied to the webform module. I've tested it in my local environment and everything appears to be working correctly.

The attached patch is named `Increase_contrast_ratio_by_changing_text_color-3378197-4.patch`.

This should resolve the issue and improve accessibility for read-only fields.

Please review the patch.

@maintainers: Please consider this patch for the next release. If it works as expected, we can change the issue status to 'Reviewed & Tested by the Community'.

tguerineau’s picture

tguerineau commented
Status: Active » Needs review
jrockowitz’s picture

jrockowitz commented
StatusFileSize
new 3378197-6.patch422 bytes
idebr’s picture

idebr commented
Status: Needs review » Reviewed & tested by the community

The patch in #6 correctly updates readonly styling to meet WCAG 2 AA minimum contrast ratio thresholds, thanks!

  • jrockowitz authored 954dcd20 on 6.1.x 
    Issue #3378197 by jrockowitz, tguerineau: Readonly input does not meet...

  • jrockowitz authored 954dcd20 on 6.x 
    Issue #3378197 by jrockowitz, tguerineau: Readonly input does not meet...

  • jrockowitz authored 954dcd20 on 6.2.x 
    Issue #3378197 by jrockowitz, tguerineau: Readonly input does not meet...
jrockowitz’s picture

jrockowitz commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

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