2011761 - Links in info-bars are hard to read on Win11 with dark OS color-scheme (or dark browser theme) -- dark purple on dark gray

Status: RESOLVED FIXED

(Core :: Widget: Win32, defect)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Start Firefox on Win11
2. Make Firefox use a dark theme, by either (a) searching Win11 settings for "Dark" and adjusting "Choose your mode: [light|dark]" in the Peronalization|Colors UI, or (b) activating Firefox's built-in "Dark" Theme.
3. Spawn an info-bar that has links. If you happen to see the "We've introduced a new Firefox Terms of Use" info-bar, you're already there and you can skip to the last step. Otherwise you can get one on-demand by doing the following:
4. Set about:config pref browser.newtabpage.activity-stream.asrouter.devtoolsEnabled to true
5. Visit about:asrouter
6. Do "find-in-page" (Ctrl+F) for UNIVERSAL_INFOBAR_WITH_EMBEDDED_LINKS, and click the "Show" button in that section.
7. Look at the links in the info-bar that appears.

ACTUAL RESULTS:
The links are dark purple on a dark gray background, which is hard to read.

EXPECTED RESULTS:
Easier-to-read links (in a lighter color for better contrast).

Notes:

• I see this locally as well as in a remote Win11 session that I spawned on BrowserStack - so I don't think this requires any specific OS/theme configuration (beyond using a dark OS-preference or browser-theme, as noted in STR).
• If I switch to a light theme, then the links change to a nicely-contrasting blue color. So this is specific to dark themes.
• On macOS (with dark OS color-scheme), the links are dark blue (not dark purple) -- a different color, but still rpetty hard to read on a dark gray background.
• On Ubuntu (with dark OS color-scheme), the links are dark orange and are a bit easier to read, but perhaps contrast could still be improved...

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing dark purple links on dark gray background, on Win11

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing dark orange links on dark gray background, on Ubuntu 25.04

Here's a screenshot on my Linux system, for completeness. (As noted above, this doesn't look quite as unreadable as the Windows text, but the link text is maybe a teensy bit dark.)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing dark blue links on dark gray background, on macOS

...and here's what I see on macOS (Tahoe 26.2).

Comment 4

[Daniel Holbert [:dholbert]]

Here's the webaim Contrast Checker assessment of the color-parings shown in my screenshots here (using the color of the underline as the foreground color, since that doesn't have any antialiasing[1] and so it gives the most consistent color-reading:

Win11: https://webaim.org/resources/contrastchecker/?fcolor=8C8CFF&bcolor=42414D
Ubuntu: https://webaim.org/resources/contrastchecker/?fcolor=EC6D40&bcolor=42414D
macOS: https://webaim.org/resources/contrastchecker/?fcolor=419CFF&bcolor=42414D

They assess all three as "Fail" for normal-sized text (which I think is the bucket for these links), under for WCAG AA and WCAG AAA guidelines.

[1] on my Ubuntu system, I have 150% pixel-scaling which messed with the antialiasing in my attached screenshot a bit - but I captured a fresh local screenshot at 100% scaling in order to read the #EC6D40 color-value for a crisp underline there.

Comment 5

[Mimi Jung]

Sharing some of the investigation from Slack and my digging but I believe this is a larger design system issue. Infobar uses text-link from global-shared.css which maps to LinkText. And looking at the Windows fallback color for LinkText NS_RGB(0x8c, 0x8c, 0xff which maps to rgb(140, 140, 255).

(Also thank you as always for the thorough investigation and repro steps, Daniel!)

Comment 6

[Chris Peterson [:cpeterson]]

Moving this bug to the Toolkit::Themes component and removing the [tos] whiteboard tag because this bug can affect any infobar with links, not just the ToU infobar.

FWIW, Windows dark mode uses a legible blue color for "Learn more" links in Firefox settings. Should we use the same color token for links on an infobar?

Comment 7

[Greg Stoll :gstoll]

I think Chris's suggestion in comment 6 is reasonable.

Comment 8

[Greg Stoll :gstoll]

Attachment: This is how it looks setting those colors to #61DCE9, which matches the color of the links in the Settings page.

Comment 9

[Greg Stoll :gstoll]

Attachment: Bug 2011761 - Change default dark mode link color r=emilio!

Comment 10

[Emilio Cobos Álvarez [:emilio]]

We probably want UX to sign off on this change since it also affects web content. Here's a simple test-case:

data:text/html,<meta name=color-scheme content=dark><a href="https://foo.com">before</a> <a style="color: 61DCE9" href="https://bar.com">after</a>

I think it's fine, and a bit more consistent with light mode where the link color is full blue. Jules do you know who the right person to make a call would be/

Comment 11

[Jules Simplicio [:jules]]

Is the change making sure our links use our actual design system link color token which actually aliases off of our accent color (blue in light mode, cyan in dark mode) which look better on our infobar's background color, instead of the OS accent? Sounds good to me, if so, I can sign this off right now. Let me know if I misunderstood, though, but I can help sign this off myself

Comment 12

[Greg Stoll :gstoll]

This change just changes the dark mode link color to #61dc39. It looks like the current link color in light mode is #0000ee. Are these correct? Thanks!

Comment 13

[Jules Simplicio [:jules]]

Ah, so sorry didn't look at the patch and didn't realize this had to happen in a yaml and cpp file, so it can't point to a design token. That cyan used on dark mode links from our accent color should be --color-cyan-30 which converted to hex is #00cadb

Comment 14

[Greg Stoll :gstoll]

Great, thanks! I've attached a screenshot of what this looks like for posterity.

Comment 15

[Greg Stoll :gstoll]

Attachment: screenshot in dark mode with final #00cadb links

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c2f5ee5dca42
https://hg.mozilla.org/integration/autoland/rev/1b131bdc27ef
Change default dark mode link color r=emilio DONTBUILD

Comment 17

[Cristina Horotan [:chorotan]]

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

Comment 18

[Ryan VanderMeulen [:RyanVM]]

This seems safe enough for a Beta and ESR140 uplift request. Please nominate if you agree.

Comment 19

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined: links on infobar in dark mode are hard to see
• Code covered by automated testing: no
• Fix verified in Nightly: no
• Needs manual QE test: no
• Steps to reproduce for manual QE testing:
• Risk associated with taking this patch: low
• Explanation of risk level: Just changing a color
• String changes made/needed: no
• Is Android affected?: yes

Comment 20

[Greg Stoll :gstoll]

Attachment: Bug 2011761 - Change default dark mode link color DONTBUILD

This will make infobar links more legible in dark mode.

Original Revision: https://phabricator.services.mozilla.com/D281231

Comment 21

[Phabricator Automation]

firefox-esr140 Uplift Approval Request

• User impact if declined: links on infobar in dark mode are hard to see
• Code covered by automated testing: no
• Fix verified in Nightly: no
• Needs manual QE test: no
• Steps to reproduce for manual QE testing:
• Risk associated with taking this patch: low
• Explanation of risk level: Just changing a color
• String changes made/needed: no
• Is Android affected?: yes

Comment 22

[Greg Stoll :gstoll]

Attachment: Bug 2011761 - Change default dark mode link color DONTBUILD

This will make infobar links more legible in dark mode.

Original Revision: https://phabricator.services.mozilla.com/D281231

Comment 23

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/f1257b3a1614
https://hg.mozilla.org/releases/mozilla-beta/rev/3e59531e9c4a

Comment 24

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-esr140/rev/63650b98c19f