search

w3c / aria-practices

WAI-ARIA Authoring Practices Guide (APG)
https://www.w3.org/wai/aria/apg/
Other
1.2k stars 331 forks source link

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

Open jongund opened 1 month ago

jongund commented 1 month ago

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 commented 1 month ago

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 commented 6 days ago

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.