Re: Dark Mode best Practise

I haven’t read the Apple docs (interested in the link, though!) - but I have to work with different color schemes anyway and I implement colours in two steps:

First I have sass variables like $main-color $main-color-0, $main-color-1, $main-color-2 and so on - also some shades of greys. The zero stands for the default color, and the colours except of zero are counted from darkest variant to the brightest.

Than I write something like this:

$input-border-color: $main-color

and

$font-default-color: $main-color

This is quite some copy and paste, that has to be done there in the first implementation, but it fastens the process of assigning new colours.

If the designer is aware of this, she will give me color palettes in which each default color has a “partner” for dark mode (or other color schemes).

After changing the basic colours, the site pretty much looks like wanted. Thats why you should not use variable-names like $main-color-bright or $main-color-bright, because in the dark mode it surely will be wrong. ;-)

There are always some details, which has to be reassigned, but because of the to layers of abstraction its fast and easy to switch some things - and you can do all of this work in one place, where all the colours are defined. Works pretty well and quick for me.

Not compatible with bootstrap of course. But bootstrap sucks anyway…

Hope this is helpful for some of you…

By the way: testing is still needed - but fixing is quick and clean.

And you can reuse a lot of this code, because you will have a default text color in every project.

Marc



On 5. Dec 2019, at 00:54, Steve Green <steve.green@testpartners.co.uk<mailto:steve.green@testpartners.co.uk>> wrote:

If your only concern is WCAG compliance, it’s not at all obvious to me that you need to test Dark Mode at all. If the default display theme is WCAG compliant, it’s not the author’s problem if users select alternate themes or other customisations that are inaccessible. They have always been able to do that.

If you are concerned about the user experience rather than WCAG, then you need to test all the things you mentioned. However, according to the Apple documentation it looks like it will be a massive pain to specify alternate colours for dark mode – it looks like days or weeks of work rather than minutes or hours, and it will involve UX designers, developers and testers, not to mention other stakeholders who might need to sign off the designs.

Steve Green
Managing Director
Test Partners Ltd


From: Murphy, Sean <SeanMichael.Murphy@team.telstra.com<mailto:SeanMichael.Murphy@team.telstra.com>>
Sent: 04 December 2019 22:36
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Cc: Allardice, Matthew <Matthew.Allardice@team.telstra.com>
Subject: Dark Mode best Practise

Hi all,

I am reaching out to find if anyone has any best practise for Dark Mode? We have reviewed the Google documentation and one of my co-workers are researching into Apples docs.  Other than colour contrast, is there any other considerations should be taken into account? Resizing, Reflow and other similar visual SC’s would have to pass the WCAG 2.1 standards of course.

Hoping someone can help.

Regards
Sean