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

VERIFIED WONTFIX

Status

()

Firefox
Theme
VERIFIED WONTFIX
10 months ago
9 months ago

People

(Reporter: Virtual, Unassigned)

Tracking

({nightly-community})

56 Branch
x86_64
Windows 7
nightly-community
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments)

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)
Flags: needinfo?(dale)
Summary: Green lock in identity block is too green and eye catchy → Green lock in identity block is too green and too eye catchy
Summary: Green lock in identity block is too green and too eye catchy → Green lock in identity block is too green and too eye catchy with HTTPS

Updated

10 months ago
Whiteboard: [photon] [triage] → [photon-visual] [triage]

Comment 5

10 months ago
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.
status-firefox54: --- → unaffected
status-firefox55: --- → unaffected
status-firefox56: --- → affected
status-firefox-esr52: --- → unaffected
Has Regression Range: --- → yes
Has STR: --- → yes
But still text color and padlock color are different,
and like Adolfo Jayme wrote, it's kinda distracting.
Summary: Green lock in identity block is too green and too eye catchy with HTTPS → Green padlock in identity block is too green and too eye catchy with HTTPS

Comment 8

10 months ago
(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?
Flags: needinfo?(shorlander)
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.
(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.
Flags: needinfo?(shorlander)
Closing based on comment 10.
Status: NEW → RESOLVED
Last Resolved: 9 months ago
Resolution: --- → WONTFIX
Whiteboard: [photon-visual] [triage]
Status: RESOLVED → VERIFIED
Has Regression Range: yes → ---
Has STR: yes → ---
status-firefox54: unaffected → ---
status-firefox55: unaffected → ---
status-firefox56: affected → ---
status-firefox-esr52: unaffected → ---
Keywords: regression
You need to log in before you can comment on or make changes to this bug.