Choosing the right background for your design plays a key role in it being received positively by the user, in meeting the design requirements and in the overall operation of the application or web page. It is a crucial factor that can affect future success or failure, so it’s no wonder that designers always weigh up this question at the very beginning of their work.
Remember that color is a powerful tool for creating a good user interface. It can either support functionality or, in the worst case, cause frustration and tear apart our concept of a well-designed product. It is important to start by defining clearly what it is that we are designing, for whom and in what circumstances our website will be explored.
When someone asks you questions such as what design background should you choose? Will it be better to have a light background or dark background for the website? The answers are not so straightforward. In my opinion, the answer to this question is simply it depends.
Read also: Company website – key things to look out for when building a company website
What is the best color to read text in
The choice of UI backgrounds always affects the level of readability. This is especially important and should be considered as a standalone point at the beginning, when our website is to be an aggregate of text content. The more effort the recipient has expend to wade through the text on the page, the worse for our project. Poor readability results in a poorer experience, users aren’t able to remember the information we want to pass on to them and reading causes frustration and reader fatigue.
In most cases, black text on a white design background remains the most readable. This is why news portals or blogs use a light background with dark text. It is the most natural color combination for us when we read long articles. After all, all printed books and newspapers are presented in this way.
Read also: Mobile apps in the service of mental health
Accessibility and website background color
The term accessibility defines the ability of the largest possible group of people to take advantage of the interface functionality. Therefore, the decision to choose a specific solution should reflect the needs and preferences of those who use our product. The designer must in this case consider groups of users with disabilities or special needs.
When it comes to verifying availability, our best friend is the W3C protocol which sets out the rules for website accessibility. It is always worth having this in mind and verifying your design visions with these generally accepted principles.
Link: https://www.w3.org/WAI/fundamentals/accessibility-intro/
Light versus dark in everyday life
The designer has to consider many different aspects when choosing color schemes for apps and one of them that is of great importance in terms of reception is the environment in which the user will access the product. This is where you need to define well the target group, their lifestyle and needs and in what places and situations our product can be used most often. We will create a different project for the person who browses our website at home in artificial light than for someone who browses through articles on the way to work, outdoors, often in direct sunlight.
Color and responsiveness
Hardware capabilities keep improving, but that doesn’t mean that as designers we shouldn’t consider people who use older phones or monitors. Until a few years ago, nobody paid attention to adjusting their own products for different resolutions, but now a lot of emphasis is placed on it. Most of us use smartphones on a daily basis and despite the fact that they have higher and higher resolutions, they are still mobile devices with limited capacity. Therefore, when designing a product, we must consider what our website will look like on various devices. It may turn out that dark design in the desktop version looks elegant and professional, but in the mobile version it doesn’t work so well, because the dark black background dominates the text and graphics too much.
A checklist: how to consciously choose the background color
It would seem that the GUI background is the easiest element we will decide on in our project. It turns out, however, that we must take many aspects into account to give this decision a theoretical basis. So it is worth defining a few important issues at the beginning, before we even make the first attempts at design:
- Specify the purpose of the project. When you think about your product, you need to know what its aim and purpose are. If you want to create a website that will consist mainly of text content, it is sensible to use light color backgrounds and dark text colors. However, when you think about your interface in the context of graphics, animations and photos then a dark background can be a good choice.
- Define your target audience. The project you create is probably aimed at someone. So when creating it, focus on who you are really designing for and who will use your solution. Light backgrounds will be more appropriate for the elderly and visually impaired, dark backgrounds may be more attractive for a younger audience or a target group that particularly appreciates the professionalism and elegance of the websites they browse.
- This is your best friend in design. When you are not sure which solution to choose, user research will help you dispel any doubts. By learning about the needs and preferences of future users, you will create a product that they will be more likely to use.
Read also: In website redesign projects, the website itself is the last thing to concern yourself with.
Background color defines your design
If you need additional tips to help you choose your UI background, check out the list below. Remember that these are only guidelines and not rules that must be followed when designing.
Choose a dark theme if:
- the project is based mainly on graphics, animations or photos
- you want to achieve the effect of an elegant, luxurious interface
- your project will be used mainly at home on various devices (TV, tablet or desktop)
- the interface is simple and intuitive, consisting of interactive components such as buttons, sliders and icons.
The best color combinations for a black background and the rules to be followed when we choose a dark UI are summarized very well by Google in its Material Design: https://material.io/design/color/dark-theme.html
Choose a white theme if:
- your project mainly consists of a large amount of text and single photos
- you care about readability, clarity and good accessibility
- users will use it mainly outside the home, on public transport, on the move or in bright sunshine
- the interface is more complicated, containing tables, charts, text and interactive items
In the case of a white background app, it is important to maintain the appropriate contrast (W3C); additionally, the color palette correlating with light background design is much more extensive than with dark background design.
Dark vs light background
As you can see, there is no one simple answer to the question of what background in your design you should use. It all depends on the specifics of your product, who you create it for and what situations people will use it in. Remember that what background you choose will somehow define your product. Also consider that not everything is dark or light and there are many other variants in the color palette we can use. The choice of bright background or dark background is just the tip of the iceberg, because other design decisions, such as web design color themes (including complementary colors) are equally relevant.
Read also: Software design process: don’t think software, think tools!