When people talk about accessibility and CSS, they often mean properties that affect the accessibility tree and assistive technologies such as screen readers and voice control software. But there's another ally in the battle for accessible interfaces — media features.
Media features are conditions for the @media CSS at-rule. They indicate specific characteristics of the device or browser. For example, screen orientation (orientation) or display mode (display-mode). In this article, I'll talk about a few media features: prefers-reduced-motion, prefers-color-scheme, inverted-colors, forced-colors, ms-high-contrast, prefers-contrast, and prefers-reduced-transparency.
These media features track operating system settings which changed by users who aren't satisfied with the default behavior of the system. For example, people with disabilities and those who are uncomfortable with the default design. Real world examples:
Users prone to epileptic seizures turn off animation because it can trigger a photosensitive seizures
Some people with astigmatism choose a dark theme and reduce contrast to avoid eye strain.
Considering user preferences will make the site's interface more flexible and personalized. This will not only help improve its accessibility but can also increase conversion rates. It's always nice to use products that cares about your preferences.
Most customizations apply only to the operating system. Many of them, like animations and contrast levels, don't change website interfaces. It all depends on whether the developers have taken them into account. This is where media features come in handy.
You can also track user settings with JavaScript, but I don't want to make this post bigger. I'll just focus on CSS features.
System settings
Let's take a look at the settings which can be considered in web interfaces now or in the future.
Animation
Animation settings allow you to change the speed of animations or turn them off completely. These settings don't affect websites unless they contain specific CSS at-rule styles.
Users who may adjust animation settings include:
People with vestibular disorders or those prone to seizures
People with cognitive disabilities and neurodivergent users, particularly those with attention deficit disorder (ADD).
Most operating systems include a ″reduce motion″ or ″minimize animation″ setting to accommodate these users needs.
Color scheme
Users can also change the color scheme settings and select the colors that will dominate the system. These are either light or dark shades. The setting does not affect sites if they do not support color schemes.
The following categories of users utilize color scheme setting:
People with visual impairments. For example, a person with low vision, eye strain, and light sensitivity
Those with cognitive disabilities and neurodivergent folks. For instance, individuals with ADD
Everyone else due to aesthetic preferences, habits, or lighting conditions.
Color schemes can be selected in all popular operating systems. macOS and iOS have an additional automatic theme. If selected, it applies a light theme during the day and a dark theme at night.
Inverted colors
Inverted colors mode replaces system colors with their opposites, like a negative. It's a part of the filtered display mode category of settings.
Colors change not only in the system but also in browser tabs. So users might choose this mode instead of a dark theme. The screenshot shows how the inversion mode works. Yellow shades have turned blue, green has become magenta, and white has turned black.
Doka Guide with inverted colors on Windows 10.
Who uses inverted colors mode:
People with visual impairments. For example, individuals with glaucoma or eye strain
People with migraines and headaches
Other users due to personal preferences, habits, or lighting conditions.
Most operating systems have inverted colors setting. On iOS, there are even two types of inversion: Smart and classic. In smart invert mode, pictures and videos are not inverted, while in classic one, all content is inverted.
Color mode
Forced colors mode limits the number of colors to improve text readability by changing the contrast between text and background. High-contrast colors are mainly used. This mode changes colors both in the system and on websites.
Who uses forced colors mode:
Users with visual impairments;
People with migraines and headaches
People with photosensitive epilepsy
Users who need to reduce visual noise to improve concentration.
Currently, this mode can only be selected in Windows. In Windows 10 and earlier versions, it's called Windows high contrast mode (WHCM). In Windows 11, it's called contrast themes.
The high contrast mode has several pre-set color schemes:
High contrast black
High contrast white
High contrast one (1) and two (2).
The technology for replacing the color palette depends on the browser. It differs in Chromium-based browsers, Firefox (Quantum engine), Internet Explorer (Trident), and in older versions of Edge (EdgeHTML). For example, in Vivaldi (Chromium), the white background of the site becomes black, gray links and borders become bright yellow, and regular text becomes white instead of dark gray.
″Web Standards″ website with the high contrast black mode in Vivaldi on Windows 10.
In Firefox, the originally white background will remain the same, gray links and borders will become bright blue, and regular text will be black instead of dark gray.
A distinctive display of the high contrast black mode in Firefox on Windows 10.
You can change the default behavior in Firefox. The setting is located in the Language and Appearance section, specifically in the ″Colors″ subsection. Open the modal window with the ″Manage Colors…″ button and select the ″Use system colors″ checkbox.
In Windows 11, the set of contrast themes has changed: Aquatic, desert, dusk, and night sky have been added.
″Web Standards″ with the night sky mode in Vivaldi on Windows 11.
If the pre-set themes don't suit you, you can customize them yourself. This includes the option to reduce contrast.
Contrast
Users can separately increase or decrease the level of contrast in the system without changing the screen brightness.
The contrast settings is used by:
People with visual impairments, for example, those with glaucoma
People who have migraines and headaches
Those with old or low-quality displays
Others who need higher contrast due to lighting conditions.
macOS and iOS have the increased contrast mode. It increases the difference between shades of gray and makes element borders more distinct.
Increasing contrast affects the appearance of both the system and web interfaces. Unlike system windows, only the contrast level changes on websites.
Let's look at what happens to a modal window in macOS with default mode and with increased contrast mode. Both windows show an image of a screaming cat called ″cute-cat.jpeg″. The first window has no frame, and the background of the control panel with buttons and additional settings is light gray. The second window looks visually different from the first. It has a black frame, the background of the control panel has become white, and all buttons and other elements in the panel have separate black frames.
Oddly enough, everything has become more contrast.
Transparency
Users can enable or disable background transparency. Those who increase contrast often choose an opaque background.
A transparent background can increase cognitive load and reduce text readability. Therefore, this setting is used by:
People with visual impairments. For example, those with astigmatism or low vision
Users with cognitive disabilities and neurodivergent people. For instance, dyslexic users or those with ADD
People with migraines and headaches.
Transparency can be precisely adjusted in Windows and macOS. These settings not only affect the transparency in the system interface but also on websites and in browsers. This screenshot shows the navigation background of the first window is semi-transparent, while the second one has an opaque and solid background.
This is how the transparency setting works in Windows 11.
A few words about media types
The @media at-rule in CSS has several media types. They describe the device on which the document is displayed.
all: All devices. It's set automatically if no other type is specified
screen: Devices with screens. For example, phones and laptops
print: Devices with preview and print functions. This includes printers
speech: Devices with speech synthesis. For example, screen readers and voice assistants.
The speech media type may be interesting from the point of view of accessibility. However, it is not currently supported by any browser. It used to be supported by the Opera browser on the Presto engine but support ceased after switching to Blink.
Now we move on to media features that will help make web interfaces more accessible.
Some of them are not yet well supported by browsers. Things may change in the future with the development of CSS. In any case, it's useful to know about them.
prefer-reduced-motion
It tracks whether animation settings are selected to reduce its intensity. This is useful for any animation on the website. The animation can be slowed down or completely disabled.
When people talk about accessibility and CSS, they often mean properties that affect the accessibility tree and assistive technologies such as screen readers and voice control software. But there's another ally in the battle for accessible interfaces — media features.
Media features are conditions for the @media CSS at-rule. They indicate specific characteristics of the device or browser. For example, screen orientation (orientation) or display mode (display-mode). In this article, I'll talk about a few media features: prefers-reduced-motion, prefers-color-scheme, inverted-colors, forced-colors, ms-high-contrast, prefers-contrast, and prefers-reduced-transparency.
These media features track operating system settings which changed by users who aren't satisfied with the default behavior of the system. For example, people with disabilities and those who are uncomfortable with the default design. Real world examples:
Users prone to epileptic seizures turn off animation because it can trigger a photosensitive seizures
Some people with astigmatism choose a dark theme and reduce contrast to avoid eye strain.
Considering user preferences will make the site's interface more flexible and personalized. This will not only help improve its accessibility but can also increase conversion rates. It's always nice to use products that cares about your preferences.
Most customizations apply only to the operating system. Many of them, like animations and contrast levels, don't change website interfaces. It all depends on whether the developers have taken them into account. This is where media features come in handy.
You can also track user settings with JavaScript, but I don't want to make this post bigger. I'll just focus on CSS features.
System settings
Let's take a look at the settings which can be considered in web interfaces now or in the future.
Animation
Animation settings allow you to change the speed of animations or turn them off completely. These settings don't affect websites unless they contain specific CSS at-rule styles.
Users who may adjust animation settings include:
People with vestibular disorders or those prone to seizures
People with cognitive disabilities and neurodivergent users, particularly those with attention deficit disorder (ADD).
Most operating systems include a ″reduce motion″ or ″minimize animation″ setting to accommodate these users needs.
Color scheme
Users can also change the color scheme settings and select the colors that will dominate the system. These are either light or dark shades. The setting does not affect sites if they do not support color schemes.
The following categories of users utilize color scheme setting:
People with visual impairments. For example, a person with low vision, eye strain, and light sensitivity
Those with cognitive disabilities and neurodivergent folks. For instance, individuals with ADD
Everyone else due to aesthetic preferences, habits, or lighting conditions.
Color schemes can be selected in all popular operating systems. macOS and iOS have an additional automatic theme. If selected, it applies a light theme during the day and a dark theme at night.
Inverted colors
Inverted colors mode replaces system colors with their opposites, like a negative. It's a part of the filtered display mode category of settings.
Colors change not only in the system but also in browser tabs. So users might choose this mode instead of a dark theme. The screenshot shows how the inversion mode works. Yellow shades have turned blue, green has become magenta, and white has turned black.
Doka Guide with inverted colors on Windows 10.
Who uses inverted colors mode:
People with visual impairments. For example, individuals with glaucoma or eye strain
People with migraines and headaches
Other users due to personal preferences, habits, or lighting conditions.
Most operating systems have inverted colors setting. On iOS, there are even two types of inversion: Smart and classic. In smart invert mode, pictures and videos are not inverted, while in classic one, all content is inverted.
Color mode
Forced colors mode limits the number of colors to improve text readability by changing the contrast between text and background. High-contrast colors are mainly used. This mode changes colors both in the system and on websites.
Who uses forced colors mode:
Users with visual impairments;
People with migraines and headaches
People with photosensitive epilepsy
Users who need to reduce visual noise to improve concentration.
Currently, this mode can only be selected in Windows. In Windows 10 and earlier versions, it's called Windows high contrast mode (WHCM). In Windows 11, it's called contrast themes.
The high contrast mode has several pre-set color schemes:
High contrast black
High contrast white
High contrast one (1) and two (2).
The technology for replacing the color palette depends on the browser. It differs in Chromium-based browsers, Firefox (Quantum engine), Internet Explorer (Trident), and in older versions of Edge (EdgeHTML). For example, in Vivaldi (Chromium), the white background of the site becomes black, gray links and borders become bright yellow, and regular text becomes white instead of dark gray.
″Web Standards″ website with the high contrast black mode in Vivaldi on Windows 10.
In Firefox, the originally white background will remain the same, gray links and borders will become bright blue, and regular text will be black instead of dark gray.
A distinctive display of the high contrast black mode in Firefox on Windows 10.
You can change the default behavior in Firefox. The setting is located in the Language and Appearance section, specifically in the ″Colors″ subsection. Open the modal window with the ″Manage Colors…″ button and select the ″Use system colors″ checkbox.
In Windows 11, the set of contrast themes has changed: Aquatic, desert, dusk, and night sky have been added.
″Web Standards″ with the night sky mode in Vivaldi on Windows 11.
If the pre-set themes don't suit you, you can customize them yourself. This includes the option to reduce contrast.
Contrast
Users can separately increase or decrease the level of contrast in the system without changing the screen brightness.
The contrast settings is used by:
People with visual impairments, for example, those with glaucoma
People who have migraines and headaches
Those with old or low-quality displays
Others who need higher contrast due to lighting conditions.
macOS and iOS have the increased contrast mode. It increases the difference between shades of gray and makes element borders more distinct.
Increasing contrast affects the appearance of both the system and web interfaces. Unlike system windows, only the contrast level changes on websites.
Let's look at what happens to a modal window in macOS with default mode and with increased contrast mode. Both windows show an image of a screaming cat called ″cute-cat.jpeg″. The first window has no frame, and the background of the control panel with buttons and additional settings is light gray. The second window looks visually different from the first. It has a black frame, the background of the control panel has become white, and all buttons and other elements in the panel have separate black frames.
Oddly enough, everything has become more contrast.
Transparency
Users can enable or disable background transparency. Those who increase contrast often choose an opaque background.
A transparent background can increase cognitive load and reduce text readability. Therefore, this setting is used by:
People with visual impairments. For example, those with astigmatism or low vision
Users with cognitive disabilities and neurodivergent people. For instance, dyslexic users or those with ADD
People with migraines and headaches.
Transparency can be precisely adjusted in Windows and macOS. These settings not only affect the transparency in the system interface but also on websites and in browsers. This screenshot shows the navigation background of the first window is semi-transparent, while the second one has an opaque and solid background.
This is how the transparency setting works in Windows 11.
A few words about media types
The @media at-rule in CSS has several media types. They describe the device on which the document is displayed.
all: All devices. It's set automatically if no other type is specified
screen: Devices with screens. For example, phones and laptops
print: Devices with preview and print functions. This includes printers
speech: Devices with speech synthesis. For example, screen readers and voice assistants.
The speech media type may be interesting from the point of view of accessibility. However, it is not currently supported by any browser. It used to be supported by the Opera browser on the Presto engine but support ceased after switching to Blink.
Now we move on to media features that will help make web interfaces more accessible.
Some of them are not yet well supported by browsers. Things may change in the future with the development of CSS. In any case, it's useful to know about them.
prefer-reduced-motion
It tracks whether animation settings are selected to reduce its intensity. This is useful for any animation on the website. The animation can be slowed down or completely disabled.
