746674 - Download icon progressbar hard to see for people with mono/dichromacy.

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[ferongr]

Attachment: Screenshot of the download icon on Windows XP

The green on dark grey colors for the icon progressbar are problematic. There's not enough contrast to be able to distinguish them if someone has problems seeing the green color. I have deuteranopia personally and cannot see the progressbar without moving my head close to the screen.

Comment 1

[Marco Bonardo [:mak]]

yes, the contrast doesn't help much

Comment 2

[Marco Bonardo [:mak]]

Due to the space constraints I think we should go for a monochrome progressbar, btw, this needs design hints.

Comment 3

[Mike Conley (:mconley) (:⚙️)]

Attachment: Updated Windows XP screenshot

So, I just booted up Firefox on a Windows XP VM, and this is what the progress bar looks like in the button.

It's significantly different from the original screenshot, and according to http://juicystudio.com/services/luminositycontrastratio.php, the contrast is string enough between the left-half of the foreground gradient, and the background.

The right-half of the foreground gradient, however, fails the test. I'll see if I can correct that.

Comment 4

[Mike Conley (:mconley) (:⚙️)]

Hm - so, correction to my last - the gradients are sufficient for *large text only*, according to the contrast checker app.

I'll see if I can find something that works for normal sized text - that should be sufficient for our progress bar.

Comment 5

[Mike Conley (:mconley) (:⚙️)]

Attachment: Patch v1

Remove the gradient from the status bar foreground and background.

The paused state gradients pass the contrast test. Should we keep them, or remove the gradients for consistency?

Comment 6

[Mike Conley (:mconley) (:⚙️)]

Attachment: Progress with patch applied

Comment 7

[Marco Bonardo [:mak]]

yes I think we should remove the gradient, or reduce it to 1px (this may still give nice effects). Maybe we could add a lighter 1px gradient at the top giving this sort of a "glass" appearance, being lighter it may also help with contrast.

Comment 8

[Marco Bonardo [:mak]]

something like:
blue
light blue 1px
blue
blue
blue

Comment 9

[Mike Conley (:mconley) (:⚙️)]

Attachment: 1px gradient

(In reply to Marco Bonardo [:mak] from comment #8)
> something like:
> blue
> light blue 1px
> blue
> blue
> blue

So, something more like this?

Comment 10

[Mike Conley (:mconley) (:⚙️)]

Attachment: 1px gradient (now with more context)

Comment 11

[Mike Conley (:mconley) (:⚙️)]

Attachment: 1px gradient (50% completed download)

Comment 12

[Mike Conley (:mconley) (:⚙️)]

Attachment: Progress bar comparison

Comment 13

[Marco Bonardo [:mak]]

Comment on attachment 680763 [details]
Progress bar comparison

So, I like the 1px band for a couple reasons:
- retains native color
- increases contrast
- doesn't look washed-out

Remember that if we change the progress bar style here, we must change it also in the paused state, to be coherent.
And I think also across the board for all OSes.

I also think for simplicity of implementation we may specify a background color and make the gradient white with opacity, then we could just change one color across different themes.

Comment 14

[Marco Bonardo [:mak]]

Comment on attachment 680242 [details] [diff] [review]
Patch v1

comment 13 has feedback

Comment 15

[Mike Conley (:mconley) (:⚙️)]

Attachment: WIP Patch 1

This removes the background gradient, and adds the 1px band for Windows 7 / XP.

pinstripe and gnomestripe coming up next.

Comment 16

[Mike Conley (:mconley) (:⚙️)]

Attachment: Patch on Windows 7

Comment 17

[Mike Conley (:mconley) (:⚙️)]

Attachment: Patch on Windows XP

Comment 18

[Mike Conley (:mconley) (:⚙️)]

Attachment: WIP Patch 2

Adds 1px strip to pinstripe.

Comment 19

[Mike Conley (:mconley) (:⚙️)]

Attachment: Patch on OSX

Comment 20

[Mike Conley (:mconley) (:⚙️)]

Attachment: Patch on Ubuntu

Comment 21

[Mike Conley (:mconley) (:⚙️)]

Attachment: Patch v1

Comment 22

[Marco Bonardo [:mak]]

Comment on attachment 681201 [details] [diff] [review]
Patch v1

Review of attachment 681201 [details] [diff] [review]:
-----------------------------------------------------------------

I must admit the result overcame my expectations.

Just as a reminder for people following this bug, we still need to adress bug 811469 and bug 811076
Also, we'll do a final UI review pass before releasing by default.

Comment 23

[Mike Conley (:mconley) (:⚙️)]

Thanks! Landed in mozilla-inbound as https://hg.mozilla.org/integration/mozilla-inbound/rev/b04cea4ab159

Comment 24

[Ed Morley [:emorley]]

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