Complete guide to user preference media features in CSS
The user preference media features is probably one of the most exciting upcoming CSS features. It allows you to create more accessible and tailored experiences to accommodate different user needs. It is worth noting that at time of writing a lot of these media features aren’t fully supported across browsers but that shouldn’t stop you using them today. If they aren’t supported in the browser the user is using then it’ll just be ignored. There are currently 6 different user preference media features written in the w3.org spec, which are:
- Prefers-reduced-motion
- Prefers-reduced-transparency
- Prefers-contrast
- Prefers-color-scheme
- Forced-colours
- Prefers-reduced-data
1. Less motion on the page using the prefers-reduced-motion feature
Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.
“..as many as 35 percent of adults aged 40 years or older in the United States (approximately 69 million Americans) have experienced some form of vestibular dysfunction” – Vestibular.org
Consider providing a mechanism for pausing or disabling animation, as well as using the reduced motion media query to create a complimentary experience for users who have expressed a preference for no animated experiences.
The reduced motion query can be used to detect if the user has set in their device settings they prefer reduced amount of animation or motion.
The media query can be written like this:
@media (prefers-reduced-motion: reduce){
}Which indicates that the user has requested reduce motion, another way to think of this value is if you were programming and set a boolean value this would be “false”. Alternatively the opposite is:
@media (prefers-reduced-motion: no-preference){
}The no preference value indicates the user has not explicitly requested reduced motion. You can never know for certain whether or not the user would prefer reduced motion as they may not know the setting exists. This links to the point above which is to offer users the ability to pause animations on the site or if you use animations or motion then be careful with the usage of it.
2. A preference for increased or decreased contrast using the prefers-contrast
Some users prefer to have more or less contrast between elements. The prefers-contrast media feature can be used to detect if the user has requested less or more contrast.
You can also write a media query for if the user has no preference, like this:
@media (prefers-contrast: no-preference) {
}If the user would prefer lower contrast then you can write a media query like this:
@media (prefers-contrast: low) {
}There is also the value for high, which can be written like this:
@media (prefers-contrast: high) {
}The final value is “forced” which is where the user agent sets their own preferred colour palette on the page. This media query can be written like this:
@media (prefers-contrast: forced) {
}3. Creating a light and dark version using the prefers-color-scheme user preference
This is probably the most well-known property of all of the user preference media features. The prefers-color-scheme allows you to create a light and a dark theme for your website.
To use the prefers-color-scheme you could write it like this:
@media (prefers-color-scheme: light) {
}Inside this media query you would write the CSS if the user’s preference is a “light” colour scheme. The light colour scheme is also the default option.
If you wanted to write the CSS for a dark theme you could write it like this:
@media (prefers-color-scheme: dark) {
}There is potential for this to be expanded in the future to include other types of color schemes but for now it’s just simply light or dark.
4. What to do if the user has limited the colour palette on the page using the forced-colours feature
Some users have a preference with a particular amount of contrast between the foreground and background colours. The forced colors mode intention is to be another useful accessibility feature to allow users to set their preferred colours.
5. What to do if the user has requested less data to be used using the prefers-reduced-data
The reduced data media feature can serve CSS that is lighter which will used less data on page load. It could be used to remove animations, serve lighter background images, not loading custom fonts and much more.
There are two values you can use, the first is no-preference:
@media (prefers-reduced-data: no preference) {
}Similarly to other media features the no-preference value is the default option, that the user hasn’t specified whether they want reduced data or not.
The alternative value is reduce, which can be written like this:
@media (prefers-reduced-data: reduce) {
}6. Minimising the amount of transparency using the prefers-reduced-transparency
To help users with partial sight the prefers-reduced-transparency can allow you to write CSS that uses less transparent or translucent layers.
The no-preference value can be written like this:
@media (prefers-reduced-transparency: no-preference) {
}Alternatively the reduce value can be written like this:
@media (prefers-reduced-transparency: reduce) {
}Further reading
- Scroll to text fragment: How to link & highlight any text on a web page
- Feature detection using @supports in CSS
- One thing per page principle
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects