Authoring best practices for supporting prefers-color-theme: dark media query

[jongund]

Operating systems support light and dark color themes, typically the setting is part of appearance or display options and not in the "accessibility" options section.

The light color theme is typically the default on most operating systems. Authors can identify the color theme setting through the CSS media query prefers-color-theme.

The dark color theme is associated with lower power consumption, less eye strain and considered easier to read or less disruptive in dark settings (e.g. night time). People with some types of visual impairments prefer to use the dark color theme as their default. When the user selects the dark color theme the CSS media query prefers-color-theme is set to dark.

Questions:

1. What are the best practices for support the prefers-color-theme media query to make web pages more accessible?
2. Which WCAG requirements apply to this user preference?
3. What should authors do to support both the light and dark color themes?

[jongund]

Wikipedia supports light and dark color preferences through an "appearance" button, which visually looks like eye glasses at the beginning (e.g. top) of the page.

[erikgiovani]

Operating systems support light and dark color themes, typically the setting is part of appearance or display options and not in the "accessibility" options section.

The light color theme is typically the default on most operating systems. Authors can identify the color theme setting through the CSS media query prefers-color-theme.

The dark color theme is associated with lower power consumption, less eye strain and considered easier to read or less disruptive in dark settings (e.g. night time). People with some types of visual impairments prefer to use the dark color theme as their default. When the user selects the dark color theme the CSS media query prefers-color-theme is set to dark.

Questions:

1. What are the best practices for support the prefers-color-theme media query to make web pages more accessible?
2. Which WCAG requirements apply to this user preference?
3. What should authors do to support both the light and dark color themes?

It is best to give the user a choice between the system default, light or dark, as not all people can read well on dark backgrounds.