1377786 - Green padlock in identity block is too green and too eye catchy with HTTPS

Status: VERIFIED WONTFIX

(Firefox :: Theme, defect)

Description

[Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.)]

STR:
1. Go to this website page - https://bugzilla.mozilla.org/
and see that green lock in identity block is too green and eye catchy, compared for example to green text



"Speedy" Regression window (mozilla-central)
Good:
https://ftp.mozilla.org/pub/firefox/nightly/2017/07/2017-07-01-03-02-03-mozilla-central/

Bad:
https://ftp.mozilla.org/pub/firefox/nightly/2017/07/2017-07-02-03-02-04-mozilla-central/

Pushlog:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=587daa4bdc4b40b7053f4ca3b74723ca747f3b52&tochange=4d3de12dcdc539f14fcb06539da39fa7176c8955

Probably caused by:
bug #1363502 [Firefox:Theme]-Implement new identity block appearance
bug #1367439 [Firefox:Theme]-Update toolbar background colors on OS X and Windows, update customize mode background to match
bug #1350210 [Firefox:Toolbars and Customization]-Add setting for Compact and Touch theme modes (a.k.a. "Density" control)

Comment 1

[Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.)]

Attachment: bug.png

Comment 2

[Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.)]

Attachment: bug (500%).png

Comment 3

[Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.)]

Attachment: no bug.png

Comment 4

[Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.)]

Attachment: no bug (500%).png

Comment 5

[Adolfo Jayme]

The new bright green is much, much better, IMHO. Since it was changed as part of the Photon redesign specifications, I don’t think it’s correct to call this a “regression”. I do agree with you in that the text’s color should match better with the icon’s, as the contrast between both shades is distracting.

Comment 6

[Dale Harvey (:daleharvey)]

This is as per spec - https://people-mozilla.org/~shorlander/projects/photon/Mockups/macOS.html

Comment 7

[Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.)]

But still text color and padlock color are different,
and like Adolfo Jayme wrote, it's kinda distracting.

Comment 8

[Dão Gottwald [:dao]]

(In reply to Virtual_ManPL [:Virtual] - (please needinfo? me - so I will see your comment/reply/question/etc.) from comment #7)
> But still text color and padlock color are different,

This is intentional too. Stephen, do you want to keep this as-is or revisit?

Comment 9

[Johann Hofmann [:johannh]]

Uh, I thought we aligned on having the same colors for those:

Wednesday, May 24th, 2017:
14:59:30 <johannh> shorlander: why does it have two different colors for the identity block?
14:59:35 <johannh> two different greens I mean
15:00:23 <shorlander> johannh: going for a brighter palette where possible, that breaks a lot for text when it comes to accessibility
15:00:32 <shorlander> icons / images don't have the same constraints
15:00:41 <johannh> shorlander: I disagree for the lock icon
15:01:01 <johannh> that's not just a pretty detail
15:01:38 <shorlander> Not trying to imply it is :)
15:02:35 <johannh> I don't understand the reasoning then
15:31:06 <shorlander> johannh: What I was getting at is that the reqs are stricter for text because reading distinct characters/words is more of a challenge for people with low vision vs. images that are usually stand alone and don't require parsing
15:31:09 <shorlander> In other words: I don't think people will miss the lock due to contrast concerns
15:49:26 <•dao> shorlander: I think there's a couple of issues. 1) while a11y guidelines for text can't be applied 1:1 here, they're not entirely irrelevant either. it's not at all clear to me that the proposed color provides sufficient contrast for people with poor vision to recognize this icon as a lock. 2) the icon and the label were supposed to form a unit in the
15:49:26 <•dao> security UI. using two different greens weakens that link. 3) personal opinion: the mismatch looks weird and unintended, using the same green for both elements seems cleaner to me
16:03:37 <shorlander> dao: fair point(s). I'll align them.

Comment 10

[Stephen Horlander [:shorlander]]

(In reply to Johann Hofmann [:johannh] from comment #9)
> Uh, I thought we aligned on having the same colors for those:
> 
> Wednesday, May 24th, 2017:
> 14:59:30 <johannh> shorlander: why does it have two different colors for the
> identity block?
> 14:59:35 <johannh> two different greens I mean
> 15:00:23 <shorlander> johannh: going for a brighter palette where possible,
> that breaks a lot for text when it comes to accessibility
> 15:00:32 <shorlander> icons / images don't have the same constraints
> 15:00:41 <johannh> shorlander: I disagree for the lock icon
> 15:01:01 <johannh> that's not just a pretty detail
> 15:01:38 <shorlander> Not trying to imply it is :)
> 15:02:35 <johannh> I don't understand the reasoning then
> 15:31:06 <shorlander> johannh: What I was getting at is that the reqs are
> stricter for text because reading distinct characters/words is more of a
> challenge for people with low vision vs. images that are usually stand alone
> and don't require parsing
> 15:31:09 <shorlander> In other words: I don't think people will miss the
> lock due to contrast concerns
> 15:49:26 <•dao> shorlander: I think there's a couple of issues. 1) while
> a11y guidelines for text can't be applied 1:1 here, they're not entirely
> irrelevant either. it's not at all clear to me that the proposed color
> provides sufficient contrast for people with poor vision to recognize this
> icon as a lock. 2) the icon and the label were supposed to form a unit in the
> 15:49:26 <•dao> security UI. using two different greens weakens that link.
> 3) personal opinion: the mismatch looks weird and unintended, using the same
> green for both elements seems cleaner to me
> 16:03:37 <shorlander> dao: fair point(s). I'll align them.

I brought them closer together, but the text is still a little darker to account for accessibility.

Comment 11

[Dão Gottwald [:dao]]

Closing based on comment 10.