Skip to main content Accessibility Feedback

Supporting user preferences on your sites and apps

Back in July, I wrote about how I rolled out an improved dark mode for my website.

I discussed how the prefers-color-scheme media query can be used to support a user’s choices in their operating system. I also shared some tips for making sure your color choices have proper contrast using WebAIM’s color contrast tool.

/**
 * If dark mode is enabled, do this instead
 */
@media (prefers-color-scheme: dark) {
	/* ... */
}

Last week, inclusive design advocate (and personal friend) Eric Bailey shared an article he wrote about a variety of OS-level choices a user can make that are (or soon will be) detectable with media queries.

Among my favorites are…

  • Reducing motion and animations (which I’ve written about before here)
  • Reducing data usage, which will be really useful for serving smaller assets on low bandwidth or low data devices
  • Contrast mode
  • Transparency, to disable or reduce transparent graphics

Eric’s whole article is a good introduction to thoughtful, user-focused design. Give it a read!