Open Bug 1702040 Opened 8 months ago Updated 7 months ago

[Proton] Infobar background contrast against toolbar is quite low


(Toolkit :: Themes, defect, P5)




Tracking Status
firefox-esr78 --- unaffected
firefox87 --- unaffected
firefox88 --- unaffected
firefox89 --- wontfix


(Reporter: soeren.hentzschel, Unassigned)




(Keywords: regression, Whiteboard: [proton-infobars] [priority:2b] [a11y])


(1 file)

Attached image screenshot

After the latest changes to the notification bar style in bug 1690333 there are several styling and a11y issues now.

  • There is almost no difference between the notfication bar and the toolbar background color. So one could guess that there is a different element but (ignoring the colored border of the left side) it is really hard to see for me if I do not go unhealthily close to the screen.
  • The Icon has a very strange color. Neither the color is used elsewhere in Firefox nor it has enough contrast to recognize something without going unhealthily close to the screen.
  • I am not sure about the alignment of the icon and the text but it looks slightly off.
  • The text alignment in the button is definitively totally off.
Whiteboard: [proton-infobars]

Set release status flags based on info from the regressing bug 1690333

Priority: -- → P2
Whiteboard: [proton-infobars] → [proton-infobars][priority:2b]
Whiteboard: [proton-infobars][priority:2b] → [proton-infobars][priority:2b][a11y]

Should the different issues mentioned by Sören be split in separate bugs?

Flags: needinfo?(rtestard)

Tyler, can you please help identify which parts are valid here (I know the icon color is a separate bug but unsure about other elements reported here)

Flags: needinfo?(rtestard) → needinfo?(tduzan)

FYI: issue 2 is fixed, issue 4 also looks much better now, 1 and 3 are still issues.

For 1) The color contrast ratio between toolbar and notification is 1.05:1. This is less an a11y issue and more a design issue because you don't have to click on the notification bar, only on the buttons and text and buttons are good readable. But I would argue that if there is a color difference it should be visible. Otherwise the question is whether a color difference is needed at all. A color contrast ratio of 1.05:1 is really almost nothing. So improving this a bit would make it more clear that this is a notification bar.

For 3) This should be fixed in any case because it's noticeable, even more since the button text is better aligned.

We have bug 1702771 on file for the text alignment on macOS so I think the only untracked issue here is the contrast between the infobar and the toobar. Repurposing this bug for that issue specifically.

Summary: (Proton) several style and a11y issues after latest notification bar design changes → [Proton] Infobar background contrast against toolbar is quite low
Flags: needinfo?(tduzan)
Whiteboard: [proton-infobars][priority:2b][a11y] → [proton-infobars] [priority:2b] [a11y]

Thanks @mstriemer. Clearing the needinfo flag for me. Please tag me again if there's any other questions. I've also fixed the whiteboard tags for the JIRA integration.

I have not seen similar reports on bugzilla or through the diary studies of users having issues with infobar contrast. Some of this is by design since we want users to feel like the infobar delivers a message coming from the browsser and not the content of a website.
This also complies witht he UX spec so I'll reduce the priority of this bug and will keep monitoring user feedback.

Priority: P2 → P5
You need to log in before you can comment on or make changes to this bug.