Dark mode - dark blue instead of dark gray/black?

Question

My company’s app currently doesn’t have a dark mode and we’d like to support that. When I was reviewing my dark mode palette with my fellow designers, they weren’t so keen on using a dark gray background but instead proposed a dark blue (one of our brand colors is blue).

I was a bit taken aback, as I exclusively use dark mode on my phone and can’t recall an app that used anything other than black/dark gray for a background color.

Is there a usability/accessibility reason NOT to use dark blue instead of gray/black? Any good examples of a company using a dark color for their dark mode?

Answer 1

I have not seen any accessibility guidelines that would make a dark blue background noncompliant. I did come across a few articles that explain how dark mode or white text on black backgrounds can be more difficult for some people to see, specifically those with astigmatism. (See recommended reading, below.) So as long as your company is still maintaining light mode and allowing people to easily switch to dark mode if they prefer it, I think dark mode is generally fine.

I'm trying to recall real-world examples of dark blue dark mode, but there are a lot of designers going for a more hued background these days. Take a look at dribbble for inspiration.

The most important things to keep in mind are the accessibility rules for color. Maintain minimum contrast--3:1 for large text, interactive components, and charts; and 4.5:1 for small text. And I would probably advise going with a more neutral dark blue--something that is less saturated and not too bright like a gray-blue or blue-gray. Remember, a background should let the foreground shine. It shouldn't compete for attention.

Some recommended reading about dark mode:

Why ‘dark mode’ causes more accessibility issues than it solves

Dark UI themes are new and cool — but are they accessible?

Never Use White Text on a Black Background: Astygmatism and Conference Slides