1936587 - SVG favicon using prefers-color-scheme fill has poor contrast with dark new tab page background

Status: NEW

(Firefox :: New Tab Page, defect, P3)

Description

[Kestrel]

Attachment: ABC icon lacks contrast with dark new tab background

STR:

1. Enable the Light theme.
2. Pin https://www.abc.net.au to the new tab page shortcuts.
3. Change the new tab background color/image to dark.

Expected:
ABC icon stays black against white background.

Actual:
ABC icon is white against white background unless hovered.

Bug 1933158 excluded mask-icon but this happens with icon as well that uses prefers-color-scheme:

<link rel="icon" type="image/svg+xml" href="/core-assets/core/favicon.svg"/>

<style>
  g { fill: #000; }

  @media (prefers-color-scheme: dark) {
    g { fill: #fff; }
  }
</style>

Direct link to affected favicon:
https://www.abc.net.au/core-assets/core/favicon.svg

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=47b1ae23989b8389b90ec9fed715d9eae6455ad7&tochange=ec6364b47f312809587d58ec8fe38e02d7f78976

Regressed by Bug 1494016.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

:yazan, since you are the author of the regressor, bug 1494016, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 2

[Marco Bonardo [:mak]]

This is pretty much Bug 1792046, it's not a regression, we just made that bug a bit more visible.
We can exclude icons specifying bright/dark colors for now, until we add some kind of support for them.

Comment 3

[Kestrel]

I think it's more to do with the odd behavior of the new tab page shortcuts, it's the only place I can think of that uses a white background when claiming to prefer dark. A dark page background should switch the shortcuts to dark background as well or not send the prefers dark signal.

Comment 4

[Marco Bonardo [:mak]]

(In reply to Kestrel from comment #3)

I think it's more to do with the odd behavior of the new tab page shortcuts, it's the only place I can think of that uses a white background when claiming to prefer dark. A dark page background should switch the shortcuts to dark background as well or not send the prefers dark signal.

I suspect it's because historically most icons were built to look good on a white background.

On our (Places) side we can just notice we have incomplete support for dark/bright themed icons, we could do manipulation to ensure served icons appear good anyway.

Comment 5

[Marco Bonardo [:mak]]

Yazan, let's leave this bug in New Tab for evaluation from the appropriate team, rather file a dependency bug in Toolkit/Places to temporarily skip storing these icons.

Comment 6

[Yazan Al Macki [:yazan]]

Dependency bug filed (1938416) to skip storing these icons.

Comment 7

[Maxx Crawford [:maxx]]

Yazan / Marco,

Will this is be resolved in the dependency bug?

Note that we have a WIP fix for a similar bug. Our fix might allow us to support dark/light supportive SVGs.

Thanks!

Comment 8

[Maxx Crawford [:maxx]]

Triage reasoning:

• Severity: -- → S4: Cosmetic issue
• Priority: -- → P3: Backlog

Comment 9

[Marco Bonardo [:mak]]

(In reply to Maxx Crawford [:maxx] from comment #7)

Yazan / Marco,

Will this is be resolved in the dependency bug?

It would workaround the problem, in the sense we'd just stop storing SVGs that define a preferred color mode (dark/light), until further work is done to make them work correctly.
Though if your fix is almost there, and you think it's going to solve this, we can wait landing the "disabling" patch.

Comment 10

[Kestrel]

Disabling support for dark-mode SVGs would expand the scope of the problem to other parts of the interface (tabs and bookmarks showing dark icons against dark background) and be more of a regression than this issue which is currently limited to the new tab page.

Comment 11

[Marco Bonardo [:mak]]

(In reply to Kestrel from comment #10)

Disabling support for dark-mode SVGs would expand the scope of the problem to other parts of the interface.

There's no guarantee other parts of the interface are handling these properly, as far as we know, they may just be picking a different favicon with fixed colors. The new tab page is the only one asking for large icons, atm.

Comment 12

[Maxx Crawford [:maxx]]

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

(In reply to Maxx Crawford [:maxx] from comment #7)

Yazan / Marco,

Will this is be resolved in the dependency bug?

It would workaround the problem, in the sense we'd just stop storing SVGs that define a preferred color mode (dark/light), until further work is done to make them work correctly.
Though if your fix is almost there, and you think it's going to solve this, we can wait landing the "disabling" patch.

Belated response: I could get my patch up during the next release. Does that timing help? Our team is working on some CSS updates to the topsite tiles, so we have some cycles to address this.