1593886 - [Dark theme] Re-evaluate the contrast between urls and the lighter background

Status: RESOLVED FIXED

(Firefox :: Address Bar, enhancement, P2)

Description

[Will]

Attachment: megabartcrbt.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

Issue with megabar: the text contrast ratio of the URL's is too low! (Light blue text on grey). See red arrows in attached screenshot

Comment 1

[Will]

Attachment: dark non megabar.png

For comparison, this is what it looks like when I disable Megabar. (Using Firefox's dark theme). It seems like someone forgot to update the Megabar for dark theme, it's still using the Default theme colors.

Comment 2

[Will]

For more info, I'm using Windows 10 v1903 and Windows 10 is set to dark mode. When Firefox is set to Default theme, the menu is much lighter than it is compared to Firefox's dark theme. Megabar should be dark when Firefox is using Dark theme

Comment 3

[Marco Bonardo [:mak]]

Hm, for me they have identical colors, the only difference I see is maybe about antialias.
You should not be using the megabar in Firefox 71 though, it's not a ready feature, the only usable build for it is Nightly.
Can you reproduce the problem in Nightly 72?

Comment 4

[Will]

(In reply to Marco Bonardo [:mak] from comment #3)

Hm, for me they have identical colors, the only difference I see is maybe about antialias.
You should not be using the megabar in Firefox 71 though, it's not a ready feature, the only usable build for it is Nightly.
Can you reproduce the problem in Nightly 72?

I'll check Nightly when I get home but I was just wondering, the difference I'm seeing when megabar is disabled, is that a bug or intentional? To repro: set Windows 10 to dark mode, then try Firefox's "Default" theme and check it, then switch to Firefox's "Dark" theme and check it. It seems strange or wrong that there is a difference there (see my screenshots above. When Firefox is using its Default theme, the URL bar has the same colors as seen in megabartcrbt.png )

Comment 5

[Marco Bonardo [:mak]]

(In reply to Will from comment #4)

I'll check Nightly when I get home but I was just wondering, the difference I'm seeing when megabar is disabled, is that a bug or intentional?

It would be a bug, but because the megabar is not intended to be enabled in beta, it may just be something we have fixed later.
I use Windows 10 Dark mode every day with Nightly, I don't see your problem.
So, before doing any further investigation, we should check if the problem is addressed in Nightly or not.

Comment 6

[Will]

So I just checked it in Nightly and there is an issue that should probably be cleared up/addressed before this megabar issue can be fixed. Here is the link, it is not about megabar https://bugzilla.mozilla.org/show_bug.cgi?id=1595316

Comment 7

[Marco Bonardo [:mak]]

yes, that's probably valid, but if I understand correctly you cannot reproduce the problem with the megabar in Nightly, right?

Comment 8

[Will]

Attachment: nightlymegadefaultdark.png

I can repro in Nightly too. I wish it was darker when the user selects Dark theme. (Also, another difference I just noticed, do you see how the shade of blue used for highlighting is different in Dark theme vs Default theme?)

Comment 9

[Will]

So once bug 1540515 is fixed, Megabar will be darker when the user selects Firefox's Dark theme?

Comment 10

[Marco Bonardo [:mak]]

yeah, let's just dupe to bug 1540515, and then if the problem is still there we can open a new bug.

Comment 11

[Tim Nguyen :ntim]

bug 1540515 won't really fix this, megabar intentionally follows the textbox background as opposed to the current urlbar.

Comment 12

[Dão Gottwald [::dao]]

(In reply to Will from comment #9)

So once bug 1540515 is fixed, Megabar will be darker when the user selects Firefox's Dark theme?

This is incorrect. The megabar doesn't use the --autocomplete-popup-background variable. It uses the text field's background instead.

Bug 1540515 isn't about the dark theme when explicitly selected either, it's about the dark theme when using it automatically in dark mode.

Comment 13

[Will]

Megabar or not, why are there 2 different dark themes? Surely this isn't intentional? There should only be 1 dark theme for Firefox

Comment 14

[Tim Nguyen :ntim]

Will, what is this bug exactly about ? Is this about the contrast ratio between the background and the URL color being too low ? or is this about the 2 different dark theme backgrounds ?

If it's the latter, bug 1540515 is already filed for that. If it's the former, we can keep this bug open and rename as appropriate.

Comment 15

[Will]

(In reply to Tim Nguyen :ntim from comment #14)

Will, what is this bug exactly about ? Is this about the contrast ratio between the background and the URL color being too low ? or is this about the 2 different dark theme backgrounds ?

If it's the latter, bug 1540515 is already filed for that. If it's the former, we can keep this bug open and rename as appropriate.

I think there should not be 2 different dark themes for the suggestions, and I'm hoping the team will consider scrapping the lighter one (the one that has a lower text contrast ratio). I can't think of a reason to have 2 different dark themes for Firefox.

Comment 16

[Will]

I guess this can be closed as a duplicate of 1540515

Comment 17

[Marco Bonardo [:mak]]

We were discussing yesterday with Verdi about the fact the megabar is changing the contrast ratio of urls/background, so maybe we should evaluate this as a possibility to change/update the urls color...

Comment 18

[Danny Colin [:sdk]]

(In reply to Marco Bonardo [:mak] from comment #3)

Hm, for me they have identical colors, the only difference I see is maybe about antialias.

The old urlbar dropdown has a darker background than the one of megabar.
(In reply to Will from comment #13)

Megabar or not, why are there 2 different dark themes? Surely this isn't intentional? There should only be 1 dark theme for Firefox

The old urlbar has indeed a darker color for the dropdown. So, since the new megabar expand the urlbar instead of opening a dropdown it makes sense that the expanded version has the same color of the urlbar.

(In reply to Marco Bonardo [:mak] from comment #17)

We were discussing yesterday with Verdi about the fact the megabar is changing the contrast ratio of urls/background

I think it will, in fact, make a lot of sense to use a darker color for the urlbar/megabar expanded or not. Every other input element (text, select, checkbox, radio) in Firefox have a darker background (#202023). IMHO, It would make the UI more consistent with the Photon Design System. It will also help with the fact that a part of the URL use a darker gray color and has a low contrast. I wanted to open a bugreport for that for a while now but haven't had the time to do so. So, I'm glad that's something that's already discussed internally :).

Comment 19

[Will]

Attachment: Chrome and Edge.png

Also, we're quite a lot lighter than Chrome and Edge (in screenshot attached, Chrome is on the left, new Chromium-based Edge is on the right).

Comment 20

[Danny Colin [:sdk]]

Attachment: firefox-darker-megabar.png

(In reply to Marco Bonardo [:mak] (Away 23 Dec - 6 Jan) from comment #17)

We were discussing yesterday with Verdi about the fact the megabar is changing the contrast ratio of urls/background, so maybe we should evaluate this as a possibility to change/update the urls color...

Do you mean, changing the urlbar background color could be a possibility instead of changing the text color of url. Personally, I would like that because it would respect the Photon Design System in which inputs (checkbox, text, radio) have a darker color value (See attachement for an example of what it should look like).

Comment 21

[Harry Twyford [:harry]]

The spec has been updated with new dark theme colours.

Comment 22

[Will]

Attachment: ffdarktcr.png

Is the contrast ratio the same as this?

Comment 23

[Harry Twyford [:harry]]

It's hard to tell what those colours are from looking at the screenshot. The new colours are #74c0ff text on a #4a4a4f background. Our designer says it has AA contrast.

Comment 24

[Harry Twyford [:harry]]

Attachment: Bug 1593886 - Update dark theme Urlbar colours. r?dao

Comment 25

[Will]

Attachment: MegaDark.png

I still really think it needs to be darker, please take a look at this screenshot comparison. At the top is current Firefox, below that is the new Chromium based Edge, below that is Chrome, and below that is Megabar in Nightly (I don't have access to a Mac to check Safari for macOS, can someone else do that when they get a moment?). Megabar is so much lighter... If Safari on macOS is also a lot darker than Megabar, I think that tells us we really are too light (talking about the text contrast ratios, of course)

Comment 26

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/10909dde7e43
Update dark theme Urlbar colours. r=dao

Comment 27

[Harry Twyford [:harry]]

(In reply to Will from comment #25)

Megabar is so much lighter...

While other browsers show darker results over a lighter toolbar, we are intentionally showing lighter results over a darker toolbar. This is to create the effect of the results "popping out" at you. I filed bug 1611929 to potentially define a new colour in our design system that is a half-step between the current megabar colour and the toolbar colour. This new colour would improve contrast. Failing that, you can of course file a new bug that the results are too light compared to other browsers and our designer can re-evaluate.

Comment 28

[Daniel Varga [:dvarga]]

Backed out changeset 10909dde7e43 (Bug 1593886) for causing browser-chrome failures at toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js

Push with failure: https://treeherder.mozilla.org/#/jobs?repo=autoland&selectedJob=286740515&resultStatus=testfailed%2Cbusted%2Cexception&classifiedState=unclassified&revision=10909dde7e43d021a4de6ba1319754f43c7838e2

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=286740055&repo=autoland&lineNumber=24047

Backout link: https://treeherder.mozilla.org/#/jobs?repo=autoland&selectedJob=286740055&resultStatus=testfailed%2Cbusted%2Cexception&classifiedState=unclassified&revision=5faeb3565712e6861a3582778521bcc55d43f569

[task 2020-01-28T15:06:24.261Z] 15:06:24     INFO - TEST-PASS | toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js | lwt-popup-darktext attribute should be removed - false == false - 
[task 2020-01-28T15:06:24.261Z] 15:06:24     INFO - Extension loaded
[task 2020-01-28T15:06:24.263Z] 15:06:24     INFO - Buffered messages finished
[task 2020-01-28T15:06:24.264Z] 15:06:24     INFO - TEST-UNEXPECTED-FAIL | toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js | Urlbar popup url color should be set to #45a1ff - "rgb(116, 192, 255)" == "rgb(69, 161, 255)" - JS frame :: chrome://mochitests/content/browser/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js :: test_popup_url :: line 226
[task 2020-01-28T15:06:24.264Z] 15:06:24     INFO - Stack trace:
[task 2020-01-28T15:06:24.264Z] 15:06:24     INFO - chrome://mochitests/content/browser/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js:test_popup_url:226
[task 2020-01-28T15:06:24.264Z] 15:06:24     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1062
[task 2020-01-28T15:06:24.264Z] 15:06:24     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1097
[task 2020-01-28T15:06:24.264Z] 15:06:24     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:925
[task 2020-01-28T15:06:24.264Z] 15:06:24     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:808

Comment 29

[Will]

(not sure if this belongs here or in 1611929) Another question I have about the text contrast ratio for the blue text especially: I know Google's UI guidelines say that, once text size is small enough (I don't remember the exact threshold) the contrast ratio has to be increased in order to meet accessibility minimums. Does Mozilla do this too for text contrast ratio accessibility guidelines? Because when I'm looking at the comparison I posted in comment 25, not only is Megabars text contrast ratio much lower but the text size is also significantly smaller than both Edge and Chrome. The combination of significantly lower contrast ratio AND significantly smaller text size is quite a difference compared to Edge and Chrome and I'm not sure it meets accessibility minimums. Again it would be really helpful to see what Safari for macOS is doing so we can compare Megabar to all the major browsers.

Comment 30

[Harry Twyford [:harry]]

Attachment: safari_dark_mode

(In reply to Will from comment #29)

Because when I'm looking at the comparison I posted in comment 25, not only is Megabars text contrast ratio much lower but the text size is also significantly smaller than both Edge and Chrome. The combination of significantly lower contrast ratio AND significantly smaller text size is quite a difference compared to Edge and Chrome and I'm not sure it meets accessibility minimums.

This is a good point. Would you mind filing a new bug for this? I'll let our designer know about it.

Again it would be really helpful to see what Safari for macOS is doing so we can compare Megabar to all the major browsers.

Attached.

Comment 31

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1e1237501a7d
Update dark theme Urlbar colours. r=dao

Comment 32

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/1e1237501a7d

Comment 33

[Will]

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

Created attachment 9123477 [details]
safari_dark_mode

(In reply to Will from comment #29)

Because when I'm looking at the comparison I posted in comment 25, not only is Megabars text contrast ratio much lower but the text size is also significantly smaller than both Edge and Chrome. The combination of significantly lower contrast ratio AND significantly smaller text size is quite a difference compared to Edge and Chrome and I'm not sure it meets accessibility minimums.

This is a good point. Would you mind filing a new bug for this? I'll let our designer know about it.

Again it would be really helpful to see what Safari for macOS is doing so we can compare Megabar to all the major browsers.

Attached.

Thanks Harry! I'm not sure if the small text size contrast ratio accessibility minimums issue should be yet another bug, so I mentioned it in 1611929 because the contrast ratio and text size issues are very closely related. Maybe show 1611929 to the designer?

Comment 34

[Verdi [:verdi] Best to slack me]

Attachment: theme colors

Stephen Horlander and I discussed this and decided to stick with the pattern in the design system where items closer to the viewer (higher z-index) are lighter. We then defined a new blue (Blue 30) that has the proper contrast ratio when displayed over that address bar background (Grey 60 in this case).
https://design.firefox.com/photon/visuals/color.html

Comment 35

[Will]

(In reply to Verdi [:verdi] Best to slack me from comment #34)

Created attachment 9124564 [details]
theme colors

Stephen Horlander and I discussed this and decided to stick with the pattern in the design system where items closer to the viewer (higher z-index) are lighter. We then defined a new blue (Blue 30) that has the proper contrast ratio when displayed over that address bar background (Grey 60 in this case).
https://design.firefox.com/photon/visuals/color.html

and issue 1611929 ?

Comment 36

[Verdi [:verdi] Best to slack me]

(In reply to Will from comment #35)

and issue 1611929 ?

Yeah - Harry filed that to make the background color grey 60 (instead of something close but not quite that) so that putting blue 30 text on it would have the proper contrast.

Comment 37

[Will]

(In reply to Verdi [:verdi] Best to slack me from comment #36)

(In reply to Will from comment #35)

and issue 1611929 ?

Yeah - Harry filed that to make the background color grey 60 (instead of something close but not quite that) so that putting blue 30 text on it would have the proper contrast.

I guess 1611929 can be closed then.

Would yous please consider increasing the text size slightly since you've ruled out changing the colors? If you look at other major competing browsers, Firefox is using a significantly smaller text size and it's especially an issue with the blue URL text. (for what it's worth, I don't have any vision issues and I had an eye exam about 5 months ago)

Comment 38

[Verdi [:verdi] Best to slack me]

(In reply to Will from comment #37)

Would yous please consider increasing the text size slightly

This is on my list to work out. We have a pref - browser.urlbar.update1.expandTextOnFocus but it's off by default. It's not an easy fix.

Comment 39

[Marco Bonardo [:mak]]

(In reply to Verdi [:verdi] Best to slack me from comment #38)

This is on my list to work out. We have a pref - browser.urlbar.update1.expandTextOnFocus but it's off by default. It's not an easy fix.

Expand text is about the text in the input field, I think Will referred to size of the text in the results pane (and more likely the url font size)

Comment 40

[Dão Gottwald [::dao]]

(In reply to Will from comment #37)

Would yous please consider increasing the text size slightly since you've ruled out changing the colors? If you look at other major competing browsers, Firefox is using a significantly smaller text size and it's especially an issue with the blue URL text. (for what it's worth, I don't have any vision issues and I had an eye exam about 5 months ago)

Could you please file a new bug?

Comment 41

[Will]

(In reply to Dão Gottwald [::dao] from comment #40)

(In reply to Will from comment #37)

Would yous please consider increasing the text size slightly since you've ruled out changing the colors? If you look at other major competing browsers, Firefox is using a significantly smaller text size and it's especially an issue with the blue URL text. (for what it's worth, I don't have any vision issues and I had an eye exam about 5 months ago)

Could you please file a new bug?

Sure, I just filed it https://bugzilla.mozilla.org/show_bug.cgi?id=1614238

Comment 42

[Will]

Just updated to 74.0b7, Megabar has been disabled by default and we're back to the darker color for the background. I mean no disrespect but after using 74.0b7 for less than an hour, I can say with 100% confidence that UX has made a mistake by lightening the background so much for Megabars dark mode. This is disappointing. UX team, please, seriously reconsider this. You should do more testing with this decision. Ask users which they prefer, the darker background or the lighter background. The URL bar and dropdown is arguably the most important part of a browsers UI and making a change like this should not be taken lightly. Please don't dismiss this constructive criticism, I want Firefox to do well.