Microsoft Edge sometimes computes wrong colour in High Contrast theme

This bug report has been submitted to Microsoft. You can track it here.

To Microsoft staffs: the Issue section contains a summary of the issue and the Details section contains the environment specification as well as comprehensive reproduction steps.

Updated on 14 April 2017: The issue is confirmed but there is currently no timetable of getting it fixed. See the issue tracking link above for details.

Issue

Condition

  • You use Microsoft Edge 14 or Internet Explorer 11.
  • You are in High Contrast Black theme.
  • You open the following document:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        #container
        {
            -ms-high-contrast-adjust: none;
            color: red;
            background: green;
        }

        #link
        {
            -ms-high-contrast-adjust: none;
            color: inherit;
        }

        #link:link
        {
            -ms-high-contrast-adjust: none;
            color: inherit;
        }

        #link:visited
        {
            -ms-high-contrast-adjust: none;
            color: inherit;
        }

        #link:hover
        {
            -ms-high-contrast-adjust: none;
            color: inherit;
        }

        #link:active
        {
            -ms-high-contrast-adjust: none;
            color: inherit;
        }
    </style>
</head>
<body>
<div id="container">
The <a href="" id="link">link</a> has incorrect colour under High Contrast Black theme in Microsoft Edge 14 and Internet Explorer 11.
</div>
</body>
</html>

Symptoms

The colour of the link is not red. It is yellow or green.

Expected behaviour

The colour of the link is inherit, i.e., the colour of #container, which is red.

Details

Environment 1

Item Value
Hardware Surface Pro 3, 8GB, 256GB, Hong Kong
Windows Windows 10 64-bit, Version 1607, Build 14393.479
Edge Microsoft Edge 38.14393.0.0
EdgeHTML Microsoft EdgeHTML 14.14393
Language en-US

Environment 2

Item Value
Hardware Lumia 950 XL Dual SIM, People’s Republic of China
Windows Windows 10 Mobile, Version 1607, Build 10.0.14393.953
Edge Microsoft Edge 38.14393.953.0
EdgeHTML Microsoft EdgeHTML 14.14393
Language en-US

Environment 3

Item Value
Hardware Surface Pro 3, 8GB, 256GB, Hong Kong
Windows Windows 10 64-bit, Version 1607, Build 14393.479
Browser Internet Explorer 11.953.14393.0, Update 11.0.40 (KB4012204)
Language en-US

Reproduction

  1. Set set the theme to High Contrast Black:
    • In environment 1 or 3, press Windows+S, and type Change the theme, then press Enter, and finally choose High Contrast Black under High Contrast Themes section.
    • In environment 2, open Settings app, and tap Ease of Access, then tap High contrast, turn on High Contrast, and if the background is white, tap Color settings and choose Dark.
  2. Open the corresponding browser.
  3. Go to this JSFiddle.
  4. Observe the colour of the link in the lower-right frame. The colour is either yellow or green, but not red.

Screenshot

The following screenshot gives the rendering of the aforementioned link in High Contrast Black theme, High Contrast White theme, High Contrast #1 theme or High Contrast #2 theme, depending on the current theme of the system.

Link colour is wrongLink colour is wrongLink colour is wrongLink colour is wrong
Link colour is wrong

Notes

I find it really annoying that High Contrast schemes apply to @media print, especially if it is High Contrast Black. Colours of High Contrast Black are designed to contrast against a black background, while most of the time, printing a document forces it to have white background. Microsoft should consider removing all High Contrast effects from @media print. Currently I try using @media print { * { -ms-high-contrast-adjust: none !important; } } to improve printing experience under High Contrast theme, which gives little good.

Please enable JavaScript to view the comments powered by Disqus.