1565896 - about:performance energy impact graph text and column sort arrows lack contrast in dark mode

Status: RESOLVED FIXED

(Toolkit :: Themes, defect)

Description

[Kestrel]

Attachment: Low contrast for energy impact text and sort arrow

Light mode is also affected for the selected row since it changes text color to white.

Comment 1

[Kestrel]

Attachment: Bug 1565896 - Change about:performance energy bar color and column sort arrow fill color for better contrast in dark mode

Comment 2

[Kestrel]

Attachment: Fixed colors with patch applied

Patch uses an energy bar color that works with both black and white text.

Comment 3

[fluks]

How do you switch the dark mode on? If I set the dark theme on, it doesn't affect about:performance. I tried this when I implemented the bars, so I thought you can't set dark theme at all on about:performance.

Comment 4

[Tim Nguyen :ntim]

(In reply to fluks from comment #3)

How do you switch the dark mode on? If I set the dark theme on, it doesn't affect about:performance. I tried this when I implemented the bars, so I thought you can't set dark theme at all on about:performance.

You need your system to use a dark mode.

Comment 5

[Florens Verschelde :fvsch]

The proposed patch does not meet accessible contrast levels (using WCAG 2's contrast ratio algorithm):

• white on #45a1ff: 2.69:1 contrast ratio (expecting a minimum of 4.5:1, aka WCAG AA level).

It's close to impossible to find a single background color that will be contrasted enough with both white and black text (or, in this case, Photon Grey 90 aka #0c0c0d).

One solution would be to keep the current light color, and identify a dark background color that works with white text and use it for all rows with white text: selected rows in both themes, and all rows in the dark theme.

Looking at https://design.firefox.com/photon/visuals/color.html it could be:

• Blue 60 or darker (but since we already use blue for the selection background, it might be better to use a different hue altogether)
• Teal 70 or darker
• Magenta 70 or darker
• Green 70 or darker
• Yellow 70 or darker
• Red 60 or darker
• Purple 50 or darker

Though I tried a bunch of them and nothing looks great.
So maybe using a desaturated dark blue might work.

Comment 6

[Tim Nguyen :ntim]

(In reply to Florens Verschelde :fvsch from comment #5)

The proposed patch does not meet accessible contrast levels (using WCAG 2's contrast ratio algorithm):

• white on #45a1ff: 2.69:1 contrast ratio (expecting a minimum of 4.5:1, aka WCAG AA level).

It's close to impossible to find a single background color that will be contrasted enough with both white and black text (or, in this case, Photon Grey 90 aka #0c0c0d).

One solution would be to keep the current light color, and identify a dark background color that works with white text and use it for all rows with white text: selected rows in both themes, and all rows in the dark theme.

Looking at https://design.firefox.com/photon/visuals/color.html it could be:

• Blue 60 or darker (but since we already use blue for the selection background, it might be better to use a different hue altogether)
• Teal 70 or darker
• Magenta 70 or darker
• Green 70 or darker
• Yellow 70 or darker
• Red 60 or darker
• Purple 50 or darker

Though I tried a bunch of them and nothing looks great.
So maybe using a desaturated dark blue might work.

I think rgb(215,0,34,0.3) (red 60 at 0.3 opacity) looks ok, but such a change would require UX to weigh in.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/70e6db69c88f
Change about:performance energy bar color and column sort arrow fill color for better contrast in dark mode r=dao

Comment 8

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/70e6db69c88f