improve support for invert colors and grayscale display mode (OS X and iOS)

[phiw13]

(both accessible from the Accessibility preference panel on OS X)

2 media queries (supported by Safari so far): @media (inverted-colors) {} @media (monochrome) {}

see https://drafts.csswg.org/mediaqueries-4/#mf-colors

example (really really low-hanging fruit…):

@media (inverted-colors) {
    img { filter: invert(100%); }
}

In general I found CSS filters - saturate(), brightness() to be useful to improve the appearance on inverted mode – e.g. a light grey/blue/yellow might visually contrast enough on a white background, but is to weak to conformably discern when inverted. E { saturate (1.10); } could improve things.

(I haven’t tested Hive to see what is really needed… Just passing along experience following work on other projects)

[philwareham]

Also, Dark Mode:

@media (prefers-color-scheme: dark) {)

[philwareham]

@phiw13 I guess we can bypass the inverted-colors MQ by simply making that use Dark Mode by default? Do you think that is a good compromise (I've tried to keep alll colours in Dark Mode within AAA contrast standards anyway)?

Monochrome is a different story. Will still need to investigate that more, if it's worth consideration (I have to admit I know little about how that relates to accessibility - I'll need to find some articles on it to read).

[phiw13]

monochrome is a bit problematic… The feature is useful e.g. for people who have some eye problems and want to avoid strong / lots of colours on a screen. Unfortunately on macOS 10.15 and iOS 13 and later , this has moved from a checkbox under accessibility > display to a filter on the adjacent tab (colour filters). When turning the filters on and choosing grayscale however, the Media Query (monochrome) does not work in Safari - which was the only browser to support this MQ.

inverted-colors is something that is probably not much used anymore, now that system-wide dark mode is widely supported. That said, the prefers-color-scheme MQ and inverted-colors MQ are different animals (and the two OS options) and grouping them may lead to odd results… for example, the same colour sets are shared between both MQ’s – e.g a page with a dark background. If the user chooses the OS light mode and the OS inverted-mode option, the dark background will be white / light grey. The CSS is applied first and then the OS filter kicks in and invert everything on screen.

Note that for inverted-colors you do not need to bother with images, picture, video anymore. The default Safari stylesheet already take care of that issue (since Safari 12 I think).

[philwareham]

Thanks for the detailed explanation - very informative, as always.