2

I am creating a webpage that deals with toggle dark mode. I am not sure if I should avoid using complete black background color for dark mode. If not, what color should I actually impelement my dark theme.

CAN I USE MEDIUM OR GENTLE FROM THESE...

can I use either medium or gentle

1
  • 2
    What is your concern with complete black? It seems to be too be more a matter of taste than of usability or ease of use.
    – Nash
    Sep 9, 2021 at 7:12

5 Answers 5

6

Yes, you can. Dark mode implies the use of very dark hues, just not necessarily pure black. The emphasis in dark mode is on contrast. So as long as you have enough contrast, you will OK.

However...

If you consider Apple HIG guidelines for Dark Mode, they say the following:

Prefer the system background colors. Dark Mode is dynamic, which means that the background color automatically changes from base to elevated when an interface is in the foreground, such as a popover or modal sheet. The system also uses the elevated background color to provide visual separation between apps in a multitasking environment and between windows in a multiple-window context. Using a custom background color can make it harder for people to perceive these system-provided visual distinctions.

From Apple HIG Visual Design / Dark Mode

They also have a color section where they explain the differences between apparently similar colors, including Default and Accessible versions. That page also explains how to use different background colors, as well as other useful information.

Android Guidelines

In the meantime, Android recommends dark gray rather than black. This makes a lot of sense, because Material relies on elevation as an information system, and pure black makes it difficult to perceive height

enter image description here

That being said, I highly recommend reading the entire Material Design dark mode page as it contains very insightful information on many different elements of a user interface, including, of course, how to use color and how to create different background shades by applying percentages of white (see sample image below)

enter image description here

Examples

These examples below are from very common apps most people use every day. You'll notice that none of them use pure black, which I think answers your question

Chrome Dark Mode

enter image description here

Firefox Dark Mode

enter image description here

Facebook Dark Mode

enter image description here

Twitter Dark Mode

enter image description here

1
  • Note: pure black on OLED screens actually saves energy (the pixels are turned off, while on LCD screens they're still lit) so that could be considered for the lowest layer (as shown in the Material guidelines) and then use the other greys for elevated levels.
    – Luciano
    Sep 14, 2021 at 9:45
1

Common practice says pure black color provides a higher contrast ratio (in comparison with gray), and that contrast can be painful to look at.

I recommend conducting user testing:

  1. Identify the most common user flow (task)
  2. Prepare 3 prototypes of that flow (Enhanced, Medium, Gentle)
  3. Let users go through that
  4. Measure Completion rate and time to accomplish the task.

Useful links:

  1. Google material. Dark theme

  2. Designing for dark mode: 7 tips to help you do it well

  3. 8 Tips for Dark Theme Design

4
  • if I have to choose only one of them which one of them would be the best choice as per General client requirements Sep 11, 2021 at 3:30
  • @YashChitroda I guess it would be Medium as a most common variation of dark theme. Sep 13, 2021 at 6:29
  • can I select gentle over medium?? Sep 13, 2021 at 6:46
  • Yes, you can. But please test this decision :) Sep 13, 2021 at 7:12
1

You should avoid using pure black as a background as it is known that high contrast will strain users' eyes. This also goes for very saturated colors placed on a dark background.

For example, Google Material says: "You should use a contrast level of at least 15.8:1 between text and the background. " "To create branded dark surfaces, overlay the primary brand color at a low opacity over the recommended dark theme surface color (#121212). "

But most important, these are readability concerns and they should be addressed primarily if your website is content-heavy and your goal is to offer your users a pleasant way of reading. If your website is more into the art form then you can be less cautious of the contrasts ( but not completely cautiousless ).

2
  • if you have to choose any one of three i.e ENHANCED, MEDIUM & GENTLE what would be your choice?? Sep 13, 2021 at 6:44
  • Clearly the Medium one. The enhanced version also passses the contrast checker on webaim but it can clearly cause eye strain especially if read at night.
    – Chris
    Sep 13, 2021 at 7:05
1

Remember the effect of black on OLED screens, especially when used in complete darkness. True black subjectively looks better, as it produces no light.

If you’re doing animation, prefer dark gray due to possible smearing.

Note that neither contrast nor battery consumption are significant enough to choose between true black and very dark gray.

1
  • On battery consumption: apparently it can save a bunch of energy in OLED screen devices zdnet.com/article/…
    – Luciano
    Sep 14, 2021 at 9:53
0
+50

Dark mode is used for User Interface (UI) purpose, and it Enhance the User Experience too. According to the stats provided on Internet you should use Enhanced Mode in your website. Because it will improve the UX and the user's will feel ease and less eye strain. On the other hand If you use Medium Mode it has small proportion of Grey color which is useful too and the other mode which is Gentle it contains Grey color and which is Not Dark mode and not Recommended.

Higher elevation, lighter surface

Higher elevation, lighter surface

In dark themes built with Material, elevated surfaces and components are colored using overlays. The higher a surface’s elevation, the lighter that surface becomes

The more elevated the surface is, the stronger and brighter the overlay becomes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.