A few months ago, near the beginning of my coding journey, I tweeted about a Codepen I was particularly proud of - a toggle between a light and dark mode, which would later feature in my portfolio. (Check it out here if you want to see the code: https://codepen.io/alanacargill/pen/gOrWRGP).
Naively, I assumed that switching a design from light to dark would be as simple as inverting black to white and vice versa, but walking on the dark side isn’t as simple as I first imagined. For good UX, there are several things to consider, like content, colour, and typography.
Firstly, I think it’s important to think about what dark mode actually is, and what it’s used for. The term ‘dark mode’ perhaps gives away what it is - a predominantly dark palette with light UI. This is something that’s becoming more and more popular on websites, and for good reason. Dark UI is designed to minimise digital eye strain, make the screen easier to see in low light settings (e.g. late at night), and it can be really useful in terms of branding and conveying moods and emotions. Also, it would be remiss of me not to mention that it can look super cool.
But, as is the case with most UI design, there are certain rules that should be followed if you’re designing a dark mode interface. Although it can look awesome, there are potential usability issues, particularly relating to readability.
So, if we are going to add a dark mode feature to our apps or sites, what can we do to tackle these issues?
Well, excellent question. The biggest challenge is maintaining sufficient contrast between the background and the foreground, which impacts the overarching issue of readability, and therefore usability. For best UX, dark mode should really only be used with more minimal designs, for example sparse text with heavily broken up content. The majority of space should be dedicated to dark surfaces, which makes dark mode not particularly suited to text-heavy content, or a variety of content types (e.g. text, images, videos, data tables etc.).
When looking at dark mode typography, there are two main considerations: is there enough contrast between the background and the text? And is this still legible if the user turns their screen brightness all the way down?
When text is used, it should be highly contrasted to the background. Generally, in light mode, most colours have enough contrast on a white background, but on a dark background the amount of colours that work well for text are dramatically reduced. Therefore, it’s recommended to use a dark grey background rather than a black one, as greys can express a wider range of colour (it's easier to see shadows on grey), and dark grey surfaces also reduce eye strain. #000000 is hard on the eyes on a high contrast screen, so dark mode colours are usually shades of grey combined with desaturated colours.
Dark themes should avoid using saturated colours, as they don't pass WCAG's accessibility standard of at least 4.5:1 for body text against dark surfaces. As well as this, saturated colours can also create optical vibrations against a dark background, which can induce more eye strain. Highly saturated brand colours might also not work as well on a dark background, so one option is to desaturate it to use as a more legible alternative.
While I highly recommend adding a dark mode to smaller project sites, like portfolios for example, I think it’s so important that we take care to make our designs as accessible and readable as possible, and pick dark mode colour palettes carefully to make sure everyone is able to make the most out of one of the coolest features on the web.
If you’re looking for some dark mode colour inspiration, check out https://colorhunt.co/palettes/dark.
Top comments (4)
Nice post, and nice disign codepen.io/alanacargill/pen/gOrWRGP ... I working in a personal proyect and I think it could be great if I can use part of the knowlege you share in this codepen to present some of my histories: peaceful-donut-a4f128.netlify.app/... this is the linjk if want to take a look(is not responsive yet)
Thanks for the article
always find some neat palettes on colorhunt. Best!
Why is it pink during the day?!
Nice work on the toggle button! But I think the day version could use a slight border.