1243383 - Color of controls in the YouTube HTML5 player with Firefox in high-contrast mode

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Kostadin Kolev]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0
Build ID: 20160123151951

Steps to reproduce:

1. Enable the high-contrast black theme in Windows.
2. Launch Firefox.
3. Make sure that it is obeying the high-contrast mode of Windows (by default it should).
4. Go to www.youtube.com.
5. Open any video to watch it, making sure that the HTML5 player is used, and not FLASH (by default it should be so, if I'm not mistaking).
6. Observe the color of the controls in the video player.


Actual results:

The color of the controls is black, making them hard to see, specially on a darker background.


Expected results:

The color of the controls should be white, as it was in Firefox 43 and earlier. That way the controls were more easier to see.

Comment 1

[Loic]

Indeed, the controls of the YT video player are white in FF43, black in FF44.

Regression range:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=f7b746b4e91307448cb0746a41f677bfc23908b0&tochange=0416fbbd3a63280eab7738c1246acd4b0104b619

I suspect bug 1215484.

Any idea Gijs?

Comment 2

[Loic]

Attachment: youtube-ff44.jpg

Comment 3

[:Gijs (he/him)]

TBH, the white controls are just as hard to see on some videos - it depends on the video, IME.

I expect this is something youtube would need to fix, if they wanted to go back to the old behaviour. If the images were inside an <img> tag this wouldn't happen. As it is, they get styled the same way text colors would. Alternatively, they could make sure that the glyphs had a stroke of some description.

Comment 4

[Karl Dubost💡 :karlcow]

This is a hard one. It's very specific. Did someone try to contact YouTube through their users forum. It sounds more like a usability issue and design choices? Is there a way to activate this high contrast mode in another browser or it's just a firefox thing. 

Comment #3 is right, it's not really about the color of the widgets themselves, but about the contrasts in between the background and the color of the widgets. Because they can't control which video will do what:  Fixing the issue would mean add a background-color but that will hide the video under the control. OR a background-color with a level of transparency.

Is there a canonical value that would be working?

Comment 5

[Kostadin Kolev]

(In reply to Karl Dubost :karlcow from comment #4)
> Is there a way to activate this high contrast mode in another
> browser or it's just a firefox thing. 
When a high-contrast theme is used in Windows, by default browsers like Firefox, Internet Explorer and Edge switch to the high-contrast mode as well. Google Chrome does not support high-contrast mode for the web content, if I'm not mistaking. But in IE and Edge, the controls appear like they did in Firefox 43 - with white color and transparent background.

In my experience, the white controls seams to have less visibility problems than the black ones. Though that is my personal opinion. But if the controls have a border with a different color around them, wouldn't that increase their visibility? Just an idea...

> Comment #3 is right, it's not really about the color of the widgets
> themselves, but about the contrasts in between the background and the color
> of the widgets. Because they can't control which video will do what:  Fixing
> the issue would mean add a background-color but that will hide the video
> under the control. OR a background-color with a level of transparency.
Yes, the ideal solution is to have a background behind the controls. If the controls are white, - a black background, and vice versa. And don't worry about the background obscuring the video - the player controls are visible only for a small amount of time and then they disappear together with their background, until a command key from the keyboard to control the player is pressed or the mouse is moved.

Comment 6

[:Gijs (he/him)]

(In reply to Kostadin Kolev from comment #5)
> (In reply to Karl Dubost :karlcow from comment #4)
> > Is there a way to activate this high contrast mode in another
> > browser or it's just a firefox thing. 
> When a high-contrast theme is used in Windows, by default browsers like
> Firefox, Internet Explorer and Edge switch to the high-contrast mode as
> well.

Yeah, as Kostadin mentioned, this is Windows functionality. OS X and Linux provide similar things, but they do not influence web content. You can test on those OSes by going into Firefox's options, "Content", then click "Colors" and setting the "Override the colors specified by the page with my selections above:" dropdown to "Always".

> > OR a background-color with a level of transparency.
> Yes, the ideal solution is to have a background behind the controls.

Note that in high contrast mode, the color chosen for that background would get overridden by high contrast mode, so that doesn't really work in practice. You can see this on youtube itself, because it already has a semi-transparent black shading behind the buttons that isn't there in high contrast mode (presumably that bit, at least, is the same in IE/Edge as well).

And no, I haven't contacted youtube yet.

Comment 7

[Mike Taylor [:miketaylr]]

Setting to [contactready], but it's not 100% clear to me what the proposed fix is for YouTube (after reading comments #5 and #6).

Comment 8

[:Gijs (he/him)]

Was this not resolved by bug 1244166 which backed out part of the changes for bug 1215484?

Comment 9

[Mike Taylor [:miketaylr]]

Oh, it may have been (we're just going thru old "unclassified" TE bugs).

Kostadin, would you mind verifying? I don't have a Windows machine to test on. Thanks!

Comment 10

[Kostadin Kolev]

Yes, this has been fixed in Firefox 44, when the color for those controls has been reverted to black as it was before Firefox 43.

P.S.: This is probably a scope for another ticket, but Microsoft has been working towards improving Edge's high-contrast support and the results are very good, including for YouTube. I don't know if that part of the accessibility work is publicly documented somewhere by Microsoft or not, but if Firefox's high-contrast support can be improved based on it, it would be great.

Comment 11

[Kostadin Kolev]

(In reply to Kostadin Kolev from comment #10)
> Yes, this has been fixed in Firefox 44, when the color for those controls
> has been reverted to black as it was before Firefox 43.

Actually, the controls were black in Firefox 43 and reverted back to black as they were before that in Firefox 44. Sorry for the confusion.

Comment 12

[:Gijs (he/him)]

Marking wfm based on the last few comments.

Dão, have you looked at all at what Edge is doing in HCM per comment #10? Feels like that might be useful to improve our HCM support in Firefox, which I know you've been looking at.