High contrast mode is a special rendering mode on Windows that applies forced colors and simplifies visual elements throughout the entire platform. This mode is an accessibility feature of Windows and used by people with low vision or visual acuity issues. High contrast mode severally changes the way that websites are rendered on all Windows browsers.
References
- Enabling high contrast and customizing it (Windows 10 & 11)
- Styling Edge for Windows high contrast mode
forced-colorsmedia query (Modern browser support)-ms-high-contrastmedia query (IE11 and Legacy Edge support)- forced-colors W3C standards
| Default | HC Chromium | HC Firefox |
|---|---|---|
 |
 |
 |
Chromium-based browsers (Edge and Chrome) and Firefox both respect the forced color and style adjustments of Windows in high contrast mode. Both browsers types use the system colors rather than user specified colors for most elements. The deprecated -ms-high-contrast query still works on Edge, but is expected to be removed "soon". The system colors names and specification is often seen as deprecated as well, but that is the recommended way to specify a color and have it work in high contrast mode. Canvas and CanvasText are meant to replace Window and WindowText and are currently supported in both browser types on Windows. Other than that difference the MDN article on -ms-high-contrast linked above has the other system color names that one can use.
While both browser types render high contrast, there are some obvious differences between the browsers. The most obvious difference is in rendering SVGs with a fill of currentColor. Chromium on Windows has a specific user-agent style for SVG that sets forced-color-adjust: none. This allows one to easily set the color on an SVG in those browsers. However, there is no guaranty that the SVG will have appropriate contrast or even be visible. On Firefox, SVG's currentColor is forced to the WindowText/CanvasText color. This ensures that the icon is visible, but eliminates any color information that the SVG is expected to convey. Another, less obvious difference is that Chromium also sets the value of the prefers-color-scheme in high contrast mode depending on the Window/Canvas color used by the high contrast theme. High contrast themes with backgrounds below a certain luminosity get prefers-color-scheme: dark while background values above that threshold get prefers-color-scheme: light set, regardless of other system preferences. This is not the case in Firefox, which follows the system preference and defaults to prefers-color-scheme: light regardless of the actual theme colors. Because of the way that Firefox overwrites SVG currentColor along with the other rendering changes, the value of prefers-color-scheme has little impact on what the user sees. In Chromium, the primary difference is also in SVG's. Since they maintain the CSS specified color for currentColor, if there are different color values depending on the prefers-color-scheme value then they are seen by the user.
The most notable changes with high contrast mode are that box-shadow and background-color compute to none. This means that any component attempting to show state or other information using either of these properties will not show properly if at all. An obvious example of this is the calcite-switch component. It provides no obvious information about its checked state in high contrast. The difference in the way that SVG's are rendered causes issues with the calcite-checkbox component on Firefox and the "neutral" colored buttons with symbols on Chromium browsers.
| Component | Default | HC Chromium | HC Firefox | Notes |
|---|---|---|---|---|
| Checkbox |  |
 |
 |
FF has trouble with current implementation, but Chromium renders acceptably |
| Switch |  |
 |
Firefox same as Chromium | The switched or checked state is not visible in High Contrast browsers |
| Input - text |  |
 |
 |
FF renders native input placeholders significantly differently than Chromium |
| Input - numeric |  |
 |
 |
Numeric inputs look useable on both high contrast browsers |
| Inputs - misc |  |
 |
 |
All of these native input types look useable in high contrast browsers |
| Input - states |  |
 |
 |
FF renders disabled inputs strangely but that is its "native" way |
| Inputs - messages |  |
 |
 |
The forced color matching of SVG to text color in FF makes it so that there is very little inherent contrast |
| Inputs - error state |  |
 |
 |
The lack of a border and border color in high contrast mode makes it hard to see any difference in the field itself |
| Accordion - basic |  |
 |
 |
Icon contrast is far too low in Chromium and doesn't meet contrast requirements |
| Accordion - minimal |  |
 |
 |
Extra padding is needed in HC or selection/focus highlight obsurces the text |
| Accordion - transparent |  |
 |
 |
Other than icon contrast, this version looks good |
| Action - general |  |
 |
 |
* Active dot is missing * No border or distinction of element from page * Chromium icons are mostly invisible |
| Action Bar |  |
 |
 |
* Need a way to distinguish between the bar and the background or other elements * Icon contrast is too low on Chromium * Tooltip looks good |
| Alerts |  |
 |
 |
No link indicator of any kind in HC. Lack of color in FF means it is impossible to tell the difference between warning and danger |
| Avatar |  |
 |
 |
No colored backgrounds. No outline or border to distinguish from page elements |
| Buttons - solid |  |
 |
 |
HC Buttons (solid, outline & clear all the same) No color difference between buttons Chromium neutral buttons' icons are invisible |
| Buttons - transparent |  |
 |
 |
Transparent button colors work in Chromium, but neutral icons are invisible FF transparent buttons are all the same color |
| Chips |  |
 |
 |
FF is fairly functional but is all the same color Chromium's issues are all related SVG rendering and contrast |
| Colorpicker |  |
 |
 |
There are padding issues in the RGB inputs The color format selector seems to show the wrong one selected The colorpicker itself looks good |
| Combobox |  |
 |
 |
~ |
| Datepicker |  |
 |
 |
~ |
| Dropdown |  |
 |
 |
~ |
| Fab |  |
 |
 |
~ |
| Icons |  |
 |
 |
~ |
| Inline Edit |  |
 |
 |
~ |
| Label |  |
 |
 |
~ |
| Link |  |
 |
 |
~ |
| List |  |
 |
 |
~ |
| Loader |  |
 |
FF same as Chromium, but crashed the browser everytime | ~ |
| Modal |  |
 |
 |
~ |
| Notice |  |
 |
 |
~ |
| Pagination |  |
 |
 |
~ |
| Picklist |  |
 |
 |
~ |
| Popover |  |
 |
 |
~ |
| Progress |  |
 |
 |
~ |
| Radio button |  |
 |
 |
~ |
| Radio group |  |
 |
 |
~ |
| Rating - active |  |
 |
 |
~ |
| Rating - read only |  |
 |
 |
~ |
| Rating - disabled |  |
 |
 |
~ |
| Scrim |  |
 |
 |
~ |
| Slider - line |  |
 |
 |
~ |
| Slider - histogram |  |
 |
 |
~ |
| Sortable |  |
 |
 |
~ |
| Stepper |  |
 |
 |
~ |
| Tabs - normal |  |
 |
 |
~ |
| Tabs - bordered |  |
 |
 |
~ |
| Tile - basic |  |
 |
 |
~ |
| Tile - input |  |
 |
 |
~ |
| Time picker |  |
 |
 |
~ |
| Tooltip |  |
 |
 |
~ |
| Tree |  |
 |
 |
~ |
| Value list |  |
 |
 |
~ |