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

Status: RESOLVED FIXED

(Firefox :: Theme, defect, P2)

Description

[Sören Hentzschel]

Attachment: 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.

Comment 1

[Sören Hentzschel]

Attachment: 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.

Comment 2

[Sören Hentzschel]

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.

Comment 3

[Tim Nguyen :ntim]

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.

Comment 4

[Jared Wein [:jaws] (please needinfo? me)]

Tim, could you work on this?

Comment 5

[Tim Nguyen :ntim]

Attachment: Bug 1504156 - Further dim --arrowpanel-dimmed and --arrowpanel-dimmed-further variables on light themes. r?jaws

Comment 6

[Tim Nguyen :ntim]

Attachment: Screenshot of patch

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

Sören, the background of the panel on your screenshot looks darker than it should be. Do you have a webextension theme installed?

Comment 8

[Tim Nguyen :ntim]

The background of the panel should be #ffffff on the default or light theme. On your screenshot, it seems to be #fbfbfb.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a822ee32e1dd
Further dim --arrowpanel-dimmed and --arrowpanel-dimmed-further variables on light themes. r=jaws

Comment 10

[Sören Hentzschel]

(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).

Comment 11

[Tim Nguyen :ntim]

(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.

Comment 12

[Arthur Iakab [arthur_iakab]]

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