Dark Mode iOS 13

There have been a number of changes announced at WWDC which we’ve covered previously but a handful of major new features are worth looking into in more detail. App Developers and technology companies will need to take changes like dark mode into consideration while developing or updating their apps going forwards and with iOS 13 available for developers already, and the public release likely to be pushed to consumers in September, now’s the time to get your apps ready for the changes.

 

This week we’ll take a deep dive into the announcement of dark mode and our thoughts on implementing it into your own apps.

 

Dark mode has now been integrated throughout iOS 13 and we’re advising app owners to add the requisite setting into their apps. Lots of users already use dark mode in some form with around 50% of users adopting it in at least one of their apps over the last 5 years. Users love dark mode for a number of reasons and it’s fast becoming an expected feature in modern apps adhering to a user centred design philosophy.

The Benefits

Improved readability, power saving, reduced eye fatigue and better contrast are just a few of the benefits but developers are also starting to see a positive correlation with user retention. With this in mind Indiespring are now advising dark mode should be a major consideration in any app design process. It also reduces eye-strain and blue light exposure which means users are able to use your app comfortably for longer while reducing the effects of late night phone usage on sleep patterns. 

On iOS 13 dark mode can be either permanently enabled or automatically toggled in low light levels at an OS level. For users who adopt it the difference between dark mode enabled and regular apps will be literally glaring; with apps which don’t support it being particularly uncomfortable to switch to in a low light environment.

Our Insights

Our UX experts and designers are already well under way in working on our current suite of apps to accommodate the new system wide changes and there are often branding considerations to make during the process. Your branding might not naturally work with the darker palette and it may well be worth revisiting your brand guidelines with dark mode in mind.

Avoid using over-saturated colors in your designs for dark mode. Saturated colors often produce blurring against a dark background which can lead to eye strain.”  James Marshall – Indiespring Head of UX

There are also a few accessibility rules that some developers miss while designing for the new display mode which are worth taking stock of. Naturally; surfaces must be dark enough to display white text. They should use a contrast level of at least 15.8:1 between text and the background. This ensures that body text passes WCAG’s AA standard of at least 4.5:1 when applied to surfaces at the highest (and lightest) elevation.

“Use dark grey instead of black for the background to allow elevation and space in the environment with a wider range of depth.”  Andy Bellass – Indiespring Design Lead

You will need to spend time deciding on the most suitable contrast and transparency options to ensure it is comfortable for all users; including those with visual impairments. Apple have released some guidance on how to use these settings to provide a consistent user experience: https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/color-and-contrast/

Xcode 11 gives developers the tools to support dark mode in your apps. Developers are now able to quickly switch their designs and previews between modes in the Interface Builder and preview both modes in SwiftUI side-by-side. 

To conclude

Dark mode is a great opportunity to revisit both branding and accessibility while adding a feature which will fast become industry standard (Google are implementing dark mode in Android this year as well). We’ve often seen Apple introduce new, optional features one year and make them mandatory at the next WDCC so implementing the feature is also likely an exercise in future-proofing.

Here is our previous article covering all of the announcements made last month at WWDC (https://indiespring.com/pixel/wwdc-2019-roundup/)