Last Updated: 2019-03-25
The following is a collection of test cases comparing different styling of inputs when High Contrast Mode is enabled.
High contrast is a Windows accessibility feature intended to increase the readability of text through color contrast. Individuals with low vision may find it more comfortable to read content when there is a strong contrast between foreground and background colors. High contrast is a useful feature in increasing the readability of screen-based text for such users.
The Windows platform provides built-in high contrast color themes such as the more popular "black-on-white" and "white-on-black" themes. Besides the default themes, users can customize the colors and create their own themes. Applications can make use of these color themes and propagate them into their content model. In the case of the web browser, high contrast colors are propagated to website pages as a set of user agent styles, thus increasing readability of the text and allowing a coherent experience across the Windows OS and various applications. — Ref. 1
Internet Explorer and Edge have a vendor-prefixed -ms-high-contrast media feature which allows developers to detect if the user is currently in Windows High Contrast Mode, and to apply specific additional style rules in that situation. — Ref. 2
Google Chrome will prompt the user to install the High Contrast extension while Mozilla Firefox supports Windows high contrast mode; Firefox does not support the -ms-high-contrast CSS media feature as it is non-standard. — Ref. 3
While Windows supports High Contrast Mode, macOS applies an invert color setting which impacts the entire operating system including browsers and the content within them. — Ref. 4 The inverted color setting allowed users to switch between light-on-dark / dark-on-light text (with the side effects of inverting images for example); this is somewhat similar to how Window's High Contrast mode offers a black-on-white / white-on-black color theme where the side effect on the Window's side being background images being ignored (with the exception of Microsoft Edge — Ref. 5 which Microsoft Edge applies an intermediary layer behind all text to ensurce contrast lying above images — Ref. 6)
User Preference Media Features While the CSS Level 5 media query draft has multiple user preferences which covers some of the topics discussed above such as:
- inverted-colors
- prefers-color-scheme (Note: High contrast mode could be used as a makeshift "nightmode" for those working with applications that don't offer a nightmode/high contrast/dark theme)
For the sake of this repo, the focus will be on True high contrast, which is along the lines of Windows High Contrast Mode, which currently is prefers-contrast in the CSS Level 5 media query draft.
This is intended for users with unusual vision impairments, who may also use other accommodations such as screen magnification to be able to access content.
- This is often an operating system setting which affects how text, borders and images are displayed. In this case, developers may wish to make adjustments to ensure that these modifications don't create other problems.
— Ref. 7
Tests 01 - 14: While not a true "reduced" test case collection, this shows an example in which someone may need to set the input's background to appear transparent. These test focus on the background shorthand css property background:
Tests 15 - 26: These test are similar to Test 01 - 14 but uses background-color so tests 13 & 14 are not included here.
Test 27: This test is an example of Material Design Filled text fields & used as an example for Firefox Issue #1536616
Test 28: Reduced test case.
Operating System: Windows 10 Pro
- Version: 1809
- OS build: 17763.348
Browsers:
- Microsoft Edge 44.17763.1.0, Microsoft EdgeHTML 18.17763
- Microsoft Internet Explorer 11, Version: 11.379.17763.0, Update Versions: 11.0.115
- Firefox Quantum, Version: 65.0.2 (64-bit)
- Firefox ESR, Version: 52.9.0 (64-bit)
- Google Chrome, Version 72.0.3626.121 (Official Build) (64-bit) ¯\_(ツ)_/¯ - See issue #12
- Microsoft Edge Explainers on the subject of High Contrast
- Paciello Group blog post titled Windows High Contrast Mode: the limited utilitiy of -ms-high-contrast
- MDN web docs on -ms-high-contrast CSS media feature
- Adrian Roselli's blog post titled OS: High Contrast versus Inverted Colors
- Quick Note on high contrast mode
- Microsoft Edge Explainers - Ensuring Readability
- CSS Level 5 media query w3c/csswg-draft topic prefers-contrast: high media feature does not accurately describe the macOS/iOS state