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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.