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

Files: 
CommentFileSizeAuthor
#41 Before-link-patch.png150.25 KBmgifford
#41 After-link-patch.png177.32 KBmgifford
#37 740756-7-seven_contrasting_buttons-37.patch464 bytesmgifford
PASSED: [[SimpleTest]]: [MySQL] 56,845 pass(es).
[ View ]
#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
PASSED: [[SimpleTest]]: [MySQL] 24,827 pass(es).
[ View ]
#20 740756-7-seven_contrasting_buttons-3.patch520 bytesmgifford
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 740756-7-seven_contrasting_buttons-3.patch.
[ View ]
#16 740756-7-seven_contrasting_buttons-2.patch767 bytesmgifford
PASSED: [[SimpleTest]]: [MySQL] 22,141 pass(es).
[ View ]
#16 Comparison_in_submit_buttons.png35.95 KBmgifford
#11 740756-7-seven_contrasting_buttons.patch572 bytesjanusman
PASSED: [[SimpleTest]]: [MySQL] 20,927 pass(es).
[ View ]
#7 screenshot-seven-button-contrast-after.png93.46 KBjanusman
#7 buttons.png1.06 KBjanusman
#7 740756-7-seven_contrasting_buttons.patch533 bytesjanusman
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 740756-7-seven_contrasting_buttons.patch.
[ View ]
#7 screenshot-seven-button-contrast-before.png86.42 KBjanusman

Comments

mgifford’s picture

adding tagging.

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

seutje’s picture

subscribe

bleen18’s picture

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

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

aspilicious’s picture

mgifford’s picture

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

Status:Active» Needs review
StatusFileSize
new86.42 KB
new533 bytes
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 740756-7-seven_contrasting_buttons.patch.
[ View ]
new1.06 KB
new93.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

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

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

janusman’s picture

StatusFileSize
new572 bytes
PASSED: [[SimpleTest]]: [MySQL] 20,927 pass(es).
[ View ]

Total FAIL on my part =P.

New patch.

mgifford’s picture

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

aspilicious’s picture

Me dislikes the black... :(

bleen18’s picture

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

mgifford’s picture

@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

StatusFileSize
new35.95 KB
new767 bytes
PASSED: [[SimpleTest]]: [MySQL] 22,141 pass(es).
[ View ]

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

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

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

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

StatusFileSize
new520 bytes
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 740756-7-seven_contrasting_buttons-3.patch.
[ View ]

ok, here it is then.

yoroy’s picture

Subscribe

mgifford’s picture

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

Status:Needs work» Needs review
StatusFileSize
new524 bytes
PASSED: [[SimpleTest]]: [MySQL] 24,827 pass(es).
[ View ]

Trying to keep up with core.

Jeff Burnz’s picture

I think we need some before/after screenshots.

reglogge’s picture

StatusFileSize
new8.26 KB
new8.24 KB

Screenshot before and after patch from #24 attached.

Jeff Burnz’s picture

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

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

Version:7.x-dev» 8.x-dev
Status:Closed (won't fix)» Active
StatusFileSize
new69.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

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

Jeff Burnz’s picture

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

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

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

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

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: [meta] New visual style for Seven

tim.plunkett’s picture

Status:Closed (duplicate)» Active

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

mgifford’s picture

Status:Active» Needs review
StatusFileSize
new464 bytes
PASSED: [[SimpleTest]]: [MySQL] 56,845 pass(es).
[ View ]

Lets see if this patch helps to close this issue.

dead_arm’s picture

Status:Needs review» Reviewed & tested by the community

Tested and the contrast passes.

LewisNyman’s picture

Looks good to me. RTBC++

catch’s picture

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

Status:Needs review» Reviewed & tested by the community
StatusFileSize
new177.32 KB
new150.25 KB

Some simple before/after photos.

Before patchAfter patch

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

echoz’s picture

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

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: [meta] New visual style for Seven

dead_arm’s picture

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: [meta] New visual style for Seven.