DEV Community

Cover image for CSS Media Queries for Accessibility
Karl Castillo
Karl Castillo

Posted on • Updated on

CSS Media Queries for Accessibility

-ms-high-contrast

-ms-high-contrast is a Windows-only media query used to set styles when the high contrast setting is active. The media query has 3 states -- active, black-on-white and white-on-black. These states except for active corresponds to 2 specific default settings available for Windows.

Accessibility Use Case

A uses case that someone would use this is to set a dark or light version of an image.

prefers-color-scheme

prefers-color-scheme allows someone to style their website depending on the user's theme preference -- light, dark or no-preference.

Accessibility Use Case

Some people are sensitive to light and it's possible that the user has set their preferred colour scheme to either light or dark. With this query, the website can automatically select a dark or light theme for the user when they visit the website.

prefers-reduced-motion

prefers-reduced-motion is used to know whether or not the user doesn't want animations or unnecessary movement to be happening on the website -- reduce or no-preference.

Accessibility Use Case

Someone who's sensitive to too much movement might want less animations happening on the website. The website might pause any videos being played by default when someone comes to the website.

Top comments (0)