Dark Mode background color contrast

[jurgen85]

Since you’re going all out with Liquid Glass, I’ll attempt to sneak in a pet peeve through the back door: dark mode background contrast.

As a start, the iOS accessibility setting “Increase Contrast” in dark mode currently has the opposite effect, making the gray background even brighter.

Naturally things get weird with the popup/submenu visual hierarchy tint, but for reference, let’s look at what background color Apple uses in the workhorse views of their default apps that feature some amounts of body text or lists:

• Books - black
• Preview - black
• Notes - black
• Podcasts - black
• Reminders - black
• Tips - black
• Files - black
• Voice Memos - black
• App Store - black (gray only in the Today section)
• Settings - gray for short+big menu items, black for long+small explanations
• Mail - (blinding!) gray, I would guess a compromise to better support emails with rich layouts and transparent images that assume a bright background

Of course, I can afford the luxury of not actually caring about Apple’s guidelines, even if I happen to agree with them here. My actual concern is accessibility, clarity and battery life. But if the Devil can read the Bible, then I can read Apple’s human interface guidelines.

I will stress that you don’t need to be visually impaired to benefit from higher contrast. Ability is a spectrum, e.g. everyone with glasses has the correction curves tailored to their particular need. Some even manage without glasses, even if it causes them chronic headaches. An accessibility feature that is a nonnegotiable requirement for some, can still be helpful for those who can manage without it (as is the case with many accessibility accomodations). Would anyone print a book on gray paper or with gray ink?

But all that aside: if maximum Liquid Glass compliance is important to you, I think you should follow Apple’s example and use black as the background color for body text and lists in dark mode.

Higher contrast also means there is more room to use for color highlighting, notably tone colors. I also find e.g. the gray Chinese glosses in Oxford especially hard to read.

I hope this doesn’t read as angry. I only wanted to use all the ammunition available against this pet peeve. Thanks for making the best dictionary app!

 

[mikelove]

Sorry, but we do use black as the background color for lists now, and in the document reader, and in flashcards; the only place we don't do it is in the definition screen, because those adopt the same gray background rounded rectangle 'grouped' style Apple uses in settings screens and other UI with complex list groupings; the gray helps visually separate different sections of the screen. The gray gets brighter in that screen with 'increase contrast' because that's what Apple does.

That being said, we already offer a 'compact layout' option for that screen that uses a flat instead of a grouped UI, so upon reflection it would probably make sense for that to also adopt black text backgrounds / grey headers, as Apple does; would that address your concerns?

(we have also already boosted the contrast in the reader bubble, but that was motivated by the more obvious problem that it vanished against a light image or uninverted PDF)

 

[jurgen85]

That being said, we already offer a 'compact layout' option for that screen that uses a flat instead of a grouped UI, so upon reflection it would probably make sense for that to also adopt black text backgrounds / grey headers, as Apple does; would that address your concerns?

That sounds good to me!

I suppose the bright compact mode would also benefit from gray headers.

But then, could that not be extended to the non-compact mode as well? White text on a black section background on a gray back-background? That way you would keep the clear section distinction. (The headword and section slider section could be recolored as well for clarity.)

I confess I only skimmed those Apple human interface guidelines… But I think the definitions would be a distinct enough kind of data from e.g. a Settings app interactable menu item that you could be more flexible in how you implement them? Surely they have some exceptions for the main meat and potatoes content of an app?

 

[mikelove]

I mean it's not so much about allowed exceptions as it is about having this be familiar to people; lots of other places on iOS handle this sort of layout this way, including the Settings and Mail apps. The biggest benefit to using system UI instead of your own weird custom thing is that people don't need to re-learn how stuff works.

Going all black in compact mode is consistent with Apple's designs in other places, so that's an easy change to justify, but doing it in the regular mode would be a break with their design, so I'd have to weigh that more carefully.