Which color should we use for background in Dark Mode?

Question

Created Jun ’20

Replies 1

Boosts 0

Views 6.3k

Participants 2

Which color should we use for background under white text in Dark Mode?

Some users like light mode better than Dark Mode because their eyes are tired from dazzling white text on black background.

According to my sources,

UIColor.systemBackground is usually #000000 and UIColor.label is #FFFFFF on Dark Mode.
- However Apple's application (e.g. Note.app, Messages.app) don't use #000000 background with text.
material.io advises to use #121212 for dark theme.
Twitter's Dim theme uses #FFFFFF text on #15202B background.
Twitter's Lights out theme uses #D9D9D9 text on #000000 background.

I know text should have a contrast ratio of at least 4.5:1 (or 7:1), but I haven't heard about "at most".

Does anyone know such guideline?
Should I use UIColor.secondarySystemBackground with UIColor.label ?

Thank you.

Boost

Answer 1

Apple Designer OP

Apple

Jun ’20

Generally you should match the system colors if you don't want to customize a color for every configuration (light/dark mode, normal/high contrast, presenting in a sheet, color space, etc). Additionally, UIColor.secondarySystemBackground has semantic meaning, you'll see that it has a different appearance in light and dark mode because it's meant to be presented "over" UIColor.systemBackground — so if your app uses the secondary system background color on an iPad in dark mode instead of the system background color and another app is presented in slide over, it may be challenging to see the boundaries of the apps.

You can either continue to use the system standard background, which is recommended and gets you a lot of system conformance for free (including Mac Catalyst ✨), or create your own color and scheme by following whichever principals work for your app. Just make sure you test it out in as many configurations as possible!

3