Tracking accessibility preferences in Plausible

I was curious to know the percentage of my website visitors had set a preference for light or dark mode. I also wanted to know how many visitors had set accessibility preferences for higher/lower contrast or reduced motion. Lastly, I wanted to know how many people’s screens supported high dynamic range (HDR) colors.

Plausible Analytics is an open source, privacy-preserving website analytics product. It tracks device type, operating system, and browser by default. Additional user agent information can be appended manually.

Tutorial

1. Include the Plausible Analytics script capable of manually tracking custom pageview properties. Follow the the official instructions.

It will look something—but not exactly—like this:

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.manual.js"></script>

Keep in mind that if you are using other Plausible extensions, those will still need to be included. The key part is the addition of a manual extension into the Plausible script path.

2. Add the following code to every page on which you want to track these details.

You have 2 options:

  1. Copy the code below into a accessibility-prefs.js file and include it in the HTML <head> after the Plausible script.
  2. Copy the code below into a <script> tag just above the closing </body> tag.
window.plausible = window.plausible || (() => { (window.plausible.q = window.plausible.q || []).push(arguments) });

const customPageviewProps = new Map();

// Preference for light or dark mode
if (window.matchMedia("(prefers-color-scheme: light)").matches) {
	customPageviewProps.set("prefers-color-scheme", "light");
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
	customPageviewProps.set("prefers-color-scheme", "dark");
}

// Preference for less motion
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
	customPageviewProps.set("prefers-reduced-motion", "reduce");
}

// Preference for more or less contrast
if (window.matchMedia("(prefers-contrast: more)").matches) {
	customPageviewProps.set("prefers-contrast", "more");
} else if (window.matchMedia("(prefers-contrast: less)").matches) {
	customPageviewProps.set("prefers-contrast", "less");
} else if (window.matchMedia("(prefers-contrast: custom)").matches) {
	customPageviewProps.set("prefers-contrast", "custom");
}

// HDR capable screens
if (window.matchMedia("(video-dynamic-range: high)").matches) {
	customPageviewProps.set("video-dynamic-range", "high");
}
if (window.matchMedia("(dynamic-range: high)").matches) {
	customPageviewProps.set("dynamic-range", "high");
}

if (customPageviewProps.size > 0) {
	plausible("pageview", { props: Object.fromEntries(customPageviewProps) });
}

3. Tell Plausible you want to see the custom properties. In the Plausible dashboard, go to the Custom Properties section in your site settings. Tap the Add Property button and add the 5 custom properties individually: prefers-color-scheme, prefers-contrast, prefers-reduced-motion, dynamic-range, video-dynamic-range.

Screenshot of Plausible Analytics settings page, custom properties section. Modal for Add Property. Property input field text prefers-reduced-motion with autocomplete suggesting Create prefers-reduced-motion.

4. View your site and then view your stats. The Custom Properties section and Properties sub-section now will show the custom pageview properties when sent.

Screenshot of macOS System Settings, Accessibility Display section, Reduce motion enabled, Increase contrast enabled

Screenshot of Plausible Analytics stats, custom properties section with prefers-contrast property selected. 2 rows of results: none with 2 visitors and more with 1 visitor.