Speaking of the dark mode UI trend, we can’t help but mention readability. That is because readability is so dependent on contrast between the text and background. In our previous video on dark mode color palette, we've explained why picking similar colors for the font and the backdrop is not a good idea.
Still, even highly contrasting color combinations like black-on-white or white-on-black have their pros and cons. If you want to try dark mode UI trend on your website, check out TOP 30 Dark WordPress Themes 2020.
Research has proven that in most cases, black text against the white or light background is the most readable combo. However, it can put a strain on the user’s eyes for long periods of time. That’s the reason why text-heavy interfaces where the user will be reading for long periods of time often use the light text against the dark background combination.
This approach is often used in apps for programmers. When coding for hours at a time, they need a UI that will not cause fatigue and allows their vision to stay sharp.
Use lighter tones (colors in the 200–50 range) because they have better readability on dark theme surfaces. Lighter variants won’t make the UI less expressive but they help you maintain appropriate contrast without causing eye strain.
3. Use “On” colors for text.
These are colors that appear “on” top of components and key surfaces. The default “on” colors for a dark theme is pure white (#FFFFFF). But #FFFFFF is a bright color and it would visually “vibrate” against dark backgrounds. That’s why Google Material design recommends using a slightly darker white:
Quick tip: Light text on a dark background can appear more bold than dark on light. That’s why you may want to use lighter font weights for dark mode.
Scientifically the light vs dark mode readability dilemma in modern UI design can be explained the following way:
“Recent research on the legibility of digital displays has demonstrated a "positive polarity advantage", in which black-on-white text configurations are more legible than their negative polarity, white-on-black counterparts.”
Contrast polarity is a term used by scientists to describe the contrast between the text and the background:
So, black text against the white background is better than white text against the black background. The researchers from Germany studied two groups of adults with normal (or corrected-to-normal) vision: young adults (18 to 33 years old) and older adults (60 to 85 years old).
The participants had to complete two types of tasks:
The tasks were presented in different contrast polarities — for some participants, they were in dark mode and for others they were shown in light mode. Each participant saw only tasks in one contrast polarity (e.g., only dark mode).
The participants were asked to assess their fatigue levels before and after taking the tests. They were offered to rate their eyestrain, headache, muscle strain, back pain, and subjective well-being at the beginning of the experiment, as well as at the end.
As a result, light mode won across all dimensions:
For people with visual disabilities, there is less of a consensus. Research has shown that people with “certain types of impairments (e.g., cataract) do better with dark mode,” with some users with visual disability reporting that preference.
For this reason, when it comes to dark mode, it is better to default to the old reliable black-on-white when you have a lot of reading to do. But if you really don’t want to give up on dark mode, there are a few tips you can use to combat decreased legibility.
In this respect, Apple’s Human Interface Guidelines suggests developers 3 simple rules to help increase the readability of dark mode apps:
Dark mode works well when you want to encourage the reader to quickly scan stats and focus on key data points, like when looking at stocks, charts, or graphs.
Salesforce study has shown that participants made decisions faster, and just as accurately, with the dark interface as compared to a light one.
Interestingly, that ran counter to participant’s impressions of the interfaces, as they had a better first impression and associated higher value with the light themes. In regard to usability and readability/legibility, dark mode isn’t actually better.
If you want more video tutorials and explainers on web design trends, make sure to subscribe to TemplateMonster's YouTube channel!
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.