# Operating System and Browser Accessibility Display Modes

DevFeed: [Operating System and Browser Accessibility Display Modes](<https://devfeed.tech/articles/operating-system-and-browser-accessibility-display-modes-9407.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/operating-system-and-browser-accessibility-display-modes/>)

Author: Eric Bailey

Published: 2020-01-23T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Dark Mode](<https://devfeed.tech/topics/dark-mode.md>), [User Interfaces](<https://devfeed.tech/topics/user-interfaces.md>), [Operating system](<https://devfeed.tech/topics/operating-system.md>), [CSS](<https://devfeed.tech/topics/css.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [css](<https://devfeed.tech/tags/css.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [os](<https://devfeed.tech/tags/os.md>), [ui](<https://devfeed.tech/tags/ui.md>), [web-browsers](<https://devfeed.tech/tags/web-browsers.md>)

## AI overview

This article explains accessibility-oriented display modes available on operating systems and web browsers, including Dark Mode, increased contrast, inverted colors, reduced motion, and high contrast. The supplied text focuses on Dark Mode: its benefits, affected interfaces, device-specific activation steps, and implementation in CSS using the prefers-color-scheme media feature. It also introduces filtered display modes and Night Mode.

## Source excerpt

Most computers, laptops, tablets, smartphones, and web browsers have specialized tools to help people read and take action on the content they display. Some of these tools are display modes, which are pre-defined visual configurations you can tell your device to use. Five such modes are Dark Mode, Increased Contrast Mode, Inverted Colors Mode, Reduced Motion Mode, and High Contrast Mode. Following is an explanation of each of these mode, who can benefit from it, how to enable it on your device or browser (if supported), and how to work with it in code. Dark Mode The User Interfaces (UI) that make up most Operating Systems (OSes) traditionally use lighter colors like white and light grays. Dark Mode is a toggle that instructs this UI to use darker colors, typically black and dark grays. It is helpful for: People who want to reduce eye strain in a low or no light environment, and/or who have certain low vision or photosensitive conditions. An example of a situation where Dark Mode could be useful is checking your phone in bed with the lights off. What it affects Dark Mode will update all UI of the OS that supports it. Most apps developed by the company that creates the operating system will also support Dark Mode. Third party apps, websites, and web apps support Dark Mode only if the people who write the necessary code to enable it. daverupert.com has support for Dark Mode. How to enable it Assumes the latest version of each Operating System or browser. Android Go to Settings. Go to Display. Set the Dark Theme toggle to the on position. iOS Go to Settings. Go to Display and Brightness. Select the Dark option for Appearance. macOS Go to System Preferences. Go to General. Select the Dark option for Appearance. Windows Go to Settings. Go to Personalization. Go to Colors. Select the Dark option for Choose your default app mode. How to target it in code You can use the prefers-color-scheme media feature to to target Dark Mode in CSS. In the following example, we set our we