1611929 - Urlbar background-color does not align with the Photon colors

Status: NEW

(Firefox :: Address Bar, defect, P3)

Description

[Harry Twyford]

The design update 1 Urlbar background-color is rgb(71, 71, 73). This is not a Photon colour. The design update 1 spec calls for the Urlbar background to be Gray 60, but that reduces contrast too much. We can't make it Gray 70 because that's the colour of the toolbar. We maybe need something along the lines of a Gray 65.

Comment 1

[Danny Colin [:sdk]]

(In reply to Harry Twyford [:harry] from comment #0)

The design update 1 Urlbar background-color is rgb(71, 71, 73). This is not a Photon colour. The design update 1 spec calls for the Urlbar background to be Gray 60, but that reduces contrast too much. We can't make it Gray 70 because that's the colour of the toolbar. We maybe need something along the lines of a Gray 65.

Wouldn't it be best to use the same color (#202023) as other inputs for consistency? See: https://bugzilla.mozilla.org/attachment.cgi?id=9118629

Comment 2

[Harry Twyford]

We want the results to be lighter than the toolbar to give them the effect of "popping out". There's a bit of discussion at bug 1593886 comment 25 and 27.

Comment 3

[Tim Nguyen :ntim]

(In reply to Danny Colin [:sdk] from comment #1)

(In reply to Harry Twyford [:harry] from comment #0)

The design update 1 Urlbar background-color is rgb(71, 71, 73). This is not a Photon colour. The design update 1 spec calls for the Urlbar background to be Gray 60, but that reduces contrast too much. We can't make it Gray 70 because that's the colour of the toolbar. We maybe need something along the lines of a Gray 65.

Wouldn't it be best to use the same color (#202023) as other inputs for consistency? See: https://bugzilla.mozilla.org/attachment.cgi?id=9118629

I think you're referring to about:config/about:preferences which use that color, that was done without any UX involvement, but I suspect if it were, the color chosen would probably be the same as the new tab page search input (which is similar to the urlbar's).

Comment 4

[Will]

Attachment: Megabardarkcomp.png

Just adding the screenshot comparison from 1593886, now including Safari for macOS (thanks to Harry). Notice how much lighter Megabar is compared to Chrome, Edge, Safari and the current stable Firefox too. I think it's pretty clear that Megabar should be darker.

Another factor here is the text size, Firefox uses a significantly smaller text size than other major browsers, see comment 29 here for more https://bugzilla.mozilla.org/show_bug.cgi?id=1593886#c29