Splitting issue from #660576: Ensuring Proper Color Contrast for Garland

Initial post:

Seven's testing hit 113 elements:

* Luminosity Contrast Ratio: 20 failures
* Brightness difference: 15 failures
* Color difference: 41 failures

Especially comment #9, #12 & #14

CommentFileSizeAuthor
#41 Before-link-patch.png150.25 KBmgifford
#41 After-link-patch.png177.32 KBmgifford
#37 740756-7-seven_contrasting_buttons-37.patch464 bytesmgifford
#29 content-add.png69.48 KBdead_arm
#26 before.png8.24 KBreglogge
#26 after.png8.26 KBreglogge
#24 740756-7-seven_contrasting_buttons-4.patch524 bytesmgifford
#20 740756-7-seven_contrasting_buttons-3.patch520 bytesmgifford
#16 740756-7-seven_contrasting_buttons-2.patch767 bytesmgifford
#16 Comparison_in_submit_buttons.png35.95 KBmgifford
#11 740756-7-seven_contrasting_buttons.patch572 bytesjanusman
#7 screenshot-seven-button-contrast-after.png93.46 KBjanusman
#7 buttons.png1.06 KBjanusman
#7 740756-7-seven_contrasting_buttons.patch533 bytesjanusman
#7 screenshot-seven-button-contrast-before.png86.42 KBjanusman
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Issue tags: +Accessibility, +needs theming help, +Seven

adding tagging.

Hope this allows us to properly focus the discussion on improving the contrast in Seven.

seutje’s picture

seutje CreditAttribution: seutje commented

subscribe

bleen’s picture

bleen CreditAttribution: bleen commented

I'm not overly familiar with standards in this area, but I got dizzy looking at an an error with a link in it... the deep orange bg with the blue link is horrifying. My brain hurt...

aspilicious’s picture

aspilicious CreditAttribution: aspilicious commented

There is an issue for that... Saw it long time ago... Webchick started it

aspilicious’s picture

aspilicious CreditAttribution: aspilicious commented

Found it!

==> #639368: Contrast between error and link colour causes death to eyeballs

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

I've got a link here to a bunch of color contrast tools http://delicious.com/mgifford/color

This Firefox Plugin is a good tool (but there are lots of others) - http://delicious.com/mgifford/color

Please suggest some better colors!

janusman’s picture

janusman CreditAttribution: janusman commented
Status: Active » Needs review
FileSize
screenshot-seven-button-contrast-before.png86.42 KB
740756-7-seven_contrasting_buttons.patch533 bytes
buttons.png1.06 KB
screenshot-seven-button-contrast-after.png93.46 KB

A start: buttons with more contrast.

Copy buttons.png to Seven's images/ folder, apply patch to seven's style.css.

Status: Needs review » Needs work

The last submitted patch, 740756-7-seven_contrasting_buttons.patch, failed testing.

janusman’s picture

janusman CreditAttribution: janusman commented
Status: Needs work » Needs review

Huh? Patches will not apply because seven is not yet in HEAD. So ignore the above error.

aspilicious’s picture

aspilicious CreditAttribution: aspilicious commented

Seven is in head... long time ago... o_O

janusman’s picture

janusman CreditAttribution: janusman commented
FileSize
740756-7-seven_contrasting_buttons.patch572 bytes

Total FAIL on my part =P.

New patch.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

This a applied nicely in my sandbox. I'm thinking it needs a usability person to review it. Or does it?

aspilicious’s picture

aspilicious CreditAttribution: aspilicious commented

Me dislikes the black... :(

bleen’s picture

bleen CreditAttribution: bleen commented

I agree with aspilicious... the black is way too harsh

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

@aspilicious & @bleen18 can you re-roll the patch with another option?

If the patch above is too dark, what would look good and also be accessible?

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
FileSize
Comparison_in_submit_buttons.png35.95 KB
740756-7-seven_contrasting_buttons-2.patch767 bytes

A small change can make this more visible.

A contrast like this for background/foreground color is fine:
#474747
#e0e0e0

http://www.webaim.org/resources/contrastchecker/

aspilicious’s picture

aspilicious CreditAttribution: aspilicious commented

Why can't we use the new non active, and the old active? Just a bit darker text on the button is fine for me if that passes the contrastchecker.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

Main thing is darker text on the submit button.

I was trying to get a bit fancier by ensuring that there is some similarity between the active & non-active look (it should just look reversed in my opinion).

Anyways, it can always be simpler. This is just text after all.

aspilicious’s picture

aspilicious CreditAttribution: aspilicious commented

I think this

-  color: #5a5a5a;
+  color: #474747;

can be rtbc'd.

I don't think we should change the active button as it has very good color contrast at the moment.
If you make a patch for only that part you got my bless.
We only need someone like yoroy or bohjan to give the final bless.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
FileSize
740756-7-seven_contrasting_buttons-3.patch520 bytes

ok, here it is then.

yoroy’s picture

yoroy CreditAttribution: yoroy commented

Subscribe

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Issue tags: -Accessibility, -needs theming help, -Seven

#20: 740756-7-seven_contrasting_buttons-3.patch queued for re-testing.

Status: Needs review » Needs work
Issue tags: +Accessibility, +needs theming help, +Seven

The last submitted patch, 740756-7-seven_contrasting_buttons-3.patch, failed testing.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Status: Needs work » Needs review
FileSize
740756-7-seven_contrasting_buttons-4.patch524 bytes

Trying to keep up with core.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

I think we need some before/after screenshots.

reglogge’s picture

reglogge CreditAttribution: reglogge commented
FileSize
after.png8.26 KB
before.png8.24 KB

Screenshot before and after patch from #24 attached.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

I'm going to vote for no change - afaict this passes WCAG AA as it is and requires no change. The darker #474747 changes the design (its quite a bit darker).

The bottom most color in the gradient (the darkest bit showing) is around #e7e7e7 and the text is #5a5a5a which is a contrast ratio of 5.57:1 - more than enough for Level 2 (requires 4.5:1). #474747 has a ratio of 7.51:1 which would pass AAA but that is not a requirement of D7.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Status: Needs review » Closed (won't fix)

Ok, so we can set this as Closed (Won't fix). I think there are some issues with the greys in D7. I'd like to see it using a default grey that could easily support white or black backgrounds. However, that may need to wait till we have an Eight theme to work with.

If folks disagree with this then we can re-activate this issue.

dead_arm’s picture

dead_arm
she/her
Primary language English
CreditAttribution: dead_arm commented
Version: 7.x-dev » 8.x-dev
Status: Closed (won't fix) » Active
FileSize
content-add.png69.48 KB

Re-opening this issue to serve as a followup to color contrast failures in Seven that were found during Views UI compliancy changes.

Seven's blue link color: #0074BD Does NOT pass AA when on even row table striping background-color: #F3F4EE, for example here on content add:

content-add.png

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

Thanks @dead_arm - this was the issue here #1806022: Views' text color does not have sufficient contrast

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Lets look at the facts please:

4.48:1 is the contrast ratio of small text #0074BD on a #F3F4EE background.

The requirement for AA is 4.5:1, so you can see this is not exactly a dramatic failure, its very close indeed, perhaps even within a margin of error.

#0073BD would provide AAA however I have tried it, in terms of the design etc.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

We don't need AAA. If we can do it and it still looks great, terrific. But the goal is AA.

Can we get some clarification about which tool is being used? I verified Jeff's response here;
http://webaim.org/resources/contrastchecker/

dead_arm’s picture

dead_arm
she/her
Primary language English
CreditAttribution: dead_arm commented

I was using http://contrast-a.dasplankton.com/ and also have a 4.48:1 ratio, but that isn't 4.5:1...

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

I use Contrast A most of the time and was for this test.

#0073BD is a barely imperceptible difference to #0074BD, just a tiny bit brighter.

dead_arm, as you can see I am interested in discussion and solutions, re-stating obvious facts is a tad righteous and not exactly helpful.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Status: Active » Closed (duplicate)

Thanks for the work done here, if you haven't done so already it would be great to provide accessibility feedback to the Seven style guide proposal. The meta issue is #1986434: New visual style for Seven

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
CreditAttribution: tim.plunkett commented
Status: Closed (duplicate) » Active

This is a bug report, that's a meta issue and proposal.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Status: Active » Needs review
FileSize
740756-7-seven_contrasting_buttons-37.patch464 bytes

Lets see if this patch helps to close this issue.

dead_arm’s picture

dead_arm
she/her
Primary language English
CreditAttribution: dead_arm commented
Status: Needs review » Reviewed & tested by the community

Tested and the contrast passes.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented

Looks good to me. RTBC++

catch’s picture

catch
he/him
Primary language English
CreditAttribution: catch commented
Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs screenshots

Sure this is fine but please provide screenshots before/after.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Status: Needs review » Reviewed & tested by the community
FileSize
After-link-patch.png177.32 KB
Before-link-patch.png150.25 KB

Some simple before/after photos.

Before patch

After patch

Adding this and setting it back to RTBC as this is a very minor css change.

echoz’s picture

echoz CreditAttribution: echoz commented

Seven's new table design no longer has table striping or any background color that does not pass AA contrast compliance with link color #0074bd. The table th background is #f5f5f2, and the row hover is #f7fcff. It seems this patch is no longer needed.

echoz’s picture

echoz CreditAttribution: echoz commented
Status: Reviewed & tested by the community » Closed (works as designed)
Issue tags: -Needs screenshots, -needs theming help

Closing if there is no other issue/bug here, which does fall back to Lewis's invitation in #35 for accessibility feedback of #1986434: New visual style for Seven

dead_arm’s picture

dead_arm
she/her
Primary language English
CreditAttribution: dead_arm commented

Going forward I think it may be more helpful to address Seven's WCAG compliance in individually-filed issues, so that they can be resolved as they are addressed, instead of reopening this one like I did previously. I've added #2053145: Link color does not meet WCAG AA contrast ratio in header to the list of related issues on the meta issue #1986434: New visual style for Seven.