3 ms·

From TFA: outlines are preserved and used in Forced Color Modes such as Windows High Contrast Mode, where background colors, border colors, and box shadows

From TFA: outlines are preserved and used in Forced Color Modes such as Windows High Contrast Mode, where background colors, border colors, and box shadows are usually overridden by user and system styles Is this actually a thing? If so, how do I test for this (both in CSS and in practice)? I thought only MSIE had this, and MSIE is dead.

extra88 5y ago
Both Legacy Edge and the current Edge also support Windows High Contrast Mode (WHCM) as does Firefox. Also with Firefox, on any platform, you can go into the settings, Colors, and set "Override the colors specified by the page with your selections above" to Always. It won't change the colors to the ones actual WHCM users use but that doesn't matter, you can't know what colors they've set and they could be anything. Edit: If you leave the Firefox setting on "Only with High Contrast themes," the colors will also be overridden on a Mac with "Increase contrast" set. Technically, this is inaccurate, it's acting as if `forced-colors: active` is true on the system when the "Increase contrast" setting really maps to `prefers-contrast: more`. But macOS doesn't yet have an option to convey `forced-colors: active` so Firefox's choice is probably for the best for now.
Cyykratahk 5y ago
Yeah it's still around, high-contast is an OS-level accessibility setting in Windows. Here's a Microsoft article about designing for users who have enabled high-contrast mode (technically websites don't need to do anything at all, as the default browser behaviour gives a pretty decent result): https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/ https://blogs.windows.com/msedgedev/2020/09/17/styling-for-w... Unfortunately, if you want to test high-contrast mode, you'll need a Windows machine (or VM), as Edge doesn't yet have an emulation mode for it (AFAICT), and BrowserStack doesn't let you change OS settings, only browser settings.
- jeroenhd 5y ago
  If your goal is to download a VM purely for testing your website, you can download a Windows VM for free from Microsoft itself: https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ https://developer.microsoft.com/en-us/microsoft-edge/tools/v...
  - extra88 5y ago
    Those VMs only include Internet Explorer and Legacy Edge (which Microsoft no longer supports), not the current Chromium-based Edge.

extra88 5y ago

Both Legacy Edge and the current Edge also support Windows High Contrast Mode (WHCM) as does Firefox. Also with Firefox, on any platform, you can go into the settings, Colors, and set "Override the colors specified by the page with your selections above" to Always. It won't change the colors to the ones actual WHCM users use but that doesn't matter, you can't know what colors they've set and they could be anything. Edit: If you leave the Firefox setting on "Only with High Contrast themes," the colors will also be overridden on a Mac with "Increase contrast" set. Technically, this is inaccurate, it's acting as if `forced-colors: active` is true on the system when the "Increase contrast" setting really maps to `prefers-contrast: more`. But macOS doesn't yet have an option to convey `forced-colors: active` so Firefox's choice is probably for the best for now.

Cyykratahk 5y ago

Yeah it's still around, high-contast is an OS-level accessibility setting in Windows. Here's a Microsoft article about designing for users who have enabled high-contrast mode (technically websites don't need to do anything at all, as the default browser behaviour gives a pretty decent result): https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/ https://blogs.windows.com/msedgedev/2020/09/17/styling-for-w... Unfortunately, if you want to test high-contrast mode, you'll need a Windows machine (or VM), as Edge doesn't yet have an emulation mode for it (AFAICT), and BrowserStack doesn't let you change OS settings, only browser settings.

jeroenhd 5y ago
If your goal is to download a VM purely for testing your website, you can download a Windows VM for free from Microsoft itself: https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ https://developer.microsoft.com/en-us/microsoft-edge/tools/v...
- extra88 5y ago
  Those VMs only include Internet Explorer and Legacy Edge (which Microsoft no longer supports), not the current Chromium-based Edge.