697836 - Contrast between links and background is very low in high contrast mode on Windows

Status: VERIFIED FIXED

(Core :: Layout, defect, P3)

Description

[maxst]

Attachment: Capture.JPGscreenshot

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
Build ID: 20110928134238

Steps to reproduce:

In Windows (all versions, I'm on Win7), when running in high contrast mode, the colors are dictated by FireFox, with no page control.  


Actual results:

When run in this state, simple html pages with links, the links show up in a very dark blue color on top of a black background - this is not high enough contrast, it's hard to see on most monitors, and certainly not accessible for hard of eyesight people.


Expected results:

The dark blue needs to be lightened somewhat to provide better contrast against the default black background.  All sites suffer from this problem, even bugzilla.

Comment 1

[Khvoinitsky Mikhail [:m_khvoinitsky]]

Attachment: firefox-color-settings-high-contrast.png

Color settings dialog which is almost don't work when High Contrast mode enabled on Windows.

Comment 2

[Khvoinitsky Mikhail [:m_khvoinitsky]]

High contrast feature in Windows seems buggy. See https://bugzilla.mozilla.org/show_bug.cgi?id=639134 . Right now when it (High Contrast) is enabled, Firefox uses system colors for text and background (in despite of similar option in color settings) and it uses link colors *from* color settings (not system). Also, "Allow pages to choose their own colors" is turned off in despite of similar option in color settings. So, maybe we should gray out this options in high contrast mode?
I think the option "Use system colors" should be not only for text and background but for links too (if Windows provides such information).
Also, we can use same mode for GNOME's High contrast mode (if there is a way to detect it).

Comment 3

[Hans Hillen]

The issue is that when high contrast mode is enabled Firefox will override foreground colors for regular text and borders, but not links. As a result, the user needs to manually change link colors in the color dialog whenever switching to and from high contrast mode.

IE will automatically override link colors according to the chosen high contrast theme (provided that the "use windows colors" checkbox is checked). Firefox should be doing this as well.

Comment 4

[Stephanie Hobson [:shobson]]

It would be nice if a high contrast theme was detected but the user hasn't manually set link colours that Firefox would override the link colours with the the chosen high contrast theme colours. I have a friend who says he has not switched to FireFox because of this bug.

Comment 5

[Dão Gottwald [:dao]]

We don't set these colors in theme/. Generally, this component is only for the Firefox UI, not for web content default styles.

Comment 6

[Stephanie Hobson [:shobson]]

Still a problem in FireFox 32 on Windows 7.

Setup for test environment:
- in the Windows control panel change to a high contrast theme (I think both the reporter and I are using High Contrast Black)
- open Firefox (or restart it if it was already open)
- in options > content > click the button labeled "colors" and check the box "use system colors" (as shown in  attachment 784908 [details])

Comment 7

[Paul]

This bug is still present for me. I am running windows 8.1 in a high contrast theme. Ny bookmark menu is totally white, I do though see the icons though. It seems to have changed the text color to white while locking the background to white. I have tried altering the color options but it makes no difference. At the moment the only work around I have is to select "show all bookmarks" from the menu and click on my link from there.

Comment 8

[Lon Winters]

I am not a programmer, but I'm a thorough beta tester. Please let me know if there are other settings you would like me to test, different combinations in addition to the below. 

I am able to set my link colors to a lighter color. I do not know if this is a bug that has officially been fixed since the last comment, or if I'm just lucky. I just started using FF on Win 7, V. 39. I use a Windows High Contrast Theme. 

1.In Options – Content – Colors, the color picker presented all options black. 
2.Switched OS to a regular Aero theme, but now all color options were white. 
3.This topic was addressed in support forum. Followed instructions to change drop down from either “Always” or “Only in HC theme” to “Never” then clicked OK to exit out then went back in. This disabled the HC theme in FF and color picker worked. Clicked OK again out, then back in again. 
4.Selected drop down to use only in HC mode option, clicked OK, HC mode was working again and it retained my link colors. 
5.Checkbox to use system colors left unchecked. Did not test any other combinations or bookmarks. 

Please let me know if you would like me to test other options and what to expect. I’m not sure of what the System Colors checkbox should do, or what the order of commands is – in other words, what overrides what? 

Also, could you tell me where to put In a feature request? I have one regarding the HC mode (basically to add different contrast options and save for specific sites, similar to the Chrome add-in. The inverted color is best, but many sites do not fully support the color inversion correctly)

Comment 9

[:Gijs (he/him)]

(In reply to Lon Winters from comment #8)
> I am not a programmer, but I'm a thorough beta tester. Please let me know if
> there are other settings you would like me to test, different combinations
> in addition to the below. 
> 
> I am able to set my link colors to a lighter color. I do not know if this is
> a bug that has officially been fixed since the last comment, or if I'm just
> lucky. I just started using FF on Win 7, V. 39. I use a Windows High
> Contrast Theme. 
> 
> 1.In Options – Content – Colors, the color picker presented all options
> black. 
> 2.Switched OS to a regular Aero theme, but now all color options were white. 
> 3.This topic was addressed in support forum. Followed instructions to change
> drop down from either “Always” or “Only in HC theme” to “Never” then clicked
> OK to exit out then went back in. This disabled the HC theme in FF and color
> picker worked. Clicked OK again out, then back in again. 
> 4.Selected drop down to use only in HC mode option, clicked OK, HC mode was
> working again and it retained my link colors. 
> 5.Checkbox to use system colors left unchecked. Did not test any other
> combinations or bookmarks. 
> 
> Please let me know if you would like me to test other options and what to
> expect. I’m not sure of what the System Colors checkbox should do, or what
> the order of commands is – in other words, what overrides what? 

You can manually work around this, yes, but the "use system colours" option should select usable link colors here.

> Also, could you tell me where to put In a feature request? I have one
> regarding the HC mode (basically to add different contrast options and save
> for specific sites, similar to the Chrome add-in. The inverted color is
> best, but many sites do not fully support the color inversion correctly)

You should file a new bug for this if it isn't on file already. We use bugs for feature request and don't really distinguish between them in that way.

Comment 10

[Dão Gottwald [:dao]]

dbaron, do you have thoughts on how we should fix this? This seems like a pretty bad bug to me, maybe the worst of all high-contrast bugs we have. It makes Firefox close to unusable as a web browser in high-contrast mode. Users can work around this by picking their own link colors (attachment 784908 [details]) but many users won't know that and we shouldn't require such workarounds anyway.

Comment 11

[Stephanie Hobson [:shobson]]

Windows system colours include a colour for hyperlinks the same way they do the text and background colours we're already pulling in. 

The GUI for setting all the colours is the same, hopefully that means they're exposed to programs using the same APIs.

Comment 12

[Dão Gottwald [:dao]]

(In reply to Stephanie Hobson [:shobson] from comment #11)
> Windows system colours include a colour for hyperlinks the same way they do
> the text and background colours we're already pulling in. 
> 
> The GUI for setting all the colours is the same, hopefully that means
> they're exposed to programs using the same APIs.

We already expose that color as -moz-hyperlinktext. There's no equivalent for visited links, though. Maybe we could do a hue shift on -moz-hyperlinktext to generate another color, or reduce the opacity of visited links, or something like that...

Presumably we'd also need another "Use system color" checkbox in our UI (attachment 784908 [details]), or move the existing checkbox to cover all colors.

Comment 13

[Stephanie Hobson [:shobson]]

Note: Testing this again on Windows 10 the "use system color" check box was *unchecked* but Firefox still displayed this behaviour.

Whatever default behaviour is applying the high contrast background and text colours needs to also apply the high contrast hyperlink colour by default.

Changing the "use system color" checkbox in the UI to include the system hyperlink colours seems like a good idea as well.

(Actually... looking at that dialogue box I am very confused*, perhaps this entire process could use some care and attention?)

I would re-use the system colour for both unvisited and visited links, but maybe someone on David Bolter's team would have an alternative suggestion.

Thank you for your interest in this bug Dão! If it's not the worst high-contrast bug it is definitely the first thing high contrast users experience when trying Firefox :/


* By default the colours in the user preferences are black text on a white background with blue links and the "use system color" box is not checked BUT I still see system background and text colours however they are combined with user preference link colours. Checking "use system color" continues to use system background and text and user preference link colours. Newer versions of Firefox have added a new drop down menu to this preference dialogue. "Override the colors specified by the page with my selections above:" which is set to "Only with high contrast themes" by default, but it is not over-riding the text and background with the selections above, it's using the system ones for half of them :(

Comment 14

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Dão Gottwald [:dao] from comment #12)
> We already expose that color as -moz-hyperlinktext. There's no equivalent
> for visited links, though. Maybe we could do a hue shift on
> -moz-hyperlinktext to generate another color,

This seems like a good idea.  Particularly since there should be a known set of high-constrast themes that we can test with, so we can make sure the hue-shift algorithm does something reasonable with those.

(I suspect a transformation of the h part of the color converted to hsl, hsv, or hwb will probably do a decent-enough job.  See https://drafts.csswg.org/css-color-4/#the-hsl-notation .)

> Presumably we'd also need another "Use system color" checkbox in our UI
> (attachment 784908 [details]), or move the existing checkbox to cover all
> colors.

Using the existing preference seems preferable.

Comment 15

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Also, we currently expose the following colors:

-moz-activehyperlinktext
-moz-hyperlinktext
-moz-visitedhyperlinktext
  These colors are the default active, unvisited, and visited link colors
  determined from preferences.
  (nsPresContext::Default{Active,Visited,}LinkColor, etc., applied in
  nsLayoutStylesheetCache::BuildPreferenceSheet)
-moz-nativehyperlinktext
  This is a system color.

Presumably we'd need system color variants for all three of the things we have preferences for.

Comment 16

[gordonms]

I'm seeing this same issue regardless of whether the "Use System Colors" checkbox is checked or not.  The environment I'm using is:

FF 53.0.3
Windows 10 version 1511 OS Build 10586.873

When I turn on dark high contrast mode and go to any site with links, the links should be yellow according to the OS settings.  In FF the links are either blue or purple.

This can be tested by turning on high contrast mode, opening FF, and going to google.com.

Comment 17

[Marco Zehe (:MarcoZ)]

I was just pinged about this bug from the Google Apps accessibility team lead. They have an interest in this bug being fixed soon'ish, since it affects all their products. Firefox is still the recommended browser for using Google apps accessibly.

Also CC'ing DBolter.

Comment 18

[shwnmcq]

I'm totally new here, and I didn't read every comment in this thread, but most of them.  I'm legally blind, and I have to use the Windows high contrast setting with black background and white text.  I can barely see text at all against a white background because of the glare.  I've been using the Windows HC w/black bkgd. for over ten years, thru Windows7 to now Windows10.  The bug of not being able to see links using the HC setting is still a bug in 2018.  Over this ten years, some things have actually become visible that were not before...  for ex., in FB, the icons at the top right for "friend requests", "messages", and "notifications" was never visible but started showing up about a year or maybe a bit longer ago.  Other links/icons are still not visible.  It's not only links to other sites that don't show up, but icons with drop down menus don't show with the high contrast/black backgd. setting.  for ex., again in FB, at the top right corner of each post one makes, there's something, I don't know what it is, some icon, to click on in order to edit, delete, etc. the post.  I have never been able to see this icon and still can't.  I only know it's there because a friend told me, and by hovering my cursor all over that area, I finally found the icon because the cursor turned into a hand image when I went over the icon.  It happens on every site, and sometimes, like when trying to order something online, I have to spend minutes moving my cursor around the page to find the icon or whatever-it's-called to click on to "Submit" the order, etc.  It never occurred to me that this only happens with FF!  But I don't like change, much, so for now I'm a going to stay with FF... but eventually I'll probably experiment with other browsers and if they don't have this problem I'd be likely to change, IF FF still has this bug.

Comment 20

[Eitan Isaacson [:eeejay]]

So I figured out how IE provides visited link colors even when no color is defined. It uses the system provided foreground and background color, it doesn't use the link colors at all. It preserves the green channel of the foreground, and uses the average between the foreground and background for the red and blue channel.

Here is some js pseudocode:

function getVisitedLinkColor(background, foreground) {
  return {
    red: (background.red + foreground.red)/2,
    green: foregeround.green,
    blue: (background.blue + foreground.blue)/2
  };
}

Comment 21

[Eitan Isaacson [:eeejay]]

This is pretty smart and straightforward solution. It gives you a unique color and it mostly preserves the user's desired color contrast because the green channel is the largest contributor to luminance.

Comment 22

[Eitan Isaacson [:eeejay]]

Attachment: Bug 697836 - Use system's link color and create new visited link color in HC mode. r?heycam!

This makes mLinkColor use LookAndFeel for everyone, not just high
contrast mode. This may introduce some user impact for anyone who views
an unstyled page.

Comment 23

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

It doesn't look like quite "everyone" given the usePrefColors condition. That said, I'd have two questions about that:

• does it do reasonable things across all platforms?
• should there be any changes to the preferences UI as a result of the change?

Comment 24

[Eitan Isaacson [:eeejay]]

(In reply to David Baron :dbaron: 🏴󠁵󠁳󠁣󠁡󠁿 ⌚UTC-7 from comment #23)

It doesn't look like quite "everyone" given the usePrefColors condition. That said, I'd have two questions about that:

Right, so not everyone.

• does it do reasonable things across all platforms?

This currently only extrapolates the visited/active link color when an "accessibility theme" is detected. This only happens on Windows.

• should there be any changes to the preferences UI as a result of the change?

No. This still honors the the visited link color pref that is fronted in the UI.

Comment 25

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4db5a1d1f69a
Use system's link color and create new visited link color in HC mode. r=heycam

Comment 26

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/4db5a1d1f69a

Comment 27

[Negritas Sergiu, Desktop QA]

I have managed to reproduce the issue following the STR from the first comment using Fx 69.0a1 (2019-07-03) on Windows 10 and 7 both on x64. I can confirm that the issue is fixed in Fx 70.0b9 on Windows 10 and 7 x64.