Closed Bug 1504156 Opened 11 months ago Closed 11 months ago

Darken --arrowpanel-dimmed-* variables on light themes

Categories

(Firefox :: Theme, defect, P2)

Unspecified
macOS
defect

Tracking

()

RESOLVED FIXED
Firefox 65
Tracking Status
firefox-esr60 --- unaffected
firefox63 --- unaffected
firefox64 --- unaffected
firefox65 + fixed

People

(Reporter: soeren.hentzschel, Assigned: ntim)

References

Details

(Keywords: regression)

Attachments

(4 files)

Attached image screenshot
[Tracking Requested - why for this release]:

Bug 1502731 changed the style of the bookmarks panel and regressed the accessibility. The color contrast between the background of the panel and the select field for the folder is so poor that it's really hard to see the difference, especially when the display is set to bright.
Attached image contrast ratio
The WebAIM Color Contrast Checker (https://webaim.org/resources/contrastchecker/) seems to be focused on text but a good contrast ratio is not only important for text but also to see a difference between the background and the fields. As you can see in the screenshot this color combination fails on all contrast ratio tests.
To be clear: This color would work if there was a darker border. My point is that it's hard to see that there is select field. Of course there are different approaches to solve this problem (you could add a border or use a darker color for the select field). For me it doesn't matter how this problem will be solved but in the current state it will be a problem not only for me.
OS: Unspecified → Mac OS X
Priority: -- → P2
Summary: a11y regression in bookmarks panel, poor color contrast ratio → Bookmarks panel menulists and buttons fade into the background (add border?)
https://mozilla.invisionapp.com/share/7XG2P3JSY46#/screens is the original mockup.

While it doesn't use a border on buttons, the background is darker than the one currently picked.

Darkening --arrowpanel-dimmed a bit more would probably fix this.
Tim, could you work on this?
Flags: needinfo?(ntim.bugs)
Flags: needinfo?(ntim.bugs)
Summary: Bookmarks panel menulists and buttons fade into the background (add border?) → Darken --arrowpanel-dimmed-* variables on light themes
Attached image Screenshot of patch
Assignee: nobody → ntim.bugs
Status: NEW → ASSIGNED
Sören, the background of the panel on your screenshot looks darker than it should be. Do you have a webextension theme installed?
Flags: needinfo?(soeren.hentzschel)
The background of the panel should be #ffffff on the default or light theme. On your screenshot, it seems to be #fbfbfb.
Attachment #9023336 - Attachment description: Bug 1504156 - Darken --arrowpanel-dimmed and --arrowpanel-dimmed-further variables on light themes. r?jaws → Bug 1504156 - Further dim --arrowpanel-dimmed and --arrowpanel-dimmed-further variables on light themes. r?jaws
Pushed by ntim.bugs@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/a822ee32e1dd
Further dim --arrowpanel-dimmed and --arrowpanel-dimmed-further variables on light themes. r=jaws
(In reply to Jared Wein [:jaws] (Regression Engineering Owner for 65) (please needinfo? me) from comment #7)
> Sören, the background of the panel on your screenshot looks darker than it
> should be. Do you have a webextension theme installed?

Nope, it's the default theme on macOS Mojave.

(In reply to Tim Nguyen :ntim (please use needinfo?) from comment #8)
> The background of the panel should be #ffffff on the default or light theme.
> On your screenshot, it seems to be #fbfbfb.

The developer tools tell something different. The class panel-arrowcontent has the variable arrowpanel-background as value for the color and the developer tools says that the color is rgba(252, 252, 252, 0.976).
Flags: needinfo?(soeren.hentzschel)
(In reply to Sören Hentzschel from comment #10)
> (In reply to Tim Nguyen :ntim (please use needinfo?) from comment #8)
> > The background of the panel should be #ffffff on the default or light theme.
> > On your screenshot, it seems to be #fbfbfb.
> 
> The developer tools tell something different. The class panel-arrowcontent
> has the variable arrowpanel-background as value for the color and the
> developer tools says that the color is rgba(252, 252, 252, 0.976).

Ah right, I was looking at the light theme, not the default theme, that explains the difference in color.

I filed bug 1505582 to consider making the panels fully white, which would improve the contrast for the default theme.
https://hg.mozilla.org/mozilla-central/rev/a822ee32e1dd
Status: ASSIGNED → RESOLVED
Closed: 11 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
See Also: → 1505582
You need to log in before you can comment on or make changes to this bug.