Closed Bug 697836 Opened 8 years ago Closed 2 months ago

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

Categories

(Core :: Layout, defect, P3, major)

All
Windows
defect
Points:
3

Tracking

()

RESOLVED FIXED
mozilla70
Tracking Status
firefox70 --- fixed

People

(Reporter: maxst, Assigned: eeejay)

References

(Blocks 3 open bugs)

Details

(Keywords: access)

Attachments

(3 files)

Attached image 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.
Color settings dialog which is almost don't work when High Contrast mode enabled on Windows.
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).
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.
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.
Component: General → Disability Access
Blocks: themea11y
Component: Disability Access → Theme
We don't set these colors in theme/. Generally, this component is only for the Firefox UI, not for web content default styles.
Component: Theme → Layout
Keywords: access
Product: Firefox → Core
Blocks: 1016556
Flags: firefox-backlog+
Whiteboard: p=3
Points: --- → 3
Flags: qe-verify?
Whiteboard: p=3
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])
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.
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)
(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.
Blocks: 1022593
Severity: normal → major
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows 7 → Windows
Hardware: x86_64 → All
See Also: 1022593
Summary: Contrast between links and background not great enough in high contrast mode on Windows → Contrast between links and background is very low in high contrast mode on Windows
Version: 7 Branch → Trunk
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.
Flags: needinfo?(dbaron)
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.
(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.
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 :(
(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.
Flags: needinfo?(dbaron)
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.
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.
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.
See Also: → 1450684
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.
Duplicate of this bug: 1530842
Priority: -- → P3
Whiteboard: [layout:triage-discuss]

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
  };
}

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.

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.

Assignee: nobody → eitan
Whiteboard: [layout:triage-discuss]

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?

(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.

Pushed by eisaacson@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/4db5a1d1f69a
Use system's link color and create new visited link color in HC mode. r=heycam
Status: NEW → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla70
Flags: qe-verify? → qe-verify+
You need to log in before you can comment on or make changes to this bug.