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: +Alt+PrtScr Shift By default, form inputs like and will look fine and the colors will invert properly. <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: : 1 ; border px 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: @ screen and (-ms-high-contrast: active), (forced-colors: active) { : 1 ; } media border px 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 .
