One of the key points that gets brought up from time to time when speaking about design is the concept of user experience psychology. I spend a lot of time working on user experience on my website and the websites I host - it's one of the most interesting and enjoyable things about web technology. I learned a lot of this from developing software in my teens but also from being a UX designer. Despite this, people tell me UX is a boring yet vital part of digital design. Well, I'm afraid I have to disagree!
Of the user experience domain, one key area that always pokes out is that of colour theory. For those who know how colour works in the human brain, it makes sense that colour is pivotal in developing any digital product. Colour choice is normally one of the first things that is considered in the development of a brand. Despite this, a lot of what colour theory tells us is often lost in darker designs.
Yes, it's true that dark designs are meant to be, well, dark but that also defies the ideas and thought process behind the concept of colour to engage a user and I say this because a dark website needs to lack colours. This is part of the idea of a dark website. If you are limited to greys and blacks mixed with a few shades of red, green and blue because of a dark theme, colour theory might as well just be ignored.
There are four major areas in which I see websites using dark mode as having issues:
- Contrast and separation
- Readability
- Accessibility
- Creativity
Contrast and separation
As the world moved from skeuomorphic designs to a much flatter design, contrast and separation of elements is mostly done with strong use of colours, including backgrounds and borders.
For flat designs, that is designs that use non-skeuomorphic design patterns, dark designs raise an issue. The idea of distilling all colours to a bunch of greys and blacks means that the contrast between elements is much lower. Flat designs focus on separation by colour almost all of the time. This is why it's quite difficult to make a grey website using a flat design layout, the contrast isn't quite there. It's true that images and other forms of media can assist in separation between discrete elements with a flat design, but ultimately, the issue is plain obvious in dark mode.
Highlighting something key or separate from another element is limited to a bunch of different shades of black or grey and maybe some dark blues. Igniting Business state that contrast is the key to a successful dark mode website.
Readability
Dark backgrounds contrasted with light text such as a black background with white text can actually cause more eye strain than the reverse. Whilst a lot of users report that dark mode is good because it reduces eye strain during the evening or in dark environments, it can also have the opposite effect.
If a website is heavy in textual content, the high contrast between the white text and black background can actually have a bigger impact on the user and make prolonged reading more uncomfortable than the opposite.
Accessibility
Users with visual impairments or those using screen readers may encounter difficulties with websites that use dark color schemes due to their lack of contrast between elements. This is especially true with users who might happen to be colour blind. Having carried out usability studies with users who have visual impairments such as colour blindness I know first hand how difficult it is to make the contrast strong enough.
Creativity
Creativity is one of the most important elements of attracting users to a website. A website that looks like all the rest is less likely to get users interested in it. Dark mode websites are far more difficult to get right as stated by Habanero Consulting. The process of creating a website that flips to dark mode involves creating a second website which has a totally new design. It may have the same layout but visually looks very different.
Dark mode requires careful consideration of colour contrasts and graphics to ensure all elements are distinguishable from each other and work well with the dark theme. This complexity makes designing a dark mode website more challenging to build but also leaves little room for bright colours and creative flair.
Final remark
The idea of dark mode is now very prevalent on the web. Users are often give no choice on whether or not dark mode is enabled on the website as it is often forced by the operating system of their device. Websites should really offer the user the option to switch it off if they do not want it.
