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...
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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.
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.
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.
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)
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
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:
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 ).
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.
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.
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.