Search code examples
browsermedia-queriesaccessibilitysettings

How do I change the `prefers-reduced-motion` setting in browsers?

There is plenty of documentation around on how to use the prefers-reduced-motion media query in CSS.

This is great but now that I'm using prefers-reduced-motion in my CSS, I want to be able to test what using my site is like for someone that has this setting enabled. I can't find any information on how to do this though and I'm having difficulty finding this as a setting in browser settings.

Maybe this isn't a browser setting at all. Maybe this is something that is set at the Operating System level. 🤔

Solution

  • Oh, I didn't see the "User Preferences" section in the mdn documentation. 🤦🏻‍♂️

    For Firefox, the reduce request is honoured if:

    • In GTK/Gnome, if gtk-enable-animations is set to false. This is configurable via GNOME Tweaks (Appearance tab or General tab, depending on version).
      • Alternately, add gtk-enable-animations = false to the [Settings] block of the GTK 3 configuration file (~/.config/gtk-3.0/settings.ini).
    • In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
    • In Window 7 [& 8]: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
    • In macOS: System Preferences > Accessibility > Display > Reduce motion.
    • In iOS: Settings > General > Accessibility > Reduce Motion.
    • In Android 9+: Settings > Accessibility > Remove animations.

    Source: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#User_Preferences

    It says "for Firefox" however since this is a system setting at the OS level, this is likely how you change the setting for all browsers that support this media query.