21 October 2022 Reading time: 12 minutes

Maria Kolchanova

QA engineer

How the eyes work and what to consider when creating a dark theme for an application

ISPmanager

The dark theme is no longer just a design trend, but a rule of good manners. Take care of the user's comfort if you respect their wish to spend the night with your app instead of getting a good night's sleep.

Not everyone uses the dark theme, but once you go blind from a bright monitor and get glasses, you involuntarily go to the dark side. So how to approach its creation in a smart way? My name is Maria, I'm a QA engineer at ISPmanager and today I'm going to tell you how to design and test a dark theme with human physiology in mind.

A bit of physics

I'll try to talk less about the biology of the human eye, so as not to confuse you. If it is still important to you, the cones in the eye are responsible for color, while the rods – for brightness in the monochrome gradient view. You can read more about this in specialized articles. Here, however, I will describe only the most important points you need to understand when creating an application theme.

There are three types of vision: day vision, twilight vision, and night vision. Based on the names, you can correctly determine when one or the other is used. But don't assume that using your phone or computer at night automatically turns on your night vision. It only works in very low light, as negligible as one candle per hundred square meters, no more. When the power goes out in your neighborhood, your phone dies, and you try to get to the bathroom on a moonless night without stepping on a cat, that's when night vision comes into play. Our night vision is not able to distinguish colors at all - you need a bigger light source for that.

Did you know

As darkness falls, the spectrum of perception shifts from green to blue. This makes red objects appear darker than, for example, green objects. The blues, on the other hand, seem to be lighter, although in daylight the situation is the opposite. This is called the Purkinje effect. So, if you have frequent power outages, try to paint a ginger cat blue, then he will definitely be safe (not a call to action, don't hurt the kitties).

Back to the gadgets. Monitors and smartphone screens are themselves a source of light, and when we look at them in the dark, we use twilight vision. It works in a wide range of illumination - from a single candle in a field to a very impressive light source - ten candles near you.

Twilight is a very treacherous thing: on the one hand, the eyes can already distinguish colors, but on the other hand, there are still problems with visual acuity (it increases with higher brightness) and with light sensitivity (it, on the contrary, decreases). Even a small white object in the field of view can make a big difference in perception and switch your eyes closer to day vision. But still, based on the peculiarities of day and night vision, we can predict how the twilight vision will work.

Did you know that cold light, or so-called blue light, will give more illumination for twilight vision than warm light, for the same power consumption. So if you want to save money on table lamps, start choosing at 6400 K on the box. At the same time, food seems to taste better in warm yellow light, so you should choose 2700 K or less for the dining room. However, the eyes feel best in natural white light around 4200 K. This is ideal for the bathroom, closet, workplace, and any room where maximum clarity and accuracy of perception are needed. More about how to use light and color in the interior is studied in ergonomics.

The graph shows the sensitivity of vision under different light conditions.
Fig. 1. The graph shows the sensitivity of vision under different light conditions. The more the curve tends to the horizontal axis, the lower the luminous efficiency. This means that red (600 nm wavelength) in daytime vision has an efficiency of 400 lm/W and is well distinguishable, but in nighttime vision its efficiency falls below 200 lm/W. We will discuss below how to take this effect into account when designing the interface. You can refer to special articles to find out all the graph data is calculated Peak points for night and day vision were calculated a long time ago and are reflected in the graph

A little practice

Having finished with the physics, let's get down to saving our eyes from getting burned out as night falls. Let us consider several directions in which the UI of the night theme can move, but there is no universal recipe. Design is a delicate matter, and it depends a lot on the product. I will touch on two of the biggest aspects that are often overlooked.

Color

So, as darkness falls, the perceived color spectrum shifts from the peak of perception in the green range closer to blue. This does not mean that you must pull the spectrum back in order to perceive all colors as before. Neither does it mean you have to paint everything blue to make sure the user notices all the elements.

Let's talk about red, which falls out of perception at dusk. Because of the Purkinje effect, red "darkens" faster than the colors of the spectrum to its left, the luminous efficiency of monochromatic radiation becomes lower. As a result, it is more difficult to see the "lightness" of an object because of the different perception of the color wave. Blue, on the other hand, begins to look lighter than before.

Fig. 2. The ducks in the picture are originally one monochrome brightness in full light. But the less light, the harder it is to distinguish colors, and the red duck quickly darkens, although before it seemed the brightest
Fig. 2. The ducks in the picture are originally one monochrome brightness in full light. But the less light, the harder it is to distinguish colors, and the red duck quickly darkens, although before it seemed the brightest

On a light background, red is the maximum signaling color. That's why the most important signs are always highlighted in red: stop, wait, prohibition. If we're talking about the digital environment, these are usually bugs, signals, discounts, promotions – anything we want to draw attention to and say: "Look at me, I'm an important thing!" But if we think the same way while creating a dark theme, we can fall into a trap. When dark colors begin to prevail around you and the light decreases, red is the first to run into darkness and disappear from visibility.

Fig. 3. Let's look again at Figure 2 and at the new one. The color of the ducks and the lighting have not changed, only the background has changed from light to dark. On the light background, the red duck became barely visible only in the last frame, and now it disappears from the second frame. The blue one, on the other hand, looks brighter from the start, although the colors haven't changed. This is how our vision works, constantly adjusting to the context
Fig. 3. Let's look again at Figure 2 and at the new one. The color of the ducks and the lighting have not changed, only the background has changed from light to dark. On the light background, the red duck became barely visible only in the last frame, and now it disappears from the second frame. The blue one, on the other hand, looks brighter from the start, although the colors haven't changed. This is how our vision works, constantly adjusting to the context

It's hard to change the usual logic of using red in your head, but it may be necessary. Red is often harder to perceive in a dark context: it either begins to irritate the eye, or disappears, getting lost in the dark. There are cases where everything can be left as it is. But if doubts begin to creep in during the development, perhaps it is true to save the red for daylight hours.

Fig. 4. The bright colors to the left of red (see Fig. 1) stand out perfectly against the dark background. Even if the brightness decreases, they are not lost at the same rate

Did you know that the night mode in the phone looks yellow not at all because manufacturers are trying to make it easier to see new colors or shift the representation of the spectrum. It's all about one study that shows that blue light lowers melatonin levels. However, his credibility was later questioned, but that's another story. At the same time, the benefits of the night mode have never been proven. Some test subjects even got worse! So, if night mode doesn't work for you, you're not the one at fault. And you don't have to take your phone to the repair shop either, maybe it's just not made for you ¯\_(ツ)_/¯

Contrast

An important aspect of twilight and night vision is monochrome light sensitivity, which allows us to distinguish contrast. Monochrome vision has many incredible abilities: increased speed of reading information, advanced lateral vision, fast detection of the change from static to dynamic. Thanks to this, experienced drivers still know when the speed limit changes without looking at the road signs. Evolution has arranged it so that humans could both protect themselves in the dark and hunt in the light - hence the many differences between day and night vision. But there is a price to pay for great power: our monochrome vision is very fuzzy.

Depending on individual characteristics, some have worse monochrome vision, some have better. But in most cases, it is weaker than color vision. Your eyesight gets worse after sundown not because you've been sitting at your computer too long. It's just that evolution has not completely reconstructed the human body, and it is still not used to artificial light.

So how do you work with this before nature releases a bugfix? This is easier than with colors. Let's look at the pros first: the dark theme obviously has more room for playing with halftones. Items that needed at least 10-20% difference in the light theme for contrast would need only 5-10% in the dark theme. After all, at dusk, the eyes are better able to distinguish black from almost black, and it appears quite realistic to divide wet asphalt into shades depending on how long it has been raining.

Fig. 5. In the first and second columns, the step with which the shades change is the same. However, the text in the left column is lost faster than the text in the right column. This makes it even easier and faster to find text in the right column, especially if the light context does not interfere. Try closing the view with your hands, leaving a small window only for the right column, the less light around - the more visible the text should become
Fig. 5. In the first and second columns, the step with which the shades change is the same. However, the text in the left column is lost faster than the text in the right column. This makes it even easier and faster to find text in the right column, especially if the light context does not interfere. Try closing the view with your hands, leaving a small window only for the right column, the less light around - the more visible the text should become

The disadvantage of monochrome vision is the very low clarity at night. At this hour, everything is already blurry in front of my eyes because of fatigue, and the color vision refuses to help and process the transitions of gradients. This causes even more blurring and irritation. Whereas it is appropriate in a light theme to use shadows in blocks and buttons, in the dark theme it is better to use the stroke, hard transitions, and even a change of color or shade.

Fig. 6. Blocks that looked appropriate in the light layout (first column) lost clarity in the dark because of the shadow (second column). If you look at such a layout at night, concentrating on the borders will be difficult. This means that readability will be lost, and it may be more difficult to hit the element the first time. Instead, it is worth resorting to the solutions from the third column of buttons: even a faint stroke will highlight the block in a dark theme (first line), as will a slight change in hue (second line), or a combination of these methods (last line)
Fig. 6. Blocks that looked appropriate in the light layout (first column) lost clarity in the dark because of the shadow (second column). If you look at such a layout at night, concentrating on the borders will be difficult. This means that readability will be lost, and it may be more difficult to hit the element the first time. Instead, it is worth resorting to the solutions from the third column of buttons: even a faint stroke will highlight the block in a dark theme (first line), as will a slight change in hue (second line), or a combination of these methods (last line)

To summarize, I will note how to use a combination of pluses and minuses of contrast for the dark theme. Because of increased light sensitivity and decreased sharpness of vision, the use of thin lines with high contrast can cause ripples. Thus, black text on a white background is familiar to us, but a completely white text on a black background is irritating: the eyes well perceive the halftones but cannot give the proper clarity. The same goes for the strokes or dividers - here you should not neglect testing the UX/UI before releasing the product at least internally. Different perception and feedback will help find that balance when the element and information is already visible, but they are not yet annoying.

Did you know

Light sensitivity is exactly what makes us go blind when we abruptly change from day to night vision and vice versa. Although twilight vision is intermediate between the two eye modes, it does not adjust instantly. It is easier for the eyes to "reset" than to make smooth transitions from one light receptor to another. Therefore, after night vision, any light seems strong. Conversely, if the lights are turned off, we won't see anything for a while until our eyes adjust to the new mode. This perception pit must also be considered when designing the interface. If your night theme has a white screen or a large light block somewhere when switching sections, this will blind the user and cause a negative reaction.

Testing a dark theme

You can test your creative solutions with a dark theme not only on your colleagues. There are quite engineering methods that work without the human factor.

The first tool to check color and contrast is the WCAG standard, which is a guide to making web content accessible. You can, of course, go and check manually with each item of this huge guideline, but it is useful to know automated tools, such as the“Accessibility support" in Firefox or similar extensions in other browsers. They can be used to simulate perceptual features. In particular, the simulation mode of achromatopsia (no color perception) and contrast loss (chicken blindness) is useful for checking the dark subject. The first mode will tell you if there are any places where colors from different scales merge, being next to or on top of each other. The second is whether the product relies too much on light sensitivity, because depending on external light sources and the monitor itself, the perceived contrast can be different. Firefox also allows you to automatically run through problems all over the page and see why an element fails the check.

Simulating real night vision is not so easy
Fig. 7. Simulating real night vision is not so easy. It is worth distinguishing between different mechanisms for producing a black and white image. The main methods are (from left to right): saturation displacement, gradient overlay, and Purkinje shift. The latter is the closest to the truth, but it is the hardest to recreate: you have to manually build the right curve for all the shades. In addition, it makes no sense: after all, we can't see the digital image in our night vision - if the source is lit, twilight vision is activated. And it is also important not to confuse saturation displacement and gradient overlay (first and second image). Saturation deceives and gives misconceptions about monochrome vision, so it is better to use the second method. Many devices and browsers will use it when they enable monochrome imitation (for example, Firefox or monochrome mode on Apple devices)

You can use the webaim.org website to manually check a specific pair of colors. The WCAG standard for AAA images (the best quality, everyone will see) requires this contrast: for plain text - at least 7:1, for large text - 4.5:1, for graphic elements - 3:1. If you limit yourself to AA quality level (people with vision problems may not see it), it is better not to disregard the contrast spread of 4.5 ~ 3. For the dark theme, however, borderline options are often enough, because the perception of contrast in twilight vision increases.

It is worth noting that Google Chrome changes the colors of the website depending on the device, automatically bringing the contrast closer to the standard. This add-on can be turned off to see real colors. But most importantly, it must be taken into account when creating the design - what the developer sees in the browser is not always the same as what the user will see. The addon can be turned off at the hardware level via the device theme and in the browser itself. In addition, not everyone has a browser from the Chromium family as the main browser, which means it is better to avoid unnecessary add-ons for monitors and browsers when creating and checking colors. The cruder the check during development, the clearer the result, because then it will be easier to start from specific numerical values when checking.

Another important tool of verification, no matter how trivial, is empirical. Wait until evening, turn off the lights in the room, move all light objects away from the screen, turn off unnecessary monitors, pour yourself a black coffee without milk. Let your eyes go into night mode and start watching. If you constantly test a dark theme during the day and in a bright open space sipping latte, you're bound to miss something. If you don't believe me, turn on the dark theme in any app and dig into it while lying in bed before you go to sleep. And then open that same app outside during the day. The dark theme is almost impossible to see in sunlight. Context is important: distractions around you, constant switching to light interfaces, a lamp shining in your eyes, or panoramic windows looking out into the daytime sky will not let you accurately test a dark theme. Modern problems require good old-fashioned solutions: do not neglect the obvious methods.

A little lyricism

The dark theme is certainly a subtle matter, and, like all creativity, it is judged subjectively. Surely you readers have your favorite dark topics and your completely losing ones. Share them in the comments! It will be interesting to hear and discuss why something looks good and something loses interactivity. Surely there will also be radically opposed opinions about the same solutions.

I'll speak for myself: I like the way the dark Visual Studio Code and Discord themes look - the transitions and accents are presented intelligently. Buttons are visible, and long work with applications does not cause fatigue.

Fig. 8. Microsoft team is also sharing a guide for Visual Studio Code in the Figma community and on Github to create addons
Fig. 8. Microsoft team is also sharing a guide for Visual Studio Code in the Figma community and on Github to create addons
Fig. 9. Discord UI Kit, assembled by the community, shows the main elements of the application interface and their colors
Fig. 9. Discord UI Kit, assembled by the community, shows the main elements of the application interface and their colors

But the dark Windows theme hurts the eye, especially in the settings section: for some reason they use too harsh a contrast of black and white, and it's too hard to look at it for a long time. And my personal pain: I'm writing this article on Google Docs, which has no dark theme at all, and it's very sad.

Fig. 10. For some reason, Windows 10 decided to use white text on a black background. It is very tiring...
Fig. 10. For some reason, Windows 10 decided to use white text on a black background. It is very tiring...

And finally, a little bit about us. Soon we will launch a dark theme in ISPmanager. Stay tuned to find out how we've accomplished this over-the-top task.

Take care of your eyesight, remember to blink more often, take breaks, use eye drops if you have to, wear glasses with filters if the doctor prescribed. And most importantly, sleep more, ladies and gentlemen! You have tens of millions of light receptors, but only two eyes.

P. S. This article usesthe duck model by XcinnaY.