Accessibility and dark modes on Charles Reynolds-Talbot

The Dark (Mode) Web Rises

Wed, 28 Nov 2018 20:50:37 +0000

This is part 3 in a series about why we need Dark Mode to be an inclusive design consideration.

Molly Watt
Apple need a Dark Mode
The Dark (Mode) Web Rises

In 2016, I met Molly Watt.

I was inspired by Molly and her experience of living with Usher Syndrome; a condition that has left her deaf with 5–degree vision in one eye. I wrote about my immediate desire to solve some of the problems Molly faces with using digital products.

Then, in 2017, I wrote a follow up post on how Apple (and others) need a Dark Mode; a system-level preference setting that would affect the interfaces of native, third-party apps and websites.

This year (2018), we were gifted with an update to MacOS: Mojave. Mojave shipped with a system-level Dark Mode preference setting. Finally!

Turning on Dark Mode in Mojave made instant changes to the system interface and the native Mac apps. Soon after, third-party apps started to release updates that took advantage of this preference setting too; making their interfaces work in Dark Mode. But, there was still a gap: websites.

Whilst the Safari app supported Dark Mode, there was no change to the content of the websites viewed through it. Glaring white websites were still glaringly white. It felt like a giant leap in the right direction but a small step short: until now.

Give yourself to the dark side

Please, allow me to introduce you to the prefers-color-scheme CSS media query.

Media queries are used to modify a website depending on specific characteristics (print, size, orientation, etc).

Now, we have one to detect if a user has set system-level preferences to use a light or dark colour theme.

MacOS Mojave has system-level colour preferences

This feature is not yet ready for use on general release browsers but it’s coming soon. Safari Technology Preview 68 added support last month so hopefully, it won’t be long before this finds its way into a mainstream Safari release.

Add support for Dark Mode on your website

Developers can (and should) start getting their websites ready for Dark Mode. You can install Safari Technology Preview now and start designing the perfect Dark Mode theme using colours that compliment your brand and work consistently across your website.

A simple example, to get you started:

@media screen and (prefers-color-scheme: dark) {
 body {
 background-color: black;
 color: white;
 }
}

Dark by default

You might notice that my own website is dark by default. I have made this decision as it’s not only my preference but I know it works better for Molly and for users in certain scenarios (browsing at night, migraines, hangovers, etc). Designing for the few, makes things better for the many.

I’ve used the prefers-color-scheme CSS media query to target the light preference. If you are using Safari Technology Preview on Mojave and have your preferences set to light you’ll see the light theme of my website.

You do this using:

@media screen and (prefers-color-scheme: light) {
 body {
 background-color: white;
 color: black;
 }
}

The future is dark (a good thing)

I am a designer at the UK government. This series of posts started as a result of wanting to influence the design of GOV.UK (a typically white website) so that it works better for users like Molly Watt.

So far, I haven’t got very far with this. Every potential solution seemed to come with a degree of risk and complication when considering the design principle: this is for everyone.

I reckon that using prefers-color-scheme CSS media query is a risk-free low-impact solution. It will give GOV.UK a Dark Mode for the users that prefer one and remain the same for everyone else. I’m going to prototype this and start pushing to make it happen.

I’m hopeful that, the more websites (and big brands) that implement and blog about their Dark Modes, the more chance we’ll have of seeing this feature across all browsers (not just Safari).

Other platforms need to start introducing their own system-level Dark Mode preference setting to work this way too.

Look out for a similar feature coming to iOS soon.

I can’t wait to see how websites take advantage of this new CSS media query. Share how you use it: tweet me @charles_rt or toot me @crt.

Apple need a dark mode

Fri, 18 Aug 2017 08:00:00 +0100

This is part 2 in a series about why we need dark modes to be an inclusive design consideration.

Molly Watt
Apple need a dark mode
The dark web rises

Last year, I met Molly Watt.

Molly has Usher Syndrome; a condition that has left her deaf with 5–degree vision in one eye.

Laptop glare in a dark setting by Jay Wennington on Unsplash

Molly is still a visual person. One of the problems Molly has when interacting with digital services is high contrast, specifically white backgrounds with black text.

I am a designer at the UK government. GOV.UK pride themselves on championing the needs of users, designing inclusively and building digital services that are accessible to everyone. Yet, the website is practically all white background with black text. It creates too much glare and makes it impossible for Molly to focus. It’s unusable.

The challenge

How might we allow people to change the text and background colour to suit their needs, without effecting images, video, meaning or brand?

Starting with one thing

I started with the assumption that a style switcher would solve this problem—by designing a toggle that would let users switch between a light and dark mode when needed.

GOV.UK prototype to test an idea

Reading the content in dark mode would be bearable for Molly, and might benefit others too—enhancing the experience for a user with a headache, or someone browsing in a poorly lit room. Designing for the few, makes things better for the many.

Thinking of the many

I then thought about people who have different access needs to Molly. People whose needs could be met with a similar solution. Molly’s own website has a classic accessibility toolbar, allowing people to switch between a number of different colour combinations and even change the size of the text.

Designer Craig Abbott recently implemented a great version of this on his own website that includes the ability for dyslexic users to change the typeface to one that provides increased readability for them.

There used to be a lot of websites during the 00s that had these accessibility toolbars, but it’s something that seems to have fallen out of fashion. Surely, if we build one of these for GOV.UK, that will solve the problem.

The toolbar on Craig’s website is great, until you leave

Well—while the outstanding efforts to make these websites more accessible should be celebrated, neither really solves the problem. These solutions exist in a vacuum. As soon as the user navigates to a different website that doesn’t have one of these toolbars, the customisation is lost and the experience is broken. Even if the next website did have one of these toolbars—so the option was available to make it more accessible—it wouldn’t know the settings from the previous website, so the user would always be starting from scratch. This isn’t inclusive. It’s a hack, and maybe that’s OK for now—but. We need something better.

Something slightly better

People need a way to change the text and background colours consistently, across all websites to better suit their needs. The BBC have guides on how to do this on your computer, but I wouldn’t say the steps in these guides are easy for everyone to follow and they’re still a hack.

Also—at the time of writing, people use their mobile device more than they do their desktop computer, so those guides won’t help more than half the time.

We need to be providing inclusive design solutions that meet the demand and expectations of the digital era we live it today.

Apple (and others) need to solve this problem

Molly is 22 and like most people her age, uses her iPhone and iPad to access the internet and stay connected.

Apple provide in-built accessibility features to help people with access needs use their technology which is brilliant—but. One thing I don’t think they do very well, is shout about it enough. I would love to see Tim Cook talk passionately about how Apple are making things easier for people with access needs. Unfortunately, this year I think we’ll instead see overly-excited cheers at new emojis.

Some of the new emoji coming to iOS, macOS and watchOS later this year

Molly has talked and written about how Apple products have made her feel less excluded from society, which is great. But, one thing Apple haven’t yet implemented is the option to switch to a true Dark Mode, that would make changes across the Operating System (OS), native Apple apps, third-party developer apps and web browsing.

Apple (and others) need to be making inclusive design considerations for in-built accessibility features like a Dark Mode that just works, without the need for continuous tinkering or hacks.

Everyone should be able to customise their settings for a consistent accessible experience across all their devices, so they can interact with and consume content without barriers.

Apple might be getting smarter

On iPhone and iPad there has been the option to Invert Colours. You can map this as an accessibility shortcut, so when you triple-click the Home Button, the colours will invert (white to black, black to white, etc).

The problem is that this inverts everything, which makes images unusable, brands unrecognisable, and can create confusion in interactions that previously had clear context. Inverting everything also causes a previously dark interface to become glaringly bright, which is not a solution to the problem.

There is a new feature coming called Smart Invert, which can be found in the public beta of iOS11. Unlike Classic Invert (as it is now called), this does not invert everything and appears to be a baby-step towards to a true Dark Mode. Previously bright interfaces like Mail and iMessage, become dark. Interfaces that were already dark like Clock and Calculator, do not change. Likewise, the Home Screen doesn’t change much and your photos stay the way they were supposed to be.

I am unable to take any screenshots, as weirdly the images end up re-inverting themselves which I’m hoping is a bug. 9to5mac have some good images of Smart Invert in action.

Unfortunately, third-party developer apps still mimic the Classic Invert, so everything, including images are changed. This means apps like Instagram are rendered unusable and Twitter—which already has it’s own Dark Mode option—is flipped for the worse. Browsing the web is just as difficult as it was before.

I hope that this is something that app developers will eventually be able to take advantage of, by specifying which parts of the interface should and should not change when using Smart Invert.

However, this would still need developers to make the decision to implement this, and there are no guarantees they will. Especially depending on the size of the app, this may end up being perceived as too much work to bother. Likewise, I have no idea how this would work with browsing websites, but if it required every website developer to do something, it would never happen.

So, this new feature should really be called Slightly Smarter Invert But Not Smart Enough.

So, what is the solution?

I don’t know.

Right now, we have a series of different hacks.

Some of these hacks put the responsibility on designers and developers to implement one-off solutions that will only work on their app, or website.

Others require the user to know a decent amount about their technology in the first place, to know how to successfully configure their device when it’s an option.

And then there are the things that you need to know even exist, before you can start taking advantage of them. Accessibility features just aren’t shouted about as much as they should be.

GOV.UK could, and probably should do more research into an accessibility toolbar, because the information and services on that website are meant for everyone.

Beyond that, we need companies like Apple, Google, Windows and others that design and build OSs, devices and browsers to consider the needs of users like Molly and solve the problem once, to solve it everywhere.

Molly Watt

Sat, 17 Sep 2016 21:00:00 +0100

This is part 1 in a series about why we need dark modes to be an inclusive design consideration.

Molly Watt has Usher Syndrome.

A photo of Molly Watt

Molly was born deaf and at the age of 12 began to lose her sight through retinitis pigmentosa, leaving her registered blind at 14. Today Molly hears using ReSound hearing aids and sees with the remaining 5–degree vision she has in one eye. Molly uses technology as a gateway to her independence and raises awareness of her condition through keynote speaking and consultation.

I recently heard Molly deliver a motivational presentation at a cross government accessibility meeting. This was the second time I’d had the privilege of hearing Molly inspire people to do the hard work, to make digital services better for everyone. On both occasions I immediately wanted to start solving some of the problems Molly encounters with digital services that haven’t been designed with her in mind.

This compulsive nature to solve problems can be a great strength, but it can also make you lose focus. I want to solve the immediate problem that’s before me. After research sessions with users I straight away want to address their needs and solve their problems. Then before I know it, the solutions for them cause the next group of users problems, so I solve them, then the next and the next and so on. Before I know it the first peoples problems have become yesterdays news and I haven’t fully solved them.

Accessibility is kind of like the weather

One week we’re experiencing a heatwave and everyone is really engaged and excited to be making a difference in their design and development processes. Then before you know it we’re back battling legal challenges with our umbrellas, and when it rains it pours.

Inclusive design should be considered at all times and to an extent it is, through good practices in content, interaction and technology. But — too often, other things get in the way and you need that empathetic kick. Get out there and listen to real people to better understand their needs and their problems.

What’s the accessibility forecast today?

Right now the big problem I want to solve is one that I know Molly struggles with —high contrast, specifically white backgrounds with black text. It creates too much glare and makes it impossible for Molly to focus. It’s unusable.

We’ve kind of come to associate plain white backgrounds with good simple design and think no more about it, but this is wrong and we need to do more of the hard work to include everyone.

Most people will think, “Why not just invert the colours on your device. Problem solved.” No! It’s like we can’t think outside our own degree of experience. There’s two problems with that way of thinking:

You’re assuming someone knows how to invert colours on their device—they might not.
You’re replacing one problem with another—inverting colours will invert everything and make images unusable.

When someone can see, even a little bit, you can bet your ass they’ll want to make full use of whatever vision they have left. Just because someone is registered blind, doesn’t mean they are not a visual person.

Imagine a person is carrying out lots of tasks on their device, requiring different apps and websites. As they switch between each one the base colours of that app/website will be different. What makes the contrast good on one makes it bad on another. Inverting colours is a hack (not a solution) that Molly would constantly have to flick on and off depending on what she’s viewing. That’s not inclusion. That’s ignorance.

If you have a nail you know you need a hammer

Is this true? I guess the argument in this statement is, if you have a condition you should know the tool you need to let you get on with it. I disagree. That’s ignorantly assuming that because you know you need a hammer, that all users will know they need a hammer too. And what if it’s not even a nail, what if people think it’s a nail but it’s actually a screw? Suddenly the hammer isn’t the right tool to solve the problem anymore.

High contrast black on white will be good for a proportion of the population, but what about those it’s not good for. Unless we do something for them, we’re excluding them.

What am I doing about it?

I’m trying.

There are more things that will need to be done to make sure Molly’s experiences of digital services are as inclusive as they should be, but I need to start with just one thing. A dark mode.

Dark mode is on the backlog. Now to fight for its priority @MollyWattTalks @dugboticus pic.twitter.com/rRwExgj2Nr
— Charles RT (@charles_rt) September 16, 2016

Digital services need a way to easily let people switch the core content colours to a mode that is tailored to their needs, without effecting images, video, meaning or brand.

Assuming a style switcher is the solution to this problem, it’s nothing new. It’s just something that isn’t trendy anymore. But this shouldn’t be about fashion, this is about inclusive design for all. Solving this problem for Molly will actually solve problems for other people too. A dark mode will be better for people who suffer from migraines, have a hangover or are just browsing the web in bed at night with the light off. Designing for the few, makes things better for the many.

I am a designer at the UK government. So far this solution is a Post–it on the wall under another Post–it called ‘Things we know about.’ I now need to fight for it’s priority so I can prototype it and test whether it truly does solve the problem. But this is just one service. The big win will be implementing a solution on the whole of GOV.UK, setting a standard that the rest of the web can follow.

As a baby-step I’ve already added a dark mode to my personal website. This not only helps me quickly test a solution live, but I’m also too aware of how hypocritical I am banging on about inclusive design, when my own website falls short on so many levels. I’ll write about the process of implementing this on my own website soon (it’s just a simple CSS only style switcher). I’ll also do a prototype of how the same solution could work on GOV.UK.

If nothing else comes of this I’ll at least be happy with Molly’s feedback…

Wow, brilliant thank you for going to this trouble it really makes a difference :)

I’m liking the simplicity of your website, it certainly works for me. Great contrasts too :)

Molly’s life experience has been affected by how hard people have worked to make both digital and non digital services inclusive for her. It’s affected her education, work and mental health.

It’s not enough anymore to employ people who can do a job, who code, who do design. We need to start employing people who are passionate about solving real problems, people who are empathetic, people who care.

I have published a follow up to this post called Apple need a dark mode.