Windows “high contrast” mode

As an aid to vision-impaired users MS Windows operating system offers a "high contrast" mode. While most of the modern browsers have no issues with it, there are some quirks affecting chart visibility in older Internet Explorer and EDGE browsers. This tutorial shows a quick workaround.

The problem

Internet Explorer and EDGE browsers, when Windows is in "high contrast" mode, revert to default black background on all web pages.

Since default color for text in amCharts is also black, it makes virtually all labels become invisible.

The black labels disappear on the black background.

The solution

The solution is to force all labels on the chart to be white.

Since we can't detect "high contrast" mode, and we don't want to make all labels white (which would make them invisible in normal mode), we're going to be using CSS @media directive to override label colors just for the high-contrast mode:

@media screen and (-ms-high-contrast: active) {
  #chartdiv text {
    fill: #fff!important;

The above targets chart with a specific id "chartdiv". You may need to adjust CSS selectors to mach your setup.

Here's how it looks like now:

Yup. Much better!


See the Pen amCharts 4: Using with Windows High-Contrast mode by amCharts team (@amcharts) on CodePen.24419