Increase contrast on inline form error text [#2503453]

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
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)

Comment	File	Size	Author
#16	Error-color-post-patch.png	118.84 KB	mgifford
#16	Error-color-prior2patch.png	108.89 KB	mgifford
#13	Screen Shot 2015-07-23 at 15.52.04.jpg	343.74 KB	lewisnyman
#13	Screen Shot 2015-07-23 at 15.50.42.jpg	386.52 KB	lewisnyman
#12	increase_inline_form_error_contrast-2503453-12.patch	800 bytes	mgifford
#7	increase_contrast_on-2503453-7.patch	1.45 KB	Anonymous (not verified)
#4	increase_inline_form_error_contrast-2503453-1.patch	782 bytes	rikki_iki
	error-txt-contrast.png	1.89 KB	kattekrab
	better-contrast.png	104.56 KB	kattekrab
	error-contrast.png	81.51 KB	kattekrab

Comments

Comment #1

kattekrab commented 10 June 2015 at 00:32

Issue tags:

+Accessibility

Comment #2

kattekrab commented 10 June 2015 at 00:37

Parent issue:

» #1493324: Inline form errors for accessibility and UX

Comment #3

kattekrab commented 10 June 2015 at 00:43

Comment #4

rikki_iki commented 10 June 2015 at 11:51

Status:

Active

» Needs review

Status	File	Size
new	increase_inline_form_error_contrast-2503453-1.patch	782 bytes

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

Comment #5

10 June 2015 at 11:57

Status:

Needs review

» Needs work

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

Comment #6

Anonymous (not verified) commented 11 June 2015 at 08:41

Assigned:

Unassigned

Status	File	Size
new	increase_contrast_on-2503453-7.patch	1.45 KB

Comment #8

mgifford

he/him

English

commented 11 June 2015 at 13:30

@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).

Comment #9

lewisnyman

he/him

commented 12 June 2015 at 16:03

Issue tags:

+frontend, +CSS, +styleguide

Comment #10

kattekrab commented 24 June 2015 at 05:09

The colour suggestion in the issue queue actually passes WCAG AAA

Comment #11

mgifford

he/him

English

commented 17 July 2015 at 02:34

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.

Comment #12

mgifford

he/him

English

commented 23 July 2015 at 13:33

Status	File	Size
new	increase_inline_form_error_contrast-2503453-12.patch	800 bytes

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

Comment #13

lewisnyman

he/him

commented 23 July 2015 at 14:56

Issue summary:	View changes
Issue tags:		+Needs issue summary update

Status	File	Size
new	Screen Shot 2015-07-23 at 15.50.42.jpg	386.52 KB
new	Screen Shot 2015-07-23 at 15.52.04.jpg	343.74 KB

4 files were hidden/shown/deleted

Status	File	Size
hidden	better-contrast.png	104.56 KB
hidden	error-txt-contrast.png	1.89 KB
hidden	increase_inline_form_error_contrast-2503453-1.patch	782 bytes
hidden	increase_contrast_on-2503453-7.patch	1.45 KB

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:

Comment #14

lewisnyman

he/him

commented 24 July 2015 at 11:19

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

Setting to needs work as the issue summary needs work

Comment #15

mgifford

he/him

English

commented 27 July 2015 at 20:18

Issue summary:

View changes

Comment #16

mgifford

he/him

English

commented 27 July 2015 at 20:46

Issue summary:

View changes

Status	File	Size
new	Error-color-prior2patch.png	108.89 KB
new	Error-color-post-patch.png	118.84 KB

Comment #17

mgifford

he/him

English

commented 27 July 2015 at 20:47

Issue tags:

-Needs issue summary update

I think the issue summary is accurate now.

Comment #18

mgifford

he/him

English

commented 27 July 2015 at 20:48

Status:

Needs work

» Needs review

Comment #19

lewisnyman

he/him

commented 27 July 2015 at 21:08

Status:

Needs review

» Reviewed & tested by the community

Great! Thank you.

Comment #20

alexpott

he/they

English

🇪🇺🌍

commented 30 July 2015 at 16:52

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.

Comment #21

30 July 2015 at 16:57

alexpott committed 21dd786 on 8.0.x

Issue #2503453 by mgifford, bobrov1989, rikki_iki, kattekrab, LewisNyman...

Comment #22

yesct commented 3 August 2015 at 12:40

Issue summary:

View changes

trying to fix the images in the summary

Comment #23

17 August 2015 at 12:44

Status:

Fixed

» Closed (fixed)

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

Increase contrast on inline form error text

Problem/Motivation

Proposed resolution

Remaining tasks

User interface changes

API changes

Beta phase evaluation

Screenshots

Poor contrast (Using WCAG Color Checker Firefox Plugin)

Accessible contrast (Using WCAG Color Checker Firefox Plugin)

Comments

Parent issue

Related issues