Inverting The Colors on Your PC for Accessibility

Recently when developing styles for accessible form inputs an interesting challenge came up — how to handle the inverted color schemes that are available on Windows computers. But why invert the colors? Those with vision issues may want to invert the colors on your Windows PC for readability and accessibility purposes.

For reference, to switch a Windows PC to use inverted colors, you can use the keyboard shortcut:

Shift+Alt+PrtScr

By default, form inputs like 

<input>

<textarea>

However, if you are doing custom styling without using the border property, for example using box-shadow and hiding the border in a standard color view, you may notice that box shadows on these elements do not appear in the inverted mode, creating an accessibility issue for users that are using the inverted mode.

A quick trick to fix this issue is by adding a transparent border to those elements, like so:

border: 1px solid transparent;

This could potentially create a gap if you are using a combination of inset and outside box-shadow properties — so we can use a media query to specify when it should be used — in this case, when the inverted mode is active.

There are two useful media queries that are currently available that can achieve this goal:

-ms-high-contrast: active and forced-colors: active

The first media query works on older versions of Internet Explorer, and forced-colors works on (most) modern browsers.

The final code should look something like this:

@media screen and (-ms-high-contrast: active), (forced-colors: active) {
  border: 1px solid transparent;
}

A side note: currently neither of these media queries appear to work on the latest Firefox as of writing this.

Both are fully supported in the latest Microsoft Edge, which is the best-supported browser when using inverted color mode.

Originally published at https://jaketracey.com.