A Better Reading Experience with iOS Dark Mode

With the launch of iOS 13, Apple introduced dark mode as a new native functionality for iOS Apps. As one of the most requested features from our readers, we launched native dark mode in our iOS apps in December 2019. Dark mode has many benefits including significant power (battery) savings and an enhanced reading experience in low-light conditions.

Commencing work in the summer of 2019, the team spent an entire quarter diligently working through every aspect of our iPhone and iPad apps to ensure a comprehensive and polished implementation. It is worth noting that WSJ was one of the first news organizations to offer dark mode natively, and was joined by only a handful of other popular apps including Slack, Instagram and Twitter. The new release of our app was also featured by Apple, and since launch over 30% of our app views are with dark mode activated.

Adapting our Color Palette

When it came to our color palette, we determined that it was important that we remain consistent as possible with our standard color palette, and to only introduce new colors where absolutely necessary. This was done to both provide a consistent experience for our readers and to minimize the complexity of our design system. In many cases we were able to leverage existing colors in the palette, and map an equivalent color in dark mode.

There were however instances where new colors were required specifically for dark mode. Examples of these are lighter variations of our blue, gold, green and red. It was necessary to introduce these to maintain our high level of readability and meet AA accessibility standards.

Accessibility

One of our primary objectives for dark mode was to make our apps more accessible and to increase the readability of our content. Using a ‘light mode’ app in low-light conditions can be too bright and cause strain on the eyes. By implementing dark mode we can provide immediate relief for the reader and greatly reduce fatigue.

In addition to mapping our color palette, we also introduced many small adjustments to further the user’s experience and to meet our stringent accessibility standards. An example of this is introducing a light grey (#F4F4F4) instead of pure white (#FFFFFF). While this is mostly indistinguishable to the user, it provides a noticeably softer and more comfortable reading experience.

Selecting these colors and adding this level of nuance to our apps required a lot of trial and error. As color renders differently on desktop screens, and different iOS devices, we spent a significant amount of time testing, evaluation and refining to ensure the best possible result for the largest number of readers.

Implementing dark mode was a huge undertaking, and touched on almost every aspect of our apps. It was a highly collaborative effort, and we believe the results speak for themselves. The highly positive feedback we have received from our readers is not only rewarding but validates our significant investment in this feature. We hope you enjoy reading the Journal in dark mode!

This article was first published on design.wsj.com by Lee Yon on April 10,2020.