1022604 - Customize Mode's exit button should be more legible in High Contrast mode

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P4)

Description

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: Screenshot

Customize Mode's exit button has a colored background, reducing contrast and thereby reducing legibility (and prettiness) for people needing high contrast. See attached screenshot.

Comment 1

[Dão Gottwald [:dao]]

Attachment: patch

This makes the green darker too meet WCAG 2.0 level AAA. Alternatively, we could keep the current green and make the text black, but this somehow looked weird to me.

Comment 2

[Stephen Horlander [:shorlander]]

(In reply to Dão Gottwald [:dao] from comment #1)
> Created attachment 8780794 [details] [diff] [review]
> patch
> 
> This makes the green darker too meet WCAG 2.0 level AAA. Alternatively, we
> could keep the current green and make the text black, but this somehow
> looked weird to me.

This looks good, but I would like to bikeshed on the colors a bit :)

We have been (slowly) doing an inventory on colors and trying to make them consistent. I put together an overview here: https://mozilla.invisionapp.com/share/BZ4692P6D#/screens/101883045

Can we please use #fff on #2f811a for the normal state and #fff on #276e17 for the hover state?

These should pass meet the contrast recommendation:
http://leaverou.github.io/contrast-ratio/#%23fff-on-%232f811a
http://leaverou.github.io/contrast-ratio/#%23fff-on-%23276e17

#2f811a in different formats:
rgba(47, 129, 26, 1)
hsla(108, 66%, 30%, 1)

#276e17 in different formats:
rgba(39, 110, 23, 1)
hsla(109, 65%, 26%, 1)

Comment 3

[Dão Gottwald [:dao]]

Attachment: patch v2

Comment 4

[Stephen Horlander [:shorlander]]

Comment on attachment 8790802 [details] [diff] [review]
patch v2

Review of attachment 8790802 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good, thank you!

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/16c9625e4fa1
Tweak customize mode's exit button colors to provide more contrast. r=shorlander

Comment 6

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/16c9625e4fa1

Comment 7

[Md. Majedul islam]

I have reproduced this bug with Firefox nightly 32.0a1 (2014-06-09) on Windows 10, 64 Bit.

The Bug's fix is now verified on latest 51.0a1 (2016-09-15).


Build ID 	20160915030417

User Agent 	Mozilla/5.0 (Windows NT 10.0; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0

[bugday-20160914]

Comment 8

[Dão Gottwald [:dao]]

Thanks!