Found in

• 107.0a1

Affected versions

• 107.0a1
• 106.0b9

Affected platforms

• Windows 10
• Ubuntu 20.4
• macOS 12

Steps to reproduce

1. Make sure “browser.theme.colorway-closet" is set to true in about:config
2. Open Colorways modal from about:addons
3. Set Playmaker theme, Balanced intensity
4. Go to any webpage
5. Open Find bar (CTRL + F)
6. Enter any input that will not generate a matching result
7. Observe the “Phrase not found” on the Find bar

Expected result

• The warning phrase is visible.

Actual result

• The contrast is low, the warning phrase can barely be seen.

Regression range

• Not a regression, I can see this issue way back to 103.0a1.

Additional notes

• The contrast is not ideal for other themes that uses red or yellow, but they are fairly visible.

Misha -- Not pressing now, but we'll need design direction on this one eventually.

heard! looks like this might have gotten overlooked as a use case in the original designs, i will provide mocks this week :)

(In reply to misha [:mbruk] from comment #2)

heard! looks like this might have gotten overlooked as a use case in the original designs, i will provide mocks this week :)

Thanks Misha! One thought I had that may be lower lift than considering error color(s) that work for every theme is having this message in the text color (white, in this case) with an error icon next to it -- (!) Phrase not found.

I remember reading accessibility-wise it is good to pair text with imagery to communicate error versus color, but I'd look to your best judgement in this department. :)

(In reply to Amy Churchwell [:amy] from comment #3)

(In reply to misha [:mbruk] from comment #2)

heard! looks like this might have gotten overlooked as a use case in the original designs, i will provide mocks this week :)

Thanks Misha! One thought I had that may be lower lift than considering error color(s) that work for every theme is having this message in the text color (white, in this case) with an error icon next to it -- (!) Phrase not found.

I agree with that, but one thing to consider is whether to apply that for all themes (light and dark themes included), or just to Colorway themes.
This issue can be reproduced in webextension themes as well.

Adding a related contrast issue here for reference as well:
https://bugzilla.mozilla.org/show_bug.cgi?id=1784439

Additionally, the search field color in this scenario may also benefit from some consistency as it also has some contrast concerns depending on which Colorway is active.

(In reply to Amy Churchwell [:amy] from comment #3)

(In reply to misha [:mbruk] from comment #2)

heard! looks like this might have gotten overlooked as a use case in the original designs, i will provide mocks this week :)

Thanks Misha! One thought I had that may be lower lift than considering error color(s) that work for every theme is having this message in the text color (white, in this case) with an error icon next to it -- (!) Phrase not found.

I remember reading accessibility-wise it is good to pair text with imagery to communicate error versus color, but I'd look to your best judgement in this department. :)

that is literally what i was going to propose :) that we match whatever the text color is in the rest of the find in page (sometimes white sometimes dark depending on the colorway selected) with the addition of a warning icon

(In reply to misha [:mbruk] from comment #6)

(In reply to Amy Churchwell [:amy] from comment #3)

(In reply to misha [:mbruk] from comment #2)

heard! looks like this might have gotten overlooked as a use case in the original designs, i will provide mocks this week :)

Thanks Misha! One thought I had that may be lower lift than considering error color(s) that work for every theme is having this message in the text color (white, in this case) with an error icon next to it -- (!) Phrase not found.

I remember reading accessibility-wise it is good to pair text with imagery to communicate error versus color, but I'd look to your best judgement in this department. :)

that is literally what i was going to propose :) that we match whatever the text color is in the rest of the find in page (sometimes white sometimes dark depending on the colorway selected) with the addition of a warning icon

haha, amazing! :D
Do you think this icon https://searchfox.org/mozilla-central/source/toolkit/themes/shared/icons/warning.svg works for this?

here is my rec: let's match the color of the 'phrase not found' message to the rest of the text and icons in that bar (in a given colorway sometimes it'll be dark and sometimes light)

the last bar in that screenshot is how we handle an error state in the figma ds - which is different from what we do live, i'm going to check with design system team about this but in the meantime, for the sake of moving things along, let's treat the background of the input the same as if there wasn't an error (for colorways)

thanks! and plz reach out if i can help provide more clarity

FYI: we also seem to be using this error color-mix in a couple of other places such as, panel.css (identity panel) and print.css --
https://searchfox.org/mozilla-central/search?q=color-mix(in+srgb%2C+currentColor+40%25%2C+%23C50042)&path=&case=false&regexp=false

(In reply to Amy Churchwell [:amy] from comment #9)

FYI: we also seem to be using this error color-mix in a couple of other places such as, panel.css (identity panel) and print.css --
https://searchfox.org/mozilla-central/search?q=color-mix(in+srgb%2C+currentColor+40%25%2C+%23C50042)&path=&case=false&regexp=false

btw specifically for the print popup it doesn't matter as we use common-shared.css there, and webext themes can't affect how it'd look. We cater only for light and dark mode so this isn't an issue there.

(In reply to Itiel from comment #11)

(In reply to Amy Churchwell [:amy] from comment #9)

FYI: we also seem to be using this error color-mix in a couple of other places such as, panel.css (identity panel) and print.css --
https://searchfox.org/mozilla-central/search?q=color-mix(in+srgb%2C+currentColor+40%25%2C+%23C50042)&path=&case=false&regexp=false

btw specifically for the print popup it doesn't matter as we use common-shared.css there, and webext themes can't affect how it'd look. We cater only for light and dark mode so this isn't an issue there.

How about drop the color and make text bold instead to keep the emphasis for the find bar and the site identity panel? I feel like just dropping the color without a replacement isn't that great as the emphasis serves a purpose in both cases.

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

(In reply to Itiel from comment #11)

(In reply to Amy Churchwell [:amy] from comment #9)

FYI: we also seem to be using this error color-mix in a couple of other places such as, panel.css (identity panel) and print.css --
https://searchfox.org/mozilla-central/search?q=color-mix(in+srgb%2C+currentColor+40%25%2C+%23C50042)&path=&case=false&regexp=false

btw specifically for the print popup it doesn't matter as we use common-shared.css there, and webext themes can't affect how it'd look. We cater only for light and dark mode so this isn't an issue there.

How about drop the color and make text bold instead to keep the emphasis for the find bar and the site identity panel? I feel like just dropping the color without a replacement isn't that great as the emphasis serves a purpose in both cases.

This makes sense to me. I can send a patch in a followup if there's an agreement on this.

https://hg.mozilla.org/mozilla-central/rev/ea71acdaaf17

Verified fixed with 108.0a1 (2022-10-23) on Windows 10, Ubuntu 20.04 and macOS 11.

(In reply to Itiel from comment #14)

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

(In reply to Itiel from comment #11)

(In reply to Amy Churchwell [:amy] from comment #9)

FYI: we also seem to be using this error color-mix in a couple of other places such as, panel.css (identity panel) and print.css --
https://searchfox.org/mozilla-central/search?q=color-mix(in+srgb%2C+currentColor+40%25%2C+%23C50042)&path=&case=false&regexp=false

btw specifically for the print popup it doesn't matter as we use common-shared.css there, and webext themes can't affect how it'd look. We cater only for light and dark mode so this isn't an issue there.

How about drop the color and make text bold instead to keep the emphasis for the find bar and the site identity panel? I feel like just dropping the color without a replacement isn't that great as the emphasis serves a purpose in both cases.

This makes sense to me. I can send a patch in a followup if there's an agreement on this.

Filed bug 1797058.

The patch landed in nightly and beta is affected.
:amy, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox107 to wontfix.

For more information, please visit auto_nag documentation.

(In reply to Release mgmt bot [:suhaib / :marco/ :calixte] from comment #18)

The patch landed in nightly and beta is affected.
:amy, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox107 to wontfix.

For more information, please visit auto_nag documentation.

I don't believe that this bug requires an uplift, thank you.