Considering Color: Applying Psychology to Improve the Use of Color in Digital Interfaces ()
1. Introduction
The use of color in digital interfaces is a critical aspect of user experience design, influencing both the aesthetic appeal and functional usability of software applications. Empirical studies have demonstrated that color can significantly impact user performance and satisfaction. For instance, research indicates that appropriate color contrast can enhance readability by up to 40%, thereby reducing user error rates and significantly reducing eye strain and enhancing user comfort (Wright et al., 1997). Additionally, color coding has been shown to improve information retrieval times by 20% in complex interfaces. Color coding in navigation menus can decrease task completion times by 30%, as users can quickly identify and access desired functions (Pereira et al., 2022). These practical insights underscore the necessity of strategic color application in interface design, ensuring that digital products are not only visually engaging but also functionally efficient.
User Experience (UX) is an essential component of all products, and well-designed digital interfaces utilize rules and good-practice guidelines from the field of Human-Computer Interaction (HCI). UX focuses on user-centered design, making sure that design decisions meet the needs of the user while also considering commercial goals.
Often, a commercial goal includes holding the attention of the user to promote extended interactions. UX research aims to achieve a compromise between the commercial goals and accommodating the needs and preferences of the users.
Research is required within the field of User Interface (UI) design to determine how color plays a role in achieving the desired commercial goals. Applying previous HCI research knowledge to commercial goals can allow new discoveries in this field, and hence, help designers build interfaces that retain user interest.
An understanding of the psychological influences caused by color choices within the UI design can help designers to influence user actions. For example, encouraging further browsing and increasing session time on websites and apps.
2. Color Theory
This literature review aims to provide a background to the color theory relevant to this paper, this includes a review of pertinent aspects of color psychology and color preferences. The literature review also describes the use of color in marketing and branding, and recent significant trends in color usage. This section finishes by describing specific features of web browsing, including user duration, color modes, and how color is used on webpages.
2.1. The Psychology of Color
Light illuminates the world, fills it with color, and brings life to objects due to the reflection of said light. More notably, color has a significant influence on the viewer; this study of the connotation of color is often studied under the field of color psychology.
Academics who study color argue that color is more than just aesthetics, since it can communicate information based on learned associations of color and concepts (Elliot & Maier, 2007) and affect reasoning and behavior (Elliot & Maier, 2014). In the field of HCI, scholars study human behaviors, emotions, and motivations to investigate how humans achieve their goals when using digital interfaces. Hence, HCI researchers exploit the theory that color plays a role in decision making to design better interfaces.
Research has shown that it can be challenging to differentiate intrinsic color responses and learned experiences considering how color is understood to be taught (Rider, 2010). Color is often context-specific, and past research has shown that one color can have multiple, often conflicting, interpretations. For example, red can be seen as implying both feelings of anger and passion (Elliot & Maier, 2014). Other foundational research suggests more innate responses to color exist; where brighter and saturated colors are often viewed as more pleasant and different color hues have associations of good, bad, strong, and weak (Valdez & Mehrabian, 1994).
Despite these contradictions, there is some generalized understanding of what a color means. Humans learn that a color of a specific hue is called red, then they learn that a red traffic light means stop and that a red oven plate is hot. Meanwhile, that same person may observe that blood is also red, therefore creating a correlation that red means danger while simultaneously being able to perceive it as a passionate color.
Accepting the significance of color in design means that a designer can use color to convey an intended message.
2.2. Color Preference
Color is one of the first things most children are exposed to in the world; it is ultimately subjective and influenced by personal tastes and popular trends. However, colors also face a lifecycle of their own, due to emotional and biological changes over time that affect the determination of color preference. An understanding of the nature of these changes and preferences will help designers with their color choices within their interfaces.
Studies of previous research in this field have revealed a distinction between physiological reaction to a color and color preference, with red and yellow exhibiting greater arousal than blue and green, which are deemed more pleasant (Valdez & Mehrabian, 1994).
Experiments investigating emotional and behavioral reactions to colors produced the following generic results (Adams & Osgood, 1973):
good = white, blue, and green
bad = black and gray
strong = red and black
weak = yellow, white, and gray
striking = red
passive = black and gray
Research has also shown that these preferences and reactions to color change over time and are often dependent on the participants’ age. Results from previous experimental research have illustrated how color preference changes with age. Young children tend to favor red, blue, purple, orange, yellow, and green. After the transition into adulthood, with added maturity, the partiality switches to blue and green with a strong dislike for the color yellow (Guilford & Smith, 1959; Crozier, 1999).
3. Commercial Use of Color
Color plays a crucial role in commerce, impacting how customers perceive and interact with brands and products. It serves as a powerful tool for communication, attention, and emotional influence. Brands strategically choose colors to convey messages, evoke specific emotions, and differentiate themselves in a competitive market. Color influences purchasing decisions, shapes brand perception, and enhances overall customer experience in commerce (Pelet & Papadopoulou, 2012).
To further establish color’s advantages, research analyzing icons concludes that consumers remember their attributes in the following order: colors, graphics, numbers, words (Wallace, 2013). This research reinforces the significance of color beyond aesthetics and shows how businesses apply color psychology.
3.1. Color and Branding
Many companies and institutions successfully utilize color psychology without the consumer being aware of the impact of color on their decisions and opinions. Brands meticulously select hues based on their psychological impact.
Warm tones like orange and yellow evoke feelings of warmth, energy, and optimism, making them ideal for promoting leisure activities or food products. Research suggests these warm colors increase arousal and cause greater activity (Kurt & Osueke, 2014).
Red, with its bold and attention-grabbing nature, often appears in fast-food logos, signaling urgency and excitement—and making the consumer hungry (Valdez & Mehrabian, 1994).
Using lighter colors, such as white or light gray, in a logo or brand design can convey a range of positive attributes. White is often associated with purity, cleanliness, and simplicity, making it a popular choice for brands that want to project a sense of sophistication and minimalism (Valdez & Mehrabian, 1994).
These vibrant hues can evoke strong emotional responses, making brands more appealing and recognizable. Additionally, bright colors can help differentiate a brand in a crowded market, making it stand out from competitors.
Cooler colors, such as green and blue, evoke calmness and reliability, fitting for eco-friendly brands or financial and healthcare services (Elliot & Maier, 2014). Blue, in particular, is considered a calm and peaceful color, associated with trust and integrity, and has been shown to increase productivity. Brands that often use blue are predominantly financial institutions, technology companies, medical providers, and multiple airlines. The blue color conveys messages of tranquility, relaxation, trustworthiness, security, and reliability (Rath, 2017).
Understanding cultural associations is also essential to ensure that colors resonate with diverse audiences. Moreover, cultural context plays a role where red symbolizes danger and heat in western contexts, red symbolizes luck and prosperity in Chinese culture. In an increasingly globalized marketplace, advertisers must navigate these nuances to create impactful interfaces that resonate across diverse audiences (Adams & Osgood, 1973).
Audiences’ views of companies and products are altered by color unknowingly; Rider (2010) concludes that slight color variation determines the design effectiveness and economic impact, resulting in color as a worthy asset. Brands can relay a message to consumers through color, by strategically using brighter colors, brands can enhance their visual appeal and strengthen their connection with consumers.
Although color serves as a preference in daily life, designers must often stay with the brand’s already established color palette for main color blocks; additional accent colors can be chosen to utilize emotional color reactions.
By understanding color psychology, designers can also create visually compelling digital interfaces that resonate with audiences, evoke emotions, and reinforce brand identity (Wadhera & Capaldi-Phillips, 2014).
When tasked with designing digital interfaces, UI designers use the brand’s colors for the palette; with appropriate color study, those colors send the correct subliminal message to their consumers to help achieve other goals (such as extending session time on websites).
3.2. Color Trends
The use of color in advertising has evolved significantly, reflecting broader societal trends and advancements in digital technology. In recent years, there’s been a noticeable shift towards colors that evoke specific emotions and psychological responses, as discussed in previous sections. In recent years, many of the emerging color trends include shades that promote optimism and stability (León-Alberca et al., 2024).
Pantone selects a trending color(s) each year through extensive consideration and trend analysis performed by Pantone Color Institute experts. This selection impacts product development and purchasing decisions in various fashion and consumer industries.
For example, in 2021, Pantone selected two colors of the year: Ultimate Gray, a midtone, neutral gray, and Illuminating, similar to a ripe banana (Pantone, 2021). Based on psychological color theory, gray is neutral and projects stability, while yellow is joyful and cheerful (Van Braam, 2021).
However, Rider (2010) reported that yellow was the least liked color despite the happy hue attribute, observing that yellow was never selected over blue. A further study from Hemphill (1996) noted gray’s association with poor weather conditions, thus generating negative responses. Furthermore, Pantone selects the color trend for a specific year, contrary to Birren’s (1997) research theorizing that colors trend for three years.
Pantone’s color choices of 2021 probably relied on some color psychology concepts to gauge a positive tone, perhaps taking the COVID-19 pandemic into consideration. Still, designers should not necessarily rely on these color trends despite light grays often being used as standard background colors in digital designs in many web and software applications.
Although Pantone’s chosen colors of the year do not have direct impact for interface design, popular and trending colors appear on website themes, regardless of color psychology principles. In contrast, digital interface designs are indefinite unless subjected to a nonpredictive redesign despite UX trends having a significant influence on interfaces.
4. Color and the Web
HCI focuses on user-centered design, and all design decisions should cater to the user experience. The web has developed a number of standard design principles, which change over time. With Cascading Style Sheets (CSS), web developers can control the colors used on a site to accommodate the user experience by implementing the psychological theories discussed in the previous sections of this paper.
4.1. Research on Color and the Web
A large body of research has repeatedly demonstrated that users’ attitudes were higher toward positive color conditions that use established psychologically known color effects on websites (Gorn et al., 2004).
As a goal, one could relate all color-based design on websites as an attempt to relate with the audience, rather than viewing it as using color to achieve a level of psychology manipulation (Rider, 2010). In attempting to achieve this goal, many UX strategists recommend color utilization for aesthetics over user performance (Gabriel-Petit, 2007).
Color plays a crucial role in reducing eye strain on web pages by optimizing visual comfort and readability. Proper color contrast between text and background helps prevent visual fatigue, making it easier for users to read and process information without straining their eyes.
Previous research has utilized web crawler tools to collect color data based on website usage and found the most utilized colors to be white, light gray, dark blue, medium blue, light blue, light yellow (cream tones), black, and gray (Kondratova & Goldfarb, 2007). Similarly, light grays and pastel shades are preferred as background colors and have been shown to lead to less eye fatigue (Deubel, 2003).
High contrast, such as black text on a white background, can be harsh and tiring, while more balanced contrasts, like dark text on a light gray background, have been shown to be gentler on the eyes (Sandnes, 2017).
Another recent design practice of relevance is the use of negative space, with some advocating a substantial 50% dedication being needed to reduce eye strain (Coursaris & Kripintris, 2012), while others advocate a minimum of a modest 5% (Lynch & Horton, 2008).
It is important to remember that many other factors affect the perception of color on any web page. These factors include:
Any particular culture’s conceptions of color meaning and effect, which may significantly differ from what is perceived as a standard Western interpretation (Rider, 2010).
Personal preferences are always going to be a factor in determining color choices on the web due to color’s inherently subjective nature (Richardson et al., 2014).
An understanding how web designs are implemented will contribute to UX and UI design layouts and color utilization, having a foundation in HCI theory and based on established brands and establishing a consistent color palette for the user.
4.2. Light and Dark Modes
A current UI trend has several apps, websites, software, and operating systems implementing a dark mode interface by switching from dark text on a light background to a light on dark color scheme (Kim et al., 2019). Dark backgrounds were common in the ‘70s and ‘80s; this was not due to an early dark mode adoption preference but instead mainly due to technology limitations.
The relatively recent re-adoption of dark mode interfaces means that there is limited research on the impact of this interface mode. However, the work that has been done has attempted to utilize scientific data combined with color psychology principles to understand the implications and benefits of dark mode interfaces.
Eye strain and fatigue directly result from screen overuse, this is particularly prevalent with LCD screens (Sheppard & Wolffsohn, 2018). UX research has consistently demonstrated that although a light mode is often perceived by users as more user-friendly because the standard black text on white backgrounds provides maximum contrast; however, it may cause eye fatigue (Gabriel-Petit, 2007).
Hence, dark modes have become a popular user preference, with researchers noting that individuals opt for dark mode claiming it provides a more satisfying experience (Eisfeld & Kristallovich, 2020). Dark mode is also reported to increase the time until users’ eyes become strained due to less light being emitted (Kim et al., 2019).
Other benefits include that many users in low-light environments reported that they preferred dark mode (Kim et al., 2019). Also, many users who opted for dark mode, noted a feeling that it was “more natural” as if it was mimicking the lighting conditions of their environment (Eisfeld & Kristallovich, 2020). Research has reported that the use of dark mode significantly benefits battery consumption on OLED screens (Dash & Hu, 2021).
However, there are several negative effects on users based on the selection of dark mode interfaces. Users reading white text on a dark background require more time and experience greater difficulty in seeing the text, but comprehend the text faster (Wang et al., 2003). Color psychologists also warn against using predominantly black and black-like colors due to the association with aggression (Elliot & Maier, 2014).
With the recent increasing uptake in the use of dark mode interfaces, more research and time are required to understand if dark mode is merely a trend, despite the proven scientific benefits for eyes. It is however obvious, that implementing dark mode color strategies (or using more calming colors) not only enhances the user experience but also supports better visual health, especially for those who spend extended periods on digital devices.
4.3. Browsing Duration
UX research aims to achieve a compromise between the commercial goals and accommodating the needs and preferences of the users (Benyon, 2014). Often, a commercial goal involves holding the attention of the user to promote extended interaction with a website. Moreover, designers must identify both the intent and results of standard practices to increase browsing duration.
The increase in user time spent online has become a notable trend in recent years. According to recent data, internet users in the USA now spend an average of over eight hours online daily, marking a significant rise from previous years. This increase can be attributed to various factors, including the proliferation of digital media, the rise of remote work and online education, and the growing importance of social media and streaming services in daily life (Statista Research Department, 2021; Mogaji et al., 2023).
Notwithstanding, studies have repeatedly shown that the growth in web activity is predominantly attributed to more frequent and not prolonged browsing sessions. Many users leave a newly visited website within 10-20 seconds (Montgomery & Faloutsos, 2001; Nielsen, 2011). It should be noted that there is a significant difference between grasping the user’s attention and maintaining it.
In fields such as entertainment, retail, and education, UI designers can use color psychology research as one of the tools to improve user retention on websites. One possible way to increase the time spent on a site involves reducing user eye strain and applying color psychology to create relaxation for the users (Gorn et al., 2004). Hence, when choosing a website’s accent colors, it is recommended that color combinations that create simultaneous-contrast effects are avoided to reduce eye strain (Gorn et al., 2004; Gabriel-Petit, 2007).
When considering relaxing colors, both blue and green are considered a part of the positive color category; however, though green is a calming color, it is often associated with boredom (Van Braam, 2021). Blue has become a predominant color on the web due to its association with trust, reliability, and professionalism and the well-researched productive benefit (Bleicher, 2023).
Psychological research has shown that blue is versatile and can evoke different emotions depending on its shade; lighter blues are calming and serene, while darker blues are more authoritative and confident. This adaptability makes blue a popular choice for designers aiming to create a visually appealing and psychologically impactful user experience.
To determine how designers can use color to increase browsing time an experiment is proposed. Based on the research described in the previous sections of this paper, increasing user duration on websites, referred to as session time, will be investigated through the development of a working prototype for testing. Dark mode, positive colors, and warm tints will be the main variables to test in the experiment.
Researching color manipulation is a subtle yet significant factor that affects user browsing time. A rigorous testing scheme, where the users are unaware of the variables under experimental consideration is proposed.
5. Experimental Methodology
The following section describes the chosen method for data collection pertaining analysis of the research questions. This research aims to determine how color’s psychological principles influence users’ interest when browsing to increase retention and suggest what color to implement on websites to achieve that goal, thus generating three core research questions required to create this style guide.
The first research question is to understand user preference for dark mode with varying demographics.
The second research question evaluates color psychology to assess color trends compared to preferences.
Lastly, the third research question asks if color can increase the time users spend browsing websites.
The research hypotheses are well-grounded in the existing literature (discussed in sections 2-4 of this paper), drawing on a robust body of theoretical and empirical studies that validate their relevance and significance. For instance, numerous studies have demonstrated the critical role of color in enhancing usability and user satisfaction, which directly supports our hypotheses on the impact of color on user experience. Additionally, the practical applications of these hypotheses are evident in various domains, such as improving interface design in software and web development, optimizing user interactions in digital platforms, and informing best practices in human-computer interaction. These commercial application areas not only underscore the theoretical importance of our hypotheses but also highlight their potential to drive meaningful advancements in both academic research and industry practices.
5.1. Experimental Approach
This study will determine what styles should be applied to websites to increase browsing time based on HCI theory and color psychology principles. A prototype website was then created to use experimentally to test the impact of color on a range of users.
This study aims to create guidelines for designers to understand color choices and better achieve commercial goals and help set a foundation for future color research applying color psychology to website design.
This study utilizes a quantitative research method to collect a range of data, focusing on how long a user can spend browsing a website in dark mode compared to light mode. The experiment also collected metrics on the number of times participants reread the information presented and the number of words spoken (based on colored text hidden within the page). The aim was to use this data to determine which colors encourage user interaction.
5.2. Data Collection
To achieve significance in the statistical analysis, the experiment required a participant sample size with a minimum of twenty users equally spread throughout each age group. The experimental hypothesis proposed that dark mode with a teal shade of blue would induce the most extended browsing times. A user survey regarding dark mode was used to understand each participant’s current dark mode usage and to gain insights into the decisions they made when they chose to opt-in or opt-out of dark mode before the main experiment.
A survey was sent to all participants via a Google Form to collect data from a range of age groups based on convenience sampling. The information collected encompassed multiple demographic metrics, including age range, gender, personality type, social media platforms, phone operating system, and general questions about dark mode usage. Data on demographics and psychographics were collected using multiple choice questions, while the general questions on usage preferences were recorded on a 5-point Likert scale. The goal was to attempt to formulate a trend based on similarities within this specific group of users.
The participants then browsed a prototype website (built with Figma) in various dark and light mode color schemes featuring twenty-five paragraphs of Lorem Ipsum text in size 25pt Roboto font. Hidden throughout the text are the names of random animals, the participants were asked to speak out loud and name the animal they find. Table 1 includes the ninety animal names used in the experiment.
On each prototype screen the participants saw during the experiment, an accent color was highlighted on each paragraph at the bottom. The participant could then choose to either continue browsing or reread the last paragraph.
At the end of each page, the participant had two options:
The participants browsed the pages in a random order, Table 2 represents an example of a random set of browsed pages. In addition, each webpage mockup was uniquely sorted and randomized to reduce the participant’s memory for locating animal names throughout the pages.
The data collected during the experiment included:
The number of animal names spoken per paragraph and per page.
The number of paragraphs and page rereads.
The time spent on each paragraph and page.
After the experiment, the participants conclude with a post-session interview. The interview was based on a series of questions created to help capture each participant’s thoughts and opinions of the different color combinations.
5.3. Validity
The experimental method was selected based on the existing literature in the field.
Table 1. The ninety animal names participants had to identify in the experiment.
Fox |
Centipede |
Turkey |
Otter |
Elk |
Chinchilla |
Seal |
Badger |
Possum |
Walrus |
Hyena |
Squirrel |
Wolf |
Zebra |
Chicken |
Crocodile |
Gecko |
Meerkat |
Raccoon |
Quail |
Turtle |
Eel |
Iguana |
Monkey |
Yak |
Ferret |
Aardvark |
Beaver |
Guppy |
Snake |
Lemur |
Seahorse |
Vulture |
Jaguar |
Giraffe |
Elephant |
Camel |
Mule |
Scorpion |
Peacock |
Hamster |
Deer |
Kangaroo |
Gorilla |
Antelope |
Caribou |
Goose |
Koala |
Octopus |
Sheep |
Wasp |
Panther |
Lobster |
Goat |
Llama |
Mole |
Reindeer |
Pig |
Manatee |
Ostrich |
Squid |
Sloth |
Boar |
Penguin |
Lion |
Toucan |
Platypus |
Cougar |
Ant |
Jackal |
Lizard |
Pelican |
Rabbit |
Rat |
Mouse |
Mink |
Slug |
Salmon |
Bear |
Frog |
Eagle |
Donkey |
Duck |
Flamingo |
Moth |
Puma |
Squid |
Dog |
Tortoise |
Cat |
Table 2. An example of the colors in a set of randomized prototype webpages.
Black background (control) |
White text |
White background (control) |
Black text |
Dark gray background |
Light gray text |
Light gray background |
Black text |
Navy blue background |
Pale yellow text |
Light blue background |
Dark teal text |
Teal background |
Pale yellow text |
Yellowish-gray |
Dark teal text |
Independent research for dark mode, popular web colors, psychology of color, and UX/UI principles previously studied provided valuable related data and conclusions.
Missing from the field is the study of these aspects in combination with each other. Furthermore, since personal preference determines many color decisions, any experimental results must be compared to the participant’s preferred color mode for digital interfaces. Users are more likely to spend time on a website if it is aesthetically pleasing to them.
The decision to use a scavenger hunt in the fake text as an experimental task was based on the speed of selection, compared to having the participants browse through pictures. This reduces the test duration, and in hence also decreases eyestrain during the experiment.
It is hoped that this research creates a theoretical foundation allowing future experiments to use imagery; this is vital due to the prevalence of picture-sharing social media sites such as Instagram and Pinterest.
6. Experimental Results
The following section describes the results of the experimental study to test how color can increase browsing time on websites. This research aims to understand how preference, trends, and color impact user outcomes by applying psychological principles to influence the user experience.
It is hoped that the survey results will clarify dark mode preference among varying demographics, while additionally providing insight into how users respond to color trends based on preferences and color psychology. Lastly, the experiment will determine if color increases the time spent browsing websites, and specifically which color(s) achieve that goal.
6.1. Demographic Metrics
The results from the survey will be used to analyze whether demographics play a role in the participant’s dark or light mode preference. The study consisted of 32 participants, evenly split in gender, with ages ranging from 18 - 74.
Unlike most other research in the field, information on the participant’s personality type was collected. This data showed that 53% of the participant cohort identified themselves as introverts. The personality type attribute was viewed as a primary classification variable for the participants in the data analysis.
6.2. Dark Mode Preference
A preliminary questionnaire was distributed to the study participants to understand people’s assumptions and attitudes towards dark mode, light mode, and colors. The survey gauged the opinions for dark mode versus light mode for digital technologies.
Most of the participants liked dark mode, with only a single response suggesting they did not prefer dark mode, yet did not dislike it. However, 81% of participants expressed indifference towards light mode, or reported that they did not like.
Personality types played a non-important role for those reporting as males. Figure 1 shows that dark mode was overwhelmingly preferred by males (with 5 being strongly liking dark mode and 1 being strongly disliking dark mode). A large percentage of males strongly liked dark mode (75%) and the remaining 25% still liked dark mode. These figures compare to 50% of those reporting as female strongly liking dark mode and 19% liking dark mode. The collected data indicates that those who identified as both female and introverted were 100% supportive of light mode compared to only 29% of extroverted females.
All of the participants who were aged 45 and over based their dark mode preference and usage on other human influences in their lives, such as children. These
Figure 1. Dark mode preference classified by reported gender.
participants were heavy dark mode users. Most of these older participants reported the first dark mode usage as early as 2016; usage picked up drastically in 2019 and 100% of these participants were using some form of dark mode by 2020.
The survey gained information about people’s understanding of dark mode to help understand why the participants were using it. The responses from participants replicated the results of many previous research findings (Sheppard & Wolffsohn, 2018; Kim et al., 2019; Eisfeld & Kristallovich, 2020; Dash & Hu, 2021).
Compellingly, 50% of participants mentioned eyestrain, commenting that light mode causes eyestrain and dark mode is better for their eyes and reduces eyestrain. Other noteworthy benefits of dark mode that some participants mentioned (22%) were related to battery and screen health. A number of participants (41%) mentioned that dark modes were a current trend and hence popular.
The majority of the participants did not want the digital platforms they use to only be in light mode only. However, many participants also stated that they did not want to see productivity applications in dark mode only. Other responses indicated that some participants associated light mode with professionalism, work, and school-related activities (some related this to real-world paper).
6.3. Color Trends and Personal Preference
The survey revealed the participant’s preference for various interests, such as social media, operating systems, seasons, and colors. This data was used to determine if there is a correlation between their preferences and how they interact with technology.
Figure 2 and Figure 3 show the percentage of participants for mobile and computer operating systems. Android users liked and strongly liked dark mode more than all other groups at 91%. Mac users were the second-largest dark mode supporters at 81%.
Those participants who favored Autumn and Winter seasons preferred dark mode 100% of the time. These same participants also favored darker hours of the day, such as dawn, dusk, and nighttime. 87% of those who favored brighter hours of the day had a positive attitude towards light mode, and 88% of those participants also favored Spring and Summer seasons.
Figure 2. Percentage of iOS vs. Android users among the participants.
Figure 3. Percentage of macOS vs. Windows users among the participants.
Shades of blue were the favorite colors of 72% of participants, and 97% of participants either said a shade of blue is their most worn, most purchase, favorite, or second favorite color.
All of the participants who choose black as a favorite color always used dark mode when it was available. Conversely, 90% of those who choose white as their favorite color rated light mode the highest compared to other participants.
Both extroverts and introverts selected black and blue as favorite colors with equal frequency in the survey. However, extroverts tended to responded better to bright accent colors, while introverts responded positively to pale and light colors on dark mode pages.
Yellow and orange were the least liked colors, with 56% and 28% selected as the least favorite color of the participants, respectively. Only five of the participants selected green, purple, and pink as other least liked colors, but those responses had some signs being dependent on gender.
6.4. Time Spent Browsing
The participants could spend as little or as long on a page as they deemed necessary to find the animal names hidden throughout the text. The data in Table 3 shows the average time spent on each prototyped webpage. The individual webpages are identified by their background color.
During the experiment, while participants were reading each block of text, they could choose to go back to browse a paragraph or the whole page again or continue to the next page. The total average time in Table 3 includes any additional time spent re-reading paragraphs or pages.
Table 3. Average time spent browsing on each webpage, with varying background colors.
Page color |
Time on page |
Black (control) |
9 minutes 11 seconds |
Dark Gray |
5 minutes 0 seconds |
Navy Blue |
4 minutes 47 seconds |
Teal |
9 minutes 30 seconds |
White (control) |
5 minutes 35 seconds |
Light Gray |
4 minutes 54 seconds |
Light Blue |
9 minutes 48 seconds |
Yellowish-Gray |
6 minutes 5 seconds |
Figure 4. Percentage of macOS vs. Windows users among the participants
Figure 4 shows the results of an independent t-test that demonstrates the overall average time and number of animals spoken for both the dark and light mode pages. The data illustrates a difference of less than 1 minute for the overall time spent browsing the pages. However, there is a more significant difference in the number of participants who successfully completed the activity between the light and dark modes.
6.5. Accent Colors
The average number of animals names found by participants during the experimental sessions, and the average time spent on a page were evaluated by independent t-tests. These tests compared each accent color to blue. The results of this analysis are shown in Figure 5.
The longest time spent on a page, based on accent colors, were blue, purple, red, green, pink, orange, and yellow, respectively. Moreover, the most animal names spoken out loud by the participants were when the colors were ranked from blue, red, green, orange, purple, pink, to yellow. The accent colors included various shades and tones across light and dark mode pages.
Figure 5. T-test results for time and animal names spoken, compared by various accent colors.
6.6. Correlated Results
The goal of the experiment was to increase browsing time on websites. Figure 6 illustrates the average number of animal names spoken out loud by the participants compared to the average time spent on each prototyped webpage.
The navy-blue page had the least time spent on the page at 4 minutes and 47 seconds. The participants found an average of 44 animals, and it only took an average of 6.5 seconds for each animal, which is the shortest time per animal found.
During post experiment interviews, all of the participants said that the white page was their least favorite.
Participants spent an average of 5 minutes and 35 seconds on the webpage, and found an average of 34 animal names. The participants spent an average of 10 seconds to find each animal name.
The participants took the longest time (without asking to re-read the page) to find the animal names on the yellowish-gray page. They each averaged 13.5 seconds per animal on this page. They found an average of 27 animal names and
Figure 6. Average number of animal names found compared to average time spent on page.
spent 6 minutes and 5 seconds on this page.
The most time spent on a page was 9 minutes and 48 seconds on the light blue page. This page also had the least amount of animals found, only averaging 26 animal names. The participants repeatedly browsed this page, and they spent an average of 22.5 seconds to find each animal name.
The most animals found were on the teal webpage, with an average of 64 animal names found. The average time on the page was 9 minutes and 30 seconds, and the participants averaged 8.9 seconds to find each animal name. In the post-experiment interview, all of the participants stated that the teal page was the easiest, hurt their eyes the least, and was their favorite page to browse.
7. Data Analysis
Based on the participant’s preference for light or dark mode, either the white on black or black on white page acted as the control variable. The results shown in the graphs in the previous section illustrate the time spent correlates well with the number of animal names spoken.
The data collected was analyzed using independent t-tests to determine if the time spent on the page increased based on background and accent colors; this was based on an analysis of the number of hidden animal names found in the text on the page. The aim was to discover color combinations that reduce errors and increase readability, and hence affects the time spent on the page. This demonstrates the importance of this study, since if users can optimize their experience on a website, they are more likely to spend longer on the page due to reduced frustration.
7.1. Dark Mode
The research gathered during this study supported the previous experimental results of other researchers in the field (Sheppard & Wolffsohn, 2018; Kim et al., 2019; Eisfeld & Kristallovich, 2020; Dash & Hu, 2021). These researchers also found that their users preferred dark mode both for the tangible usability benefits and because current trends had led to it being more popular.
Dark mode was available on Android devices much earlier than on iOS. The data collected revealed that Android users were generally more outspoken about their desire for dark modes on their devices and apps. These participants stated that their preference for dark mode was primarily due to usability and device benefits, such as reducing eye strain and increasing battery life. Many of these participants stated that they had personally experienced a reduction in eyestrain.
In contrast, many participants who used iOS based devices revealed that they opt for dark mode solely because they believe it is “trendy”, or they had heard “dark mode is better”. Therefore, it is a reasonable prediction to make that dark mode’s popularity could diminish as time progresses.
Another point to note is multiple comments made by experimental participants about productivity applications. The reason for this, was the association many participants had with Microsoft’s release of dark mode for their products. The release applied the default computer setting to all Microsoft applications on their Windows devices. This often involved a dark gray color being used to signify the paper, matrix, and slides by default.
This update happened a few months prior to the experiment taking place, which made the comments particularly significant and important to many participants. Users have an association with any digital representation paper to use the color white, and the participants did not like the change to a dark gray color. Once again this highlights the importance of color psychology in interface design.
Device preference had a strong correlation to the responses of the participants. Analysis of the data showed that most Android owners preference for dark mode is influenced by feelings or sentiments that “Android had it first”. This also translates into a feeling that these users are more “tech-savvy”, supporting a sense of pride.
Similarly, iOS users tend to strongly support Apple’s UI choices. While none of the iOS using participants hated dark mode, only participants with less technical knowledge tended to not care, or not to form an opinion, about dark mode.
None of the participants reported that they use dark mode because they are actively attempting to increase their battery life or that they have a difficult time with light mode. Although dark mode may be a trend, it is a trend that has widespread adoption and delivers significant benefits to users and devices.
7.2. Color Preferences
Previous research has repeatedly demonstrated that people respond to color preference; in reality, most of the preference is generally towards the same color.
Within this experiment, the participants overwhelmingly responded positively towards the color blue. This analysis captured both the background color and accent color implementations. In contrast, there was a distinct animosity from participants towards the color yellow. More research is required to better understand why the majority of users favor blue and dislike yellow within digital interface; in particular experimentation involving different hues and tones within these specific color palettes.
The participants not only preferred blue colors in the prototype interfaces, but they also reported higher numbers of animal names found in shorter times with this color. Participants not only disliked the yellow prototype interfaces, but they also reported lower numbers of animal names found and took longer times to find them.
There were some correlations between other preferences reported by the participants, such as favorite season and time of day, towards preferred color. However, there was not enough data to demonstrate significant correlations with the other accent colors in the protype interfaces, except the blue and yellow ones.
7.3. Browsing Time
This experiment has demonstrated that color can promote longer browsing sessions on webpages. The recommended style guide established from analysis of the experimental data, is a dark mode teal color. This combination was found to reduce eyestrain among the participants and was also considered as noninvasive by the experimental participants.
The proposed style guide mode and color was reported to reduce eyestrain. These mode/color combinations also increased session time over the control and created the greatest number of animal names spoken by the participants during the experimental sessions.
However, the color teal did not generate the longest browsing time on individual prototype webpages. The light blue background had the participants browsing for an average of 18 seconds longer than the pages with a teal background. One possible explanation of this phenomena is that it could be due to the psychological association of this color productivity.
During the experiment, the participants were repeatedly presented with text-heavy webpages within the prototype. The light mode, light blue background page was the preferred option over the other light mode pages tested. Nonetheless, the page failed by the significantly reduced number of animal names found, which over time would induce frustration with the interface for users.
8. Conclusions
This paper described experiments which attempt to understand the importance of color psychology within HCI. This included an analysis of:
how companies utilize color theory,
user’s responses to color,
color trends,
current color usage on the web,
differences between dark and light modes,
and color’s role in browsing time.
Color was shown to be a vital asset because it sets a tone and creates a pleasurable viewing experience for the user. User’s opinions of colors may change based on short-term circumstances, mid-term trends, and long-term personal preferences. Blue was shown to be predominantly the most liked color with the most beneficial psychological functionalities. At the same time, yellow should not be considered for digital interfaces, but is often necessary due to branding and commercial limitations.
The research described in this paper explored the potential of user interface design to incorporate color psychology to increase the session length on webpages and promote browsing. Color psychology, color trends, and dark modes were used as variables within the experimental data analysis to formulate multiple hypotheses. The experimental results suggested that color, more particularly a teal-toned blue, can influence users to spend more time browsing on websites.
The experimental results also correlated with the results of previous research, demonstrating that dark mode has a number of usability benefits. The research indicates that dark mode should remain as an interface option, but it use is potentially debatably shifting, as it becomes less of a “recent” trend. Although it’s widespread adoption should mean that it will remain as an option on many digital interfaces.
The experiment also revealed how careful colors manipulation can achieve different commercial goals based on color psychology, potentially considerably improving the user experience.
A considerable disadvantage to using color in design occurs if the designer does not entirely understand the psychological correlation and impact of using a specific color. Ultimately, this emphasizes the importance of this field and the research required on this topic.
The experimental work described in this paper has demonstrated that color in digital interfaces is a critical aspect of user experience design, influencing both the aesthetic appeal and functional usability of software applications. The data agreed with previous work and showed that appropriate color contrast can enhance readability thereby reducing user error rates and significantly reducing eye strain and enhancing user comfort (Wright et al., 1997). Color coding was also shown to improve information retrieval times in complex interfaces and decrease task completion times (Pereira et al., 2022). These practical insights underscore the necessity of strategic color application in interface design, ensuring that digital products are not only visually engaging but also functionally efficient.
8.1. Experimental Limitations
The scope of the research and timeframe to test participants was necessarily restricted by practical constraints and this resulted in a few limitations for the study.
The experimental research described in this paper was conducted under the assumptions brought forth from the literature review of previous work in this field. These assumptions focused on the importance and prevalence of the color blue for both color psychology and color preference. Since the background colors tested were grayscale and blue hues, this meant that the possibility of a participant’s favorite color and the psychological impact of other colors was not considered as a circumstance of variation.
Blue was selected since it is a common favorite color, and it promotes productivity while still acting as a calming color. This was coupled with the assumption that warm tones decrease eye strain. The teal and yellowish-gray background colors were designed to imitate wearing yellow-toned blue light filtering glasses. Although some blue light glasses are clear, to replicate the reaction on a digital screen, the colors used yellow tones despite the general dislike of the color yellow.
Many commercial websites consist of white space, pictures, other media, and text. This experiment solely focused on promoting eyestrain through detectable text to shorten the duration of each individual participant’s testing session. By introducing other web components, users’ reactions and responses to the page may differ when the page contains more items than just textual elements.
Furthermore, current design trends in the field exhibit indications of modernization and minimalism, consequently creating a timeframe limitation on how relevant this research will remain, since light mode is more commonly associated with many of these “modern” design stylizations.
8.2. Future Work
The data from the study creates a foundation to support the use of dark mode and teal accented colors in digital interfaces to reduce eyestrain and improve the user experience. The study should be extended to include a wider spectrum of colors while still focusing on colors that have a warmer tone (such as teal). The prototype webpages used in the experiment should also be created using a wider range of media (images, video, etc.) to more realistically represent commercial websites.
Any further research should also include A/B testing of slight color variants, providing insight into real-world website applications and pinpointing if an exact color code value can universally serve as an adjustment rate among hues.
This study did report any significant differences in color preferences between personality types. In future experiments, personality types could be studied in greater depth and correlated with color perception and association as observed in response to the page’s accent colors. Thus, a different perspective on color would potentially be provided.
Design and interface trends are constantly changing; hence, perhaps including a focus on UI designers’ opinions of dark mode adoption and color schemes would be of value in any future experimentation in this field.
The research and analysis described in this paper add to HCI and UX/UI knowledge for color utilization on websites. The work also provides a strong foundation for future user experimentation with color schemes. However, ultimately more research is required to create a comprehensive style guide for increasing user retention and extending browsing times on websites.