Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
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
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
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 |
Comments
Comment #1
kattekrab CreditAttribution: kattekrab commentedComment #2
kattekrab CreditAttribution: kattekrab commentedComment #3
kattekrab CreditAttribution: kattekrab commentedComment #4
rikki_iki CreditAttribution: rikki_iki as a volunteer commentedA minuscule colour shift is all that's needed to pass WCAG AA, from #ea2800 to #e32700. Tiny patch attached.
Comment #6
Anonymous (not verified) CreditAttribution: Anonymous at FFW commentedComment #7
Anonymous (not verified) CreditAttribution: Anonymous at FFW commentedHere is my patch.
Comment #8
mgifford@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 CreditAttribution: LewisNyman at Wunder commentedComment #10
kattekrab CreditAttribution: kattekrab commentedThe colour suggestion in the issue queue actually passes WCAG AAA
Comment #11
mgiffordYup, 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
mgiffordThis 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 CreditAttribution: LewisNyman at Wunder commentedThanks 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 CreditAttribution: LewisNyman at Wunder commentedSetting to needs work as the issue summary needs work
Comment #15
mgiffordComment #16
mgiffordComment #17
mgiffordI think the issue summary is accurate now.
Comment #18
mgiffordComment #19
LewisNyman CreditAttribution: LewisNyman at Wunder commentedGreat! Thank you.
Comment #20
alexpottCommitted b8a78f4 and pushed to 8.0.x. Thanks!
Thanks for adding the beta evaluation to the issue summary.
Comment #22
YesCT CreditAttribution: YesCT commentedtrying to fix the images in the summary