CSS Media Queries for Accessibility

koralarts

Karl Castillo

Posted on March 10, 2020

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.

💖 💪 🙅 🚩
koralarts
Karl Castillo

Posted on March 10, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Drawing Togo's Flag with CSS
css Drawing Togo's Flag with CSS

November 19, 2024

Exploring Nesting with Flexbox
learning Exploring Nesting with Flexbox

August 30, 2024

Bad CSS-Dad Jokes (III)
css Bad CSS-Dad Jokes (III)

September 27, 2024

Bad CSS-Dad Jokes (II)
css Bad CSS-Dad Jokes (II)

September 23, 2024