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

RESOLVED FIXED in Firefox 19

Status

()

Firefox
Theme
RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: ferongr, Assigned: mconley)

Tracking

({access})

Trunk
Firefox 19
x86
Windows XP
access
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(6 attachments, 9 obsolete attachments)

6.76 KB, image/png
Details
23.71 KB, image/png
Details
9.41 KB, image/png
Details
14.27 KB, image/png
Details
13.67 KB, image/png
Details
4.91 KB, patch
mak
: review+
Details | Diff | Splinter Review
(Reporter)

Description

6 years ago
Created attachment 616223 [details]
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.
(Reporter)

Updated

6 years ago
Blocks: 564934
yes, the contrast doesn't help much
Status: UNCONFIRMED → NEW
Ever confirmed: true

Updated

6 years ago
Component: General → Theme
QA Contact: general → theme

Updated

6 years ago
Blocks: 726447

Updated

6 years ago
Keywords: access

Updated

6 years ago
Blocks: 747422
Due to the space constraints I think we should go for a monochrome progressbar, btw, this needs design hints.
Flags: needinfo?(shorlander)
Created attachment 680232 [details]
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.
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.
Created attachment 680242 [details] [diff] [review]
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?
Assignee: nobody → mconley
Attachment #680242 - Flags: feedback?(mak77)
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.
something like:
blue
light blue 1px
blue
blue
blue
Created attachment 680718 [details]
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?
Created attachment 680727 [details]
1px gradient (now with more context)
Attachment #680718 - Attachment is obsolete: true
Created attachment 680731 [details]
1px gradient (50% completed download)
Attachment #680727 - Attachment is obsolete: true
Created attachment 680763 [details]
Progress bar comparison
Attachment #680243 - Attachment is obsolete: true
Attachment #680731 - Attachment is obsolete: true
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.

Updated

6 years ago
Blocks: 811076
Comment on attachment 680242 [details] [diff] [review]
Patch v1

comment 13 has feedback
Attachment #680242 - Flags: feedback?(mak77)
Created attachment 681170 [details] [diff] [review]
WIP Patch 1

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

pinstripe and gnomestripe coming up next.
Attachment #680232 - Attachment is obsolete: true
Attachment #680242 - Attachment is obsolete: true
Attachment #680763 - Attachment is obsolete: true
Created attachment 681179 [details] [diff] [review]
WIP Patch 2

Adds 1px strip to pinstripe.
Attachment #681170 - Attachment is obsolete: true
Created attachment 681201 [details] [diff] [review]
Patch v1
Attachment #681179 - Attachment is obsolete: true
Attachment #681201 - Flags: review?(mak77)
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.
Attachment #681201 - Flags: review?(mak77) → review+

Updated

6 years ago
Flags: needinfo?(shorlander)
https://hg.mozilla.org/mozilla-central/rev/b04cea4ab159
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 19
You need to log in before you can comment on or make changes to this bug.