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...
-
2What is your concern with complete black? It seems to be too be more a matter of taste than of usability or ease of use.– NashCommented Sep 9, 2021 at 7:12
Add a comment
|
5 Answers
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
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)
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
Firefox Dark Mode
Facebook Dark Mode
Twitter Dark Mode
-
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.– LucianoCommented Sep 14, 2021 at 9:45
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:
- Identify the most common user flow (task)
- Prepare 3 prototypes of that flow (Enhanced, Medium, Gentle)
- Let users go through that
- Measure Completion rate and time to accomplish the task.
Useful links:
-
if I have to choose only one of them which one of them would be the best choice as per General client requirements Commented Sep 11, 2021 at 3:30
-
@YashChitroda I guess it would be Medium as a most common variation of dark theme.– Roman WeCommented Sep 13, 2021 at 6:29
-
-
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 ).
-
if you have to choose any one of three i.e ENHANCED, MEDIUM & GENTLE what would be your choice?? Commented 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.– ChrisCommented Sep 13, 2021 at 7:05
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.
-
On battery consumption: apparently it can save a bunch of energy in OLED screen devices zdnet.com/article/…– LucianoCommented Sep 14, 2021 at 9:53
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
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.
