about:performance energy impact graph text and column sort arrows lack contrast in dark mode
Categories
(Toolkit :: Themes, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox69 | --- | unaffected |
| firefox70 | --- | fixed |
People
(Reporter: ke5trel, Assigned: ke5trel)
References
(Blocks 1 open bug)
Details
(Keywords: access)
Attachments
(3 files)
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.
Patch uses an energy bar color that works with both black and white text.
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•5 years ago
|
||
(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•5 years ago
|
||
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•5 years ago
|
||
(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.
Pushed by ntim.bugs@gmail.com: 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•5 years ago
|
||
| bugherder | ||
Description
•