Problem/Motivation

The inline error text introduced in #1493324: Inline form errors for accessibility and UX does not pass contrast requirements for WCAG AA.

Proposed resolution

Increase the text contrast by changing the color from #ea2800 to #ea2700 #e32700

Screenshots below show the WAVE tool report before and after.

Remaining tasks

 

Contributor tasks needed
Task Novice task? Contributor instructions Complete?
Create a patch Novice Instructions
Reroll the patch if it no longer applies. Novice Instructions
Update the issue summary Novice Instructions
Update the patch to incorporate feedback from reviews (include an interdiff) Instructions
Manually test the patch Novice Instructions
Add steps to reproduce the issue Novice Instructions

User interface changes

Yes. But minor. Color change of the inline error text.

API changes

No.

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Task: follow up.
Issue priority Normal
Unfrozen changes Unfrozen because it only changes a CSS colour and will improve accessibility and compliance with WCAG guidelines
Prioritized changes The main goal of this issue is accessibility

Screenshots

Poor contrast (Using WCAG Color Checker Firefox Plugin)

Accessible contrast (Using WCAG Color Checker Firefox Plugin)

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

kattekrab’s picture

Issue tags: +Accessibility
kattekrab’s picture

kattekrab’s picture

rikki_iki’s picture

Status: Active » Needs review
FileSize
782 bytes

A minuscule colour shift is all that's needed to pass WCAG AA, from #ea2800 to #e32700. Tiny patch attached.

Status: Needs review » Needs work

The last submitted patch, 4: increase_inline_form_error_contrast-2503453-1.patch, failed testing.

Anonymous’s picture

Assigned: Unassigned »
Anonymous’s picture

Assigned: » Unassigned
Status: Needs work » Needs review
FileSize
1.45 KB

Here is my patch.

mgifford’s picture

@bobrov1989 your patch applies nicely, but it's completely different than @rikki_iki's patch and it would be useful to know why. Looks like we got rid of the class form-error-message. Still useful to state that.

This meets WCAG 2.0 AA guidelines:
https://leaverou.github.io/contrast-ratio/#%23ac1d00-on-%23fcf4f2

But you patch actually reduces the contrast from what is there now:
https://leaverou.github.io/contrast-ratio/#%23a51b00-on-%23fcf4f2

I really don't know why we were using two colours of red for errors in Core, Seven & Bartik, there's still one place using this old color, but that's a separate issue.
https://leaverou.github.io/contrast-ratio/#%23ea2800-on-%23fcf4f2

I'm tempted to leave it as it is rather than reduce the contrast (even though we could).

LewisNyman’s picture

Issue tags: +frontend, +CSS, +styleguide
kattekrab’s picture

The colour suggestion in the issue queue actually passes WCAG AAA

mgifford’s picture

Yup, both meet WCAG 2.0 AAA against white:
http://leaverou.github.io/contrast-ratio/#%23ac1d00-on-white
http://leaverou.github.io/contrast-ratio/#%23a51b00-on-white

Against the pink it's still good for AA as I stated earlier:
https://leaverou.github.io/contrast-ratio/#%23ac1d00-on-%23fcf4f2

I'm not sure why we are changing the colour. There is no accessibility reason to change it (or not to change it) that I can see.

This issue though is about "Increase contrast on inline form error text"

#ea2800 is still in core the patch in #7 doesn't touch that colour (which doesn't have sufficient contrast). #4 does address this.

mgifford’s picture

This is essentially a reroll of #4. One of the class names changed.

Would be good to fix this one too, which is the only other reference to #ea2800 #2334067: error.svg doesn't have sufficient color contrast

LewisNyman’s picture

Thanks for this. This is an easier fix to make than completely changing the color.

Can we update the issue summary so the WAVE results reflect the new color?

Before:

After:

LewisNyman’s picture

Component: forms system » Seven theme
Status: Needs review » Needs work

Setting to needs work as the issue summary needs work

mgifford’s picture

Issue summary: View changes
mgifford’s picture

Issue summary: View changes
FileSize
108.89 KB
118.84 KB
mgifford’s picture

I think the issue summary is accurate now.

mgifford’s picture

Status: Needs work » Needs review
LewisNyman’s picture

Status: Needs review » Reviewed & tested by the community

Great! Thank you.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed b8a78f4 and pushed to 8.0.x. Thanks!

Thanks for adding the beta evaluation to the issue summary.

  • alexpott committed 21dd786 on 8.0.x
    Issue #2503453 by mgifford, bobrov1989, rikki_iki, kattekrab, LewisNyman...
YesCT’s picture

Issue summary: View changes

trying to fix the images in the summary

Status: Fixed » Closed (fixed)

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