6

I have a React/TypeScript project, and I am trying to detect if a user has any of Mac OS's high contrast accessibility settings enabled: Invert colors, Use grayscale, Differentiate without color, Increase contrast, or an increased Display contrast setting.

I want to detect these using JavaScript/TypeScript.

So far, I can detect only Invert colors.


How do I detect if a user has any of the other Mac OS accessibility settings enabled?


More information:

Super Jade
  • 5,609
  • 7
  • 39
  • 61
  • 1
    A potential duplicate question here: https://stackoverflow.com/questions/38104388/how-to-detect-mac-os-inverted-color-mode-in-javascript-css. Maybe let the user choose if they are in that mode via an onscreen control? – Nathaniel Flick Nov 20 '19 at 22:44
  • @NathanielFlick, I mentioned that question in my post. Unfortunately, it doesn't speak to any Mac OS high contrast settings, except Invert colors. I also do not have the option to add an onscreen control. But thanks for the suggestion. :-) – Super Jade Nov 20 '19 at 22:53
  • Really, why not? – Nathaniel Flick Nov 21 '19 at 03:52
  • " I also do not have the option to add an onscreen control." – Nathaniel Flick Nov 21 '19 at 20:02
  • @NathanielFlick, the design does not include such a control. – Super Jade Nov 21 '19 at 20:37
  • You might want to consider changing the design due to the fact this detection is so problematic. There are examples of sites that allow this as a toggle switch, "dark mode" etc. – Nathaniel Flick Nov 21 '19 at 22:12
  • @NathanielFlick, you have a point there... – Super Jade Nov 21 '19 at 22:42
  • Should you, though? Detecting screen readers comes with [privacy concerns](https://www.webaxe.org/detecting-screen-readers-no/) that could apply here too. Consider keeping your app compliant with the standards (contrasts high enough, color never being the only way to provide information) and all your users should be covered, no matter what they do with the colors on their end. – GaloisGirl Nov 25 '19 at 12:59
  • @GaloisGirl Lots of people use high contrast to reduce eye strain or just to preserve battery life. – Super Jade Nov 25 '19 at 18:55
  • I just checked webkits source. There seems to be no mention of it. https://github.com/WebKit/webkit/search?p=3&q=high+contrast&unscoped_q=high+contrast – JBis Nov 30 '19 at 16:38

4 Answers4

7

Iam afraid it is not possible its at this moment.

The feature in Objective-C to determine if the accessibility mode is active (boolean AXAPIEnabled(void);) has been deprecated as of 10.9 with no indication that there is a replacement. You can see it on the Apple Developer site. By extension, if developers at that level of the system no longer have access, I expect web developers would also be restricted (just as AppleScript writers seem to not have access).

In general, testing for the presence of assistive technology or activation of assistive features is frowned upon by the users who need it most. It creates the very real risk of both well-intentioned developers breaking these features (perhaps by un-verting the page) and also of allowing bad actors to determine somebody's personal health information.

Altought it might come in future as its in stage 5 (proposal) https://drafts.csswg.org/mediaqueries-5/#prefers-contrast

Other than that Iam afraid you are facing dead end.

Lukáš Gibo Vaic
  • 3,960
  • 1
  • 18
  • 30
1

On my last project, this was handled via a little bit UX knowledge. We went down same rabbit hole but what ended up working was user's ability to toggle some accessibility settings manually including High Contrast. I dont think you should invest too much time in answering "how to detect" as in some edge cases your effort will be bypassed if users interact via devices they dont have too much control over (shared PC, outdated devices, OS bugs etc.) Heck, some new monitors provide this feature builtin which is even harder to detect.

But, nothing as reliable as good ol' "Hello {user.name}, here are some settings you can toggle manually in the upper-right".

Happy coding!

Mike N.
  • 51
  • 5
  • @ Mike N, thanks for your answer. Unfortunately, I don't have the option of making a toggle switch. – Super Jade Nov 26 '19 at 16:07
  • That is unfortunate, I will look up if I still have that project and will pass on any solution that might aid your problem. – Mike N. Nov 26 '19 at 16:59
1

This is an old question (2019), but I was wondering this same thing myself in 2022. At least the current macOS Monterey has an accessibility feature "Increase contrast" which state can be detected with:

const prefersContrast = matchMedia("(prefers-contrast: more)");

The other states are "no-preference", "less" and "custom". See here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast

Ilmari Tyrkkö
  • 11
  • 2
0

For Electron you can use the nativeTheme API and access the nativeTheme.shouldUseHighContrastColors property.

A Boolean for if the OS / Chromium currently has high-contrast mode enabled or is being instructed to show a high-constrast UI.

// in main process
const {nativeTheme} = require('electron');

console.log(nativeTheme.shouldUseHighContrastColors);

Note to OP: I understand this does not solve your issue as you are trying to do this in a browser not an electron app, however I figure that this question may come up in search results for people who are looking to add this functionality in an electron app so I figured I would add an answer.

JBis
  • 827
  • 1
  • 10
  • 26