

{"id":4368,"date":"2018-02-26T18:57:05","date_gmt":"2018-02-26T15:57:05","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4368"},"modified":"2023-07-24T11:51:00","modified_gmt":"2023-07-24T11:51:00","slug":"light-or-dark-ui-tips-choose-proper-color-scheme","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/","title":{"rendered":"Light or Dark UI? Tips to Choose a Proper Color Scheme"},"content":{"rendered":"<p><span style=\"color: #333333;\">Our everyday life is an endless flow of choices. In both personal and professional life, we have to consider numerous oppositions and challenges, and it&#8217;s better when solutions are based on not only suggestions but also facts, experience, and knowledge. Today we are going to discuss one of the frequent choices UI designers have to make project by project: which scheme is better for the interface, light or dark?<\/span><\/p>\n<h2><span style=\"color: #333333;\">Factors influencing the choice of color scheme<\/span><\/h2>\n<p><span style=\"color: #333333;\">Be sure, there is no one particular choice which would work for all the aims. The solution heavily depends on numerous factors covering not only the user&#8217;s side but also business goals, market conditions, and current design trends. Let&#8217;s review the essential factors which have to be considered regarding the issue.<\/span><\/p>\n<h3><span style=\"color: #333333;\">Readability and legibility<\/span><\/h3>\n<p><span style=\"color: #333333;\">These terms are both directly connected to the perception of the content presented with text. Readability defines how easily people can read words, phrases, <\/span>and<span style=\"color: #333333;\"> blocks of copy. Legibility measures how quickly and intuitively users\u00a0can distinguish the letters in a particular typeface.\u00a0<\/span><\/p>\n<p><span style=\"color: #333333;\">These characteristics should be carefully considered, especially for the interfaces filled with a lot of text. Among many other factors, the color scheme chosen for the interface plays a crucial role in the effective process of text perception. For example, as well as with physical objects perceived on different backgrounds, the black copy shown on white or light background seems to be larger than the white copy on a dark background. Poor readability results in poor user experience: users aren&#8217;t able to scan the data, even more &#8211; even if the data is relevant but not readable, users feel the inexplicable tense struggling with the text or may even miss the critical information.\u00a0<\/span><\/p>\n<p><span style=\"color: #333333;\">Does\u00a0it mean that interfaces with a light background are more <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-readable-user-interface\/\">readable<\/a>? Not always.\u00a0One of the famous gurus of user experience design Jacob Nielsen mentioned: \u00abUse colors with high contrast between the text and the background. Optimal legibility requires black text on white background (so-called positive text). White text on a black background (negative text) is almost as good. Although the contrast ratio is the same as for positive text, the inverted color scheme throws people off a little and slows their reading slightly. Legibility suffers much more in color schemes that make the text any lighter than pure black, especially if the background is made any darker than pure white.\u00bb So, any color scheme may be readable enough if the designer studies the peculiarities of copy perception on different backgrounds and works carefully on the font choice.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7835\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/tubik_studio___museu.gif\" alt=\"tubikstudio museu landing page\" width=\"800\" height=\"600\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">However, some scientific studies dating back to the 1980s show that for big bulks of text light background appears to be a more effective choice for the majority of users. Studying how advertising carriers worked, D. Bauer and C.R.Cavonius shared their explorations in the paper &#8220;Improving the legibility of visual display units through contrast reversal&#8221; (1980). In particular, they found that participants were 26% more accurate in reading text when it was featured with dark characters on a light background. <\/span><\/p>\n<p><span style=\"color: #333333;\">Why may that be so? Jason Harrison from Sensory Perception and Interaction Research Group (University of British Columbia) explains this phenomenon in the following way. People with astigmatism (which according to various stats present about 50% of the population) feel it harder to perceive white text on black than black text on white. Part of this has to do with light levels.\u00a0 With a bright display (white background) the iris closes a bit more, decreasing the effect of the &#8220;deformed&#8221; lens. With a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye. So, based on this, if the interface presents a lot of copy and suggests a long-reading experience, a light background may feel more user-friendly.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8194\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design.jpg\" alt=\"tips on visual hierarchy in design\" width=\"2500\" height=\"1667\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design.jpg 2500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-150x100.jpg 150w\" sizes=\"auto, (max-width: 2500px) 100vw, 2500px\" \/><\/p>\n<h3><span style=\"color: #333333;\">Accessibility<\/span><\/h3>\n<p><span style=\"color: #333333;\">Accessibility is mostly defined as the ability of the web or mobile interface to reach as many people as possible and provide its functionality regardless of any discriminations. So, the decision \u201cto use or not to use\u201d has to be mostly grounded in users\u2019 needs and preferences, not on their physical abilities. The color<\/span><span style=\"color: #333333;\">\u00a0scheme is mentioned among the top factors affecting this aspect. Selecting the palette and color combinations, a designer needs to take into account the users of different ages, special needs, or disabilities which can also determine the choice of color for the background and layout elements. <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/user-research-empathy-is-the-best-ux-policy\/\">User research<\/a> becomes a great help providing UX designers with data that helps to get closer to the target audience.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Clarity<\/span><\/h3>\n<p><span style=\"color: #333333;\">Clarity defines the ability to see and distinguish all the core details on the screen or page. First of all, it deals with the simplicity and intuitiveness of <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">navigation<\/a>: being able to scan the layout and find zones of information and elements of interaction, users don&#8217;t need to put much effort into getting what they need. If this aspect is not tested properly, it may lead to a weak <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/9-effective-tips-on-visual-hierarchy\/\">visual hierarchy<\/a> and turn the screen into a complete mess. Contrast plays a big role here and the color scheme becomes the foundation for it. To check, if the interface is clear and contrast enough, don&#8217;t forget about a good old trick of \u201cblur effect\u201d when you look at the screen or page in the blurred mode and check if everything vital is easily reached and noticeable.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7743\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/web-ui-design-landing-page.png\" alt=\"web ui design landing page\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/web-ui-design-landing-page.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/web-ui-design-landing-page-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/web-ui-design-landing-page-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/web-ui-design-landing-page-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3><span style=\"color: #333333;\">Responsiveness<\/span><\/h3>\n<p><span style=\"color: #333333;\">Responsiveness of the interface means that users get it usable and functional whatever device they use it on. What looks stylish and appealing in Sketch n high-res professional monitor may transform into a dirty stain on the small low-res screen. Therefore, some color schemes looking nice at the design stage may lose their beauty in a variety of everyday conditions they are applied in. As color scheme directly influences <a href=\"https:\/\/blog.tubikstudio.com\/design-glossary-color-terms-and-definitions\/\">color<\/a>, <a href=\"https:\/\/blog.tubikstudio.com\/knock-design-into-shape-psychology-of-shapes\/\">shape<\/a>, and <a href=\"https:\/\/blog.tubikstudio.com\/copywriting-mobile-web-interfaces-types-ui-copy\/\">copy<\/a> perception, it should be tested on diverse devices before making the final decision.<\/span><\/p>\n<h3><span style=\"color: #333333;\">Environment<\/span><\/h3>\n<p><span style=\"color: #333333;\">Web and mobile interfaces are used in environments that may be pre-supposed as typical if the target audience is researched carefully. For instance, concerning constant use under natural light, a dark background can literally create the effect of reflection, especially on glossy screens typical for tablets and smartphones. On the contrary, in conditions of a badly-lit environment, a dark background can take the light away from the screen which has a bad influence on navigation and readability. So, the issue of color combinations, contrast, and shades draws big attention here.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8736\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik.jpg\" alt=\"calendar app ui design tubik\" width=\"1200\" height=\"900\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik.jpg 1200w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik-150x113.jpg 150w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Checklist for color scheme selection<\/span><\/h2>\n<p><span style=\"color: #333333;\">With the factors mentioned above, we offer here a short checklist of basic steps to follow while selecting a general color scheme for a web or mobile interface.<\/span><\/p>\n<p><span style=\"color: #333333;\"><strong>1. Define the purpose of the interface.\u00a0<\/strong>Having determined the core points of the interface utility and problem-solving capacity, you make the choice of the color scheme more reasoned. If the UI is text-driven (a blog, news platform, e-reader, etc.), light background tends to be an effective choice. Light makes the screen airy and spacious and it will be easier to concentrate purely on the copy. On the other hand, if the interface is visually driven and moves around images rather than text, a color scheme with a dark or bright background may be a good solution as the colors of the images feel deeper and the general layout gets stylish or even luxurious look.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><strong>2. Analyze your target audience<\/strong>. Definition and analysis of the <a href=\"https:\/\/blog.tubikstudio.com\/business-oriented-design-know-your-target\/\">target audience<\/a> are the primary things designer should do. Knowing who is your potential user and what they will want to get from the website or app sets the solid basis for a usable, useful, and attractive interface. Middle-aged and older people tend to prefer interfaces with a light color scheme as they find them more intuitive and navigable. Younger people often find well-performed interfaces with a dark background more original and stylish so that can be the way to involve target users. Teenagers and children are attracted to interfaces using bright backgrounds and funny details. The choice of color obviously depends on the nature of the interface functionality and content. But the preferences of the target audience are always a good clue to user-centered decisions.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><strong>3. Research the competition.<\/strong> Another aspect to keep in mind is that your product isn&#8217;t going to appear one in a blue ocean. Vice versa, it will fight for the user&#8217;s attention in conditions of great and dynamic competition. The choice of the color scheme also becomes the way to make an app or website outstand and lead to such a precious first wish of interaction from the user\u2019s side. Time spent on exploration of the existing products in the segment saves time and effort otherwise wasted on the redesign of ineffective solutions.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><strong>4. Test, test, test.<\/strong> The points described above\u00a0are convincing about a key thing to do: as the color\u00a0belongs to the\u00a0factors directly affecting usability and attractiveness of the interface, every design solution should be appropriately tested, in different resolutions, on various screens, and under diverse conditions. <a href=\"https:\/\/blog.tubikstudio.com\/tests-go-first-usability-testing-in-design\/\">Testing<\/a> reveals strong and weak sides of\u00a0the color scheme before the product\u00a0comes on the market, gets discussed, and loses the chance of stunning first impression if the design solution is inefficient.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10028\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1-1.jpg\" alt=\"UI animation mobile interfaces tubik blog\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1-1.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1-1-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1-1-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1-1-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/UI-animation-mobile-interfaces-tubik-blog-1-1-150x100.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Compromise solutions<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Not wishing to stick to the <\/span>strict<span style=\"color: #333333;\"> color schemes, user interface designers sometimes find compromise solutions, like the following ones.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Dark interface, white tabs for copy<\/span><\/h3>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">As we mentioned in the <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/review-of-popular-interface-design-trends-in-2017\/\">review of UX design trends<\/a>, this trend got especially popular for interfaces based on the dark background scheme. It features one more approach to proper readability which is often the issue of debates: applying boxes or spaces with the light background for core data blocks, designers solve this problem and add elegant contrast to the screen or page. One of the cases, when it was applied efficiently, is the\u00a0<a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-watering-tracker-ui-design-for-home-needs\/\">Watering Tracker app<\/a> designed by the Tubik team.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9171\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/watering-tracker-app-design-tubik-1-1.jpg\" alt=\"watering tracker app design tubik\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/watering-tracker-app-design-tubik-1-1.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/watering-tracker-app-design-tubik-1-1-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/watering-tracker-app-design-tubik-1-1-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/watering-tracker-app-design-tubik-1-1-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/watering-tracker-app-design-tubik-1-1-150x100.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<h3><span style=\"color: #333333;\">Giving the choice of color scheme to the user<\/span><\/h3>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Another approach is giving users a choice of modes. That is what we did for <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-upper-app-ui-design-for-to-do-list\/\">Upper<\/a>, a to-do list app that offers the user a selection of color schemes. On the one hand, it makes the product really friendly to users and makes a choice more personalized according to not only usability issues but also aesthetic preferences. On the other hand, it takes additional work hours for designers and developers to work out all the schemes.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8202\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/Upper-App-to-do-list-color-theme.jpg\" alt=\"Upper App to-do list color theme\" width=\"1024\" height=\"682\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/Upper-App-to-do-list-color-theme.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/Upper-App-to-do-list-color-theme-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/Upper-App-to-do-list-color-theme-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/Upper-App-to-do-list-color-theme-150x100.jpg 150w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Useful Reading<\/span><\/h2>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/dark-side-of-ui-benefits-of-dark-background\/\">Dark Side of UI: Benefits of Dark Background<\/a><\/span><\/p>\n<p><a href=\"https:\/\/www.templateroller.com\/template\/2375922\/the-impact-of-web-page-text-background-color-combinations-on-readability-retention-aesthetics-and-behavioral-intention-richard-h-hall-patrick-hanna-missouri.html#docpage-3\"><span style=\"color: #333333;\">The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention<\/span><\/a><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/books.google.com.ua\/books?id=rvt4a_AmKFQC&amp;pg=PA11&amp;lpg=PA11&amp;dq=visual+perception+readability&amp;source=bl&amp;ots=6_rkYdGkj9&amp;sig=_UYthMOEgDSLJEFftDA895epms8&amp;hl=ru&amp;sa=X&amp;ved=0ahUKEwjiwPjRmsPMAhVOKywKHf1FCSM4FBDoAQgtMAM#v=onepage&amp;q=visual%20perception%20readability&amp;f=false\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Visual Perception: An Introduction<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/books.google.com.ua\/books?id=9RktoatXGQ0C&amp;pg=PA350&amp;lpg=PA350&amp;dq=visual+perception+readability&amp;source=bl&amp;ots=NTLfJ_Akj6&amp;sig=bpw4URR8U-QwWZwOndhoYs-wJWE&amp;hl=ru&amp;sa=X&amp;ved=0ahUKEwjiwPjRmsPMAhVOKywKHf1FCSM4FBDoAQgZMAA#v=onepage&amp;q=visual%20perception%20readability&amp;f=false\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Art and Visual Perception: A Psychology of the Creative Eye<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"http:\/\/www.writer2001.com\/colwebcontrast.htm\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Colour Choices on Web Pages: Contrast vs Readability<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"http:\/\/www.webdesignerdepot.com\/2009\/08\/the-dos-and-donts-of-dark-web-design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">The Dos and Don\u2019ts of Dark Web Design<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/tatham.blog\/2008\/10\/13\/why-light-text-on-dark-background-is-a-bad-idea\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Why light text on a dark background is a bad idea<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"http:\/\/uxmovement.com\/content\/when-to-use-white-text-on-a-dark-background\/\" rel=\"nofollow\">When to Use White Text on a Dark Background<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The article covers pros and cons of various color schemes for web and mobile UI: check how light and dark background influence usability and what factors to consider.<\/p>\n","protected":false},"author":3,"featured_media":10029,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,9],"tags":[468,469,479,20,482,68,485,73,489,95,491,100,533,104,138,151,256,259,261,297,319],"coauthors":[],"class_list":["post-4368","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-processes_and_tools","category-ui_ux","tag-ui-design-process","tag-ui-design-tips","tag-usability","tag-app-design","tag-user-experience","tag-color-choice","tag-user-experience-design","tag-color-scheme","tag-user-experience-examples","tag-dark-ui","tag-user-interface","tag-design","tag-web-design","tag-design-best-practices","tag-design-process","tag-design-tips","tag-interaction-design","tag-interface-color","tag-interface-design","tag-light-or-dark-ui","tag-mobile-app"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Light or Dark UI? Tips to Choose a Proper Color Scheme<\/title>\n<meta name=\"description\" content=\"The article covers pros and cons of various color schemes for web and mobile UI: check how light and dark background influence usability and what factors to consider.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Light or Dark UI? Tips to Choose a Proper Color Scheme\" \/>\n<meta property=\"og:description\" content=\"The article covers pros and cons of various color schemes for web and mobile UI: check how light and dark background influence usability and what factors to consider.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-26T15:57:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T11:51:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/light-dark-UI-design-tips-tubik-blog-1-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/\",\"name\":\"Light or Dark UI? Tips to Choose a Proper Color Scheme\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/light-dark-UI-design-tips-tubik-blog-1-1.jpg\",\"datePublished\":\"2018-02-26T15:57:05+00:00\",\"dateModified\":\"2023-07-24T11:51:00+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article covers pros and cons of various color schemes for web and mobile UI: check how light and dark background influence usability and what factors to consider.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/light-dark-UI-design-tips-tubik-blog-1-1.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/light-dark-UI-design-tips-tubik-blog-1-1.jpg\",\"width\":1024,\"height\":768,\"caption\":\"light dark UI design tips tubik blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Light or Dark UI? Tips to Choose a Proper Color Scheme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Light or Dark UI? Tips to Choose a Proper Color Scheme","description":"The article covers pros and cons of various color schemes for web and mobile UI: check how light and dark background influence usability and what factors to consider.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/","og_locale":"en_US","og_type":"article","og_title":"Light or Dark UI? Tips to Choose a Proper Color Scheme","og_description":"The article covers pros and cons of various color schemes for web and mobile UI: check how light and dark background influence usability and what factors to consider.","og_url":"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2018-02-26T15:57:05+00:00","article_modified_time":"2023-07-24T11:51:00+00:00","og_image":[{"width":1024,"height":768,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/light-dark-UI-design-tips-tubik-blog-1-1.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/","url":"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/","name":"Light or Dark UI? Tips to Choose a Proper Color Scheme","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/light-dark-UI-design-tips-tubik-blog-1-1.jpg","datePublished":"2018-02-26T15:57:05+00:00","dateModified":"2023-07-24T11:51:00+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article covers pros and cons of various color schemes for web and mobile UI: check how light and dark background influence usability and what factors to consider.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/light-dark-UI-design-tips-tubik-blog-1-1.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/02\/light-dark-UI-design-tips-tubik-blog-1-1.jpg","width":1024,"height":768,"caption":"light dark UI design tips tubik blog"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/light-or-dark-ui-tips-choose-proper-color-scheme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Light or Dark UI? Tips to Choose a Proper Color Scheme"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=4368"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4368\/revisions"}],"predecessor-version":[{"id":14474,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4368\/revisions\/14474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/10029"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4368"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}