{"id":2418,"date":"2020-06-27T08:53:00","date_gmt":"2020-06-27T15:53:00","guid":{"rendered":"http:\/\/areteworks.local\/?p=2418"},"modified":"2022-08-02T12:02:57","modified_gmt":"2022-08-02T19:02:57","slug":"dark-backgrounds-in-user-interfaces","status":"publish","type":"post","link":"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/","title":{"rendered":"Using dark backgrounds in user interface design | UX Design Company"},"content":{"rendered":"<p>More and more, user interfaces on desktops, mobile devices and kiosks are using darker colored backgrounds. Understanding the reasons goes beyond aesthetics, however. <a href=\"http:\/\/lite.mst.edu\/media\/research\/ctel\/documents\/LITE-2003-04.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Studies<\/a> have been conducted to analyze how the combination of text and background color affects readability, aesthetics, and behavioral intention in people.<\/p>\n<p>UI systems using dark backgrounds has its advantages. Eye fatigue is reduces, darker displays may work better in rooms that are not lit well, and certain text can be highlighted and emphasized better against darker backgrounds. The disadvantages are very real as well. Fonts that are too small or too thin become harder to read, screens with dark background can sometimes be more difficult to view in brightly-lit rooms, and darker colors may conflict with client branding. The good news is that the disadvantages can be overcome with a good knowledge of color theory and screen testing.<\/p>\n<p>Some basic tips for using lighter text on dark backgrounds:<\/p>\n<ul>\n<li><span style=\"color: #000000;\">Dark backgrounds absorb some light away from other elements on the screen so the empty space between screen elements becomes more important.<\/span><\/li>\n<li><span style=\"color: #000000;\">Paragraph text is often harder to read on dark backgrounds. If your UI requires paragraph text on a dark background, using a gray tint on the text will help with readability. It lessens the stress on users\u2019 eyes since <\/span>gray<span style=\"color: #000000;\"> text doesn\u2019t reflect as much light.<\/span><\/li>\n<li><span style=\"color: #000000;\">Testing different dark backgrounds and font colors <\/span>is<span style=\"color: #000000;\"> a must, especially on the monitor or device on which it will be displayed.<\/span><\/li>\n<li><span style=\"color: #000000;\">Sans-serif fonts on dark backgrounds may be more legible, enhancing the readability of the text.<\/span><\/li>\n<li><span style=\"color: #000000;\">While text with a grey tint works well with paragraph text, white text on a dark background works best with titles, labels <\/span>and<span style=\"color: #000000;\"> headings that appear on the screen. This is text that users will scan instead of <\/span>read<span style=\"color: #000000;\">. White text on dark backgrounds is an effective way to grab users\u2019 attention.<\/span><\/li>\n<\/ul>\n<p><a href=\"https:\/\/areteworks.com\/work-notables\/\" target=\"\u201d_blank\u201d\" rel=\"noopener\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-2420\" src=\"https:\/\/areteworks.com\/wp-content\/uploads\/2018\/11\/text-background1-300x129.jpg\" alt=\"\" width=\"250\" height=\"108\"><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>More and more, user interfaces on desktops, mobile devices and kiosks are using darker colored backgrounds. Understanding the reasons goes beyond aesthetics, however. Studies have been conducted to analyze how the combination of text and background color affects readability, aesthetics, and behavioral intention in people. UI systems using dark backgrounds has its advantages. Eye fatigue&hellip;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[54],"tags":[24,25,30,31,33,18,32,19,20,26],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using dark backgrounds in user interface design | UX Design Company - Areteworks<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using dark backgrounds in user interface design | UX Design Company - Areteworks\" \/>\n<meta property=\"og:description\" content=\"More and more, user interfaces on desktops, mobile devices and kiosks are using darker colored backgrounds. Understanding the reasons goes beyond aesthetics, however. Studies have been conducted to analyze how the combination of text and background color affects readability, aesthetics, and behavioral intention in people. UI systems using dark backgrounds has its advantages. Eye fatigue&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/\" \/>\n<meta property=\"og:site_name\" content=\"Areteworks\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-27T15:53:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-02T19:02:57+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/11\/text-background1-300x129.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steven Liu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/areteworks.com\/#website\",\"url\":\"https:\/\/areteworks.com\/\",\"name\":\"Areteworks\",\"description\":\"UI UX Design Company\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/areteworks.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/11\/text-background1-300x129.jpg\",\"contentUrl\":\"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/11\/text-background1-300x129.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/#webpage\",\"url\":\"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/\",\"name\":\"Using dark backgrounds in user interface design | UX Design Company - Areteworks\",\"isPartOf\":{\"@id\":\"https:\/\/areteworks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/#primaryimage\"},\"datePublished\":\"2020-06-27T15:53:00+00:00\",\"dateModified\":\"2022-08-02T19:02:57+00:00\",\"author\":{\"@id\":\"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a\"},\"breadcrumb\":{\"@id\":\"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/areteworks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using dark backgrounds in user interface design | UX Design Company\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a\",\"name\":\"Steven Liu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/areteworks.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g\",\"caption\":\"Steven Liu\"},\"url\":\"https:\/\/areteworks.com\/author\/steven-liu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using dark backgrounds in user interface design | UX Design Company - Areteworks","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:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/","og_locale":"en_US","og_type":"article","og_title":"Using dark backgrounds in user interface design | UX Design Company - Areteworks","og_description":"More and more, user interfaces on desktops, mobile devices and kiosks are using darker colored backgrounds. Understanding the reasons goes beyond aesthetics, however. Studies have been conducted to analyze how the combination of text and background color affects readability, aesthetics, and behavioral intention in people. UI systems using dark backgrounds has its advantages. Eye fatigue&hellip;","og_url":"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/","og_site_name":"Areteworks","article_published_time":"2020-06-27T15:53:00+00:00","article_modified_time":"2022-08-02T19:02:57+00:00","og_image":[{"url":"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/11\/text-background1-300x129.jpg"}],"twitter_card":"summary","twitter_misc":{"Written by":"Steven Liu","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/areteworks.com\/#website","url":"https:\/\/areteworks.com\/","name":"Areteworks","description":"UI UX Design Company","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/areteworks.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/#primaryimage","inLanguage":"en-US","url":"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/11\/text-background1-300x129.jpg","contentUrl":"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/11\/text-background1-300x129.jpg"},{"@type":"WebPage","@id":"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/#webpage","url":"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/","name":"Using dark backgrounds in user interface design | UX Design Company - Areteworks","isPartOf":{"@id":"https:\/\/areteworks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/#primaryimage"},"datePublished":"2020-06-27T15:53:00+00:00","dateModified":"2022-08-02T19:02:57+00:00","author":{"@id":"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a"},"breadcrumb":{"@id":"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/areteworks.com\/dark-backgrounds-in-user-interfaces\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/areteworks.com\/"},{"@type":"ListItem","position":2,"name":"Using dark backgrounds in user interface design | UX Design Company"}]},{"@type":"Person","@id":"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a","name":"Steven Liu","image":{"@type":"ImageObject","@id":"https:\/\/areteworks.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g","caption":"Steven Liu"},"url":"https:\/\/areteworks.com\/author\/steven-liu\/"}]}},"_links":{"self":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts\/2418"}],"collection":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/comments?post=2418"}],"version-history":[{"count":1,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts\/2418\/revisions"}],"predecessor-version":[{"id":4563,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts\/2418\/revisions\/4563"}],"wp:attachment":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/media?parent=2418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/categories?post=2418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/tags?post=2418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}