Light Mode vs. Dark Mode: do we need more modes?

Today, I'm diving into something many designers miss because they're all about the "cool" factor: modes. We all know Light and Dark modes, every app we use daily either has Light/Dark Modes or just sticks to one mode. But which one's the best? What's best for the user? What's accessible and what's not? Let's check it out together.

Source

What is a mode?

Here's a definition of what modes are:

Modes in the context of digital design refer to various display configurations that a website or app can adapt to enhance user experience. These configurations can include dark mode, which reduces eye strain in low light conditions; color-blind mode to assist users with color vision deficiencies; or a reading mode that strips away distracting elements for focused content consumption. Modes recognize the diversity of user needs and preferences, allowing for a more personalized interaction with digital content.

source

Modes aren’t just about what looks good, like someone liking white while another prefers black. Modes are all about meeting the specific needs of the end user, so it's about choosing the mode that fits them best and feels most comfortable.

How many eye diseases do you know?

Considering that the modes are tailored to address different accessibility requirements based on users' visual conditions, it's interesting to see how individual eye diseases may necessitate distinct modes to ensure a comfortable experience.

For instance, Cataracts, a clouding of the lens in the eye, can cause vision to appear blurry and increase glare from light sources. Glaucoma, another prevalent condition, damages the optic nerve, often leading to peripheral vision loss. Age-related Macular Degeneration (AMD) primarily affects central vision, making it difficult to see fine details. Diabetic Retinopathy, common among people with diabetes, can cause blood vessels to leak or proliferate on the retina, distorting vision. Modes can be tailored to alleviate strain and improve clarity for users suffering from these conditions, with features like high contrast and text magnification providing significant relief.

Source

Some eye conditions can make reading challenging due to high color contrast, while others may struggle with low contrast. Some individuals might not find dark mode to provide enough light for comfortable reading, whereas light mode could be too glaring.

Source

There isn't a definitive better mode because vision is highly subjective and influenced by factors such as ambient light, screen quality, time of day, screen time, and visual fatigue based on eye health. It's a multifaceted issue, and neither mode alone can cater to all potential scenarios.

When Design Decisions Miss the Mark

Picking the right mode is often tricky due to some basic design mistakes.

Sometimes, it’s not just about picking a mode, but more about how design choices like contrast, spacing, font size, and weight can make content tricky to read for some folks. Plus, it really depends on what device people are using.

For instance, the average distance from the screen of a computer differs from that of a phone. Additionally, on a phone, the user's zoom control varies due to gestures, unlike on a computer.

In OLED screens, light behaves differently. Without proper color settings, it could be dimmed by surrounding light. OLED turns off some pixels when the interface displays absolute black, reducing light bleed.

Some screens are calibrated properly while others are not. If a user has a screen that's not calibrated optimally, they might not see certain shades of gray with slight variations. The color range is less wider; ultimately, a high-end screen offers a different viewing experience compared to an entry-level consumer screen.

Opting for a different mode can help end users correct some unhappy decisions made by designers and developers, like choosing an already unreadable typeface and applying an ultra-light font with low gray contrast just because it's "cool."

How about we offer more than 2 modes?

In my experience, even top teams can struggle to provide 2 modes across a wide range of products they're handling. That's why you might sometimes only see one mode. Offering more modes isn't always possible due to technical and resource limitations, plus the time and effort the team needs to focus elsewhere.

With that in mind, let's get to the point. Why do we only offer two modes when we know they don't cover all accessibility issues?

Source

We've decided to focus mainly on two modes for a few reasons. First off, most visually impaired people use either a screen reader or a high-contrast browser to get around online, according to the stats. Plus, these modes are key according to most accessibility guidelines. By offering tips on optimizing these modes, we can really improve how users with visual impairments access content.

Having too many modes can make it tricky to keep settings right for each new piece of content. But with design tokens, designers and developers can easily add more modes, letting users tweak their site or app experience beyond just light and dark modes and system settings.

Another thing to keep in mind is that when design is fully accessible with spot-on color contrast, it tackles more accessibility issues than any modes can. So, teams tend to aim for perfectly accessible designs for products used by sensitive users, rather than offering modes that aren't fully optimized or reviewed.

Customizable Viewing Modes

A great way to improve user experience is by adopting a more customizable UI with settings that can be applied across all apps and websites users visit.

Here's how it works: users adjust the display options on their computer or device according to their preferences or eye conditions. Websites and apps then use common design tokens applied to elements like background, text, buttons, etc.

As a result, when users visit a site, they find the UI tailored to their visual needs. While Light and Dark modes are cool options, this third mode is all about personalizing the experience based on individual settings.

Source

The website or app provides three modes: Light and Dark, both of which need to be accessible and meet WCAG (Web Content Accessibility Guidelines) principles, and the third one that is fully customizable.

Sticking to these guidelines helps designers ensure users can pick the mode that suits their visual needs, making the digital space more inclusive. Apps and websites should also regularly check their accessibility modes against these standards to maintain compliance and usability.

The third mode takes into account user settings like font size, body, headings, color, contrast, spacing, and more. It's like an API where users set their preferences, and the site or app adapts accordingly. This mode is the go-to for those with visual impairments or sensitivities who can't use Light and Dark modes.

Offering an easy-to-adjust display option can enhance users' experience and satisfaction with the app or website. When users have control over their visual settings, they feel more included and catered to, leading to a better overall experience.