{ Passion for code }

© Blog Ailon Webs

Dark mode and light mode. Which is better?

By M. Soutto

dark mode and light mode
Dark mode and light mode. Which is better?

The use of dark mode is increasingly being promoted on the screens of our devices. But have you ever wondered which one is better for your eyes? Or which one improves your performance? Or even which one is right for your device's screen?. To answer these questions we will take a look at what we know to date in order to decide what is best.

NEW Don't miss: Dark mode and light mode. Website design developed by Ailon Webs.

What is dark mode and light mode?

Dark mode or night theme is a way to display the screen of your device (mobile phones, computers, etc.) with white text and a dark background (almost black).

And light mode, is the opposite, you see the screen with dark text and a light background.

Comparison between dark mode and light mode
Dark mode Light mode
Background color almost black white
Text color white black
Environment lighting limited very high

How do your surroundings influence the visualization in one way or another?

Various factors can cause influence, factors that depend on our own vision, the environment in which they use the screens of the devices, the user interfaces (UI), etc. Therefore, we must review some concepts so that we understand them fully and how they interact with each other.

The screens of the devices that we currently use for many hours, whether for work, for entertainment or both, can cause eye strain. For this reason, it is recommended that the colors of the surroundings (colors of the walls, furniture, etc.) where we use the screen have muted tones, that is, pastel colors, or matte colors without glare.

Get your offer lift-off website design

Order your
Lift-off Website

for 330 €

The screens

At the beginning of computing, there were screens with a dark background and white or even bright green text, they were other times and another screen technology, with large differences in contrast.

Today, there are many types and sizes of device screens, on mobile phones, tablets, desktop computers, laptops, etc., all of them support a wide range of colors and with a very good quality.

The contrast polarity of the screens is another possible cause of eyestrain. This concept of contrast polarity is used to describe the contrast between the text and the background (shown in the image below). Contrast polarity can be:

  • Positive: screen with dark text on light background or light mode.
  • Negative: screen with light text on dark background or dark mode.
Positive and negative contrast polarity on screens
Positive and negative contrast polarity on screens, see the contrast between the text and the background.

Pros and cons of contrast polarity:

  • Positive:
    • Reflections are less noticeable.
    • The edges of text characters are displayed more clearly.
    • It is easier to achieve luminance balance.
  • Negative:
    • Flickering is more noticeable.
    • In people with lower visual acuity, it improves readability.
    • Perception that characters are larger.

Eye sensitivity

The first monochrome screens had a dark, unlit background and the characters emitted light (white or bright green), which created a luminous halo around the characters. This produced a lot of visual fatigue, remember that it is the occipital lobe of our brain that really sees, and on these monochrome screens, it had a lot of work transforming diffuse contour images (optically speaking) into sharp images in real time. Our brains do this great work, but this makes it tired.

Nowadays we do not have this problem, screens have greater chromatic precision.

Dark mode and light mode. Which is better?
Dark mode and light mode. Which is better?

Which is better dark mode or light mode?

It is us, the users, who decide how to customize the screen of our devices, we look for the one that is most comfortable for our vision and that allows us to focus on the content. But now that dark mode is in vogue, I think it's a good time to weigh which one is more beneficial or which is appropriate according to the situation, environment, or our eyes and what is better for our eyes and for our performance?

In light mode, we already know that color white reflects all the wavelengths of the visible light spectrum, this makes the pupil not need to dilate to let in more light. This makes it easier for the human eye to read more comfortably if the text is black on a white background, and it also favors better understanding and retention of what is read. The constricted pupil has to work less to focus the text.

In contrast, dark mode causes the pupil to dilate to let in more light. This is why, many people find dark mode more comfortable when there is little light in the environment, but it is not always recommended to use it. By nature the human eye can see very well during the day and not so well at night, the best contrast for the eye is dark text on a light background.

Sensitivity of the eye as a function of light

One of the advantages of using dark mode is that it can extend battery life, if our device uses it, as when we use it our screen emits less light than when we use it in light mode.

The amount of light that surrounds us in our environment can influence energy consumption and our perception. This has a direct relationship with the anatomical structure of our eyes, specifically with the pupil and how it reacts to the amount of light in the environment.

The pupil of the human eye is where the light enters to our retina and its diameter varies according to the amount of light it receives. It is the iris that adapts the diameter of the pupil according to the amount of light it receives, if a lot of light arrives it contracts so that the retina is not damaged and if little light arrives it dilates to obtain a sharp image.

This is how the diameter of the pupil varies depending on the light it receives:

  • Lots of light (luminosity) → decreases the diameter of the pupil (miosis)
  • Little light (penumbra) → increases the diameter of the pupil (mydriasis)

When the pupil has a small diameter, the effort to focus the text decreases and thereby reduces visual fatigue.

Photo cameras work in the same way, the aperture angle (f) of the lense (would be the diameter of the pupil of the eye), if I use a small aperture f/22, it increases the sharpness and the focus area is large.

And if the aperture angle (f) has a large aperture for example f/3, the focus area is small and what is not in focus is blurred.

A high percentage of people have astigmatism, this causes blurred vision as one or both eyes have an irregular shape. If you have astigmatism, you will have difficulty reading light texts on dark backgrounds; light levels are partly to blame, for this reason with a bright screen (white background) the pupil reduces its diameter in order to reduce the effect of the deformed lens caused by the irregular shape of the eyeball; then, with a dark screen (black background), the pupil dilates to receive more light and consequently gets a blurred vision.

As we age we become more susceptible to glare, as the pupil decreases in diameter. And as we have explained, by decreasing the diameter of the pupil, less light enters the eye. For this reason, in an environment with little light, at night for example, vision is diminished.

And in web design?

Web page designs that use dark mode in recent years have perhaps become more popular so that the user has a different experience than the classic trend of more traditional white of recent years.

Many websites use dark mode to attract customers, and there are surveys that indicate that it is preferred by many users, especially those who use social networks. It is possible that the influence to use dark theme is caused by: it has been used by large technology companies that develop the devices we use and now make it possible for their users to switch to dark mode; programmers and also experts who design UI use applications with dark mode and are influenced when developing websites, so this gets reflected in their work; or, for the simple fact of having a change, spending many hours reading in light mode, going to dark mode is like changing something; and when you need to reduce battery usage.

Although the dark mode, as we discussed earlier, produces the dilation of the pupil, which implies a greater effort to focus and visual fatigue. However, dark mode is preferred, when the environment of the device we use has low light conditions and does not involve reading a large amount of text.

Dark mode website designs are very popular these days, so we shouldn't rule it out for a future web project. The developers of Ailon Webs believe that there has to be a balance, which is why we have designed websites for an online store with both modes. If you are interested, below we detail websites designed by us for online stores in dark mode or in light mode. You can choose yours according to your tastes and always making sure that it makes the products of your online store stand out.

Dark mode:

Light mode:

Conclusions

It seems that when optics and medicine tell us otherwise, it is the dark mode that has become popular among users of the devices. Perhaps the perception of change influences more than the idiosyncrasy of our vision system.

Regarding the design of websites, we must differentiate how long we are using our devices to assess whether one mode is better than another, as it is not the same to spend several hours using dark mode in an application with the consequent visual fatigue, compared to viewing a web design for a few minutes. Therefore, we should not rule out dark mode for website design, as black "increases the perception of the value of design, suggesting authority and superiority." But white used in minimalist designs "increases the perception of the value of the design, honesty and goodness. It transmits a clean design, therefore, it increases the perception of value in products".

We have learned that when the pupil receives a lot of light, its pupil diameter is small and as a result reduces the effort of the eye to focus text and therefore reduces visual fatigue. The human eye sees very well in daylight but not so well at night, so the best contrast for the eye would be the light mode (dark text on a light background). If you have astigmatism it is very likely that you will feel better using light mode. In the long term, reading in light mode on computer screens, mobile phones, tablets, etc., seems to be associated with suffering from myopia or increasing it if you already have it.

Dark mode can make your device's battery last longer (if it has one), it can be more relaxed to use at night when there is little light in the environment. Many devices already have a third option which is automatic mode, the system detects the surrounding light and gradually changes the mode.

Dark mode vs. light mode. Which is better?. Most people see better in light mode, but some can see better in dark mode. Think that if our eye muscles have to make a greater effort when reading, it causes us greater visual fatigue. This is why, the best option is that if you do not feel comfortable using one or another, do not force your eyes to do so, take care of them, they are unique!

Legend

  • UI = User interface. It is the medium with which a user interacts with a device, machine, computer, mobile, etc..
  • UX = User eXperience. In web design it is what the user perceives when using a website.

Receive our promotions

Please input a valid email
Please read and accept the data protection checkbox

Categories: Web page design.

Tags: UX, UI, technology