The Effect of Icon Color Combinations in Information Interfaces on Task Performance under Varying Levels of Cognitive Load

Abstract

In human–computer interaction interfaces, icons serve as highly symbolic elements that convey information and significantly influence the performance of visual search and other tasks. Thus, the selection of appropriate colors plays a crucial role in the design of human–computer interfaces. This study aimed to investigate the effects of icon color combinations on human visual search task performance across various cognitive load conditions. The experiment was divided into two parts, involving a cognitive load test experiment and an icon search task, wherein the former required participants to select the target icon from 16 de-colored icons, and the latter involved selecting the target icon from 16 color combinations of 8 colors (background colors: black, red, blue, and purple; foreground colors: white, yellow, green, and turquoise). A total of 20 participants (11 females and 9 males, all aged between 18 and 24 years) were recruited for this experiment to perform both tasks sequentially. Through a comprehensive consideration of factors such as the NASA-TLX scale, retrieval time, etc., the experimental results revealed that cognitive load increased with time pressure, resulting in varying optimal color combinations for different cognitive load levels. Additionally, background colors did not affect task response time under different cognitive loads, whereas white foreground color was superior to turquoise foreground color in a medium cognitive load environment. Meanwhile, our results recommend prioritizing white-on-black as the preferred color combination, given that it demonstrated excellent cognitive performance in all three cognitive load environments. Conversely, white-on-blue is not recommended as a color combination for the design of high cognitive load environments. Concerning medium cognitive load environments, yellow-on-red or white-on-purple color combinations were preferred. Finally, in low cognitive load environments, white-on-purple is recommended as the primary color combination. Overall, this study provides a theoretical reference for the future design of interactive interface icons across various contexts.

1. Introduction

With the rapid development of technology and the continuous advancement of society, human–computer interaction (HCI) has emerged as an indispensable facet of daily existence. Across domains including manufacturing, education, and entertainment, the execution of diverse tasks hinges upon the effective interaction between humans and computer systems. From a structural standpoint, the human–computer interaction interface functions as the terminus of information systems, with the manner in which information is presented directly impacting users’ interactive experiences and task efficiency [1]. An imbalance between the design of information interfaces and the user’s cognitive mechanisms often leads to serious safety issues [2], and when control panel interfaces within a manufacturing facility are meticulously crafted, it enables operatives to swiftly discern and react to issues, consequently amplifying production efficiency and mitigating the occurrence of accidents [3].

In information interfaces, icons are characterized by their prominence and high degree of symbolism, which facilitates the condensation of information as well as the user’s memory and recognition. Icons typically present a large amount of information and exert a significant impact on the usability and ease of use of the information interface [4]. Design is an important research direction in HCI and a key link to information interface design. Indeed, effective design enhances users’ comprehension and operation of the information interface, thereby maximizing the efficiency and effectiveness of user interaction [5].

The color of icons or text on an information interface exerts a significant impact on the presentation and communication of its visual information, and appropriate color choices have a significant effect on achieving superior task performance. Hence, in practical interaction design work, individuals select different colors based on specific needs. For instance, Kawasaki and Sasaki evaluated the color preferences of different age groups for text displayed on visual terminals [6]. In a typical information interface, the color of an icon or text generally does not appear alone as a single color but is presented in the form of a combination of a background color and foreground color. At the same time, Li et al. explored the gender preference for color combinations in digital interfaces [7]. Shiraiwa et al. analyzed the eye-catching and readability of text on LED message boards under distinct color combinations, lighting conditions, and shadow effects [8]. Guo et al. investigated the effect of five factors, such as text color and background texture, on the recognition efficiency and legibility of digital text and described that the green/black combination exhibited superior legibility and recognition efficiency in light background and dark text combinations [9]. Wang and Tao examined the effects of different color combinations on the task performance of the search task conducted in different vibration environments and documented that negative polarity color combinations should be used in the interface design of different vibration environments [10]. Huang and Chiu concluded that among the graphic/icon background color combinations, the color combinations of white/yellow, white/blue, black/red, and black/yellow are more effective [11]. According to Huang, color combinations significantly affect visual search performance, and among graphic/background color combinations, the white/yellow and white/blue combinations yielded higher performance than the black/blue and black/yellow combinations [12]. In another study focusing on the symbol/background color combinations of icons, black/blue and white/blue combinations were associated with a greater search error rate than black/red and white/blue combinations [13]. Ming et al. pointed out that yellow-on-black, yellow-on-blue, and white-on-blue backgrounds are the three clearest color combinations that can significantly improve the speed of visual search [14]. Furthermore, Bhattacharyya et al. recommended the use of blue and red characters on a white background for dark character/light background combinations and white characters on blue and green backgrounds for light character/dark background combinations [15]. Shen et al. selected and examined the combinations of four foreground colors and four background colors and noted that in the design of icons for information interfaces, the use of six color schemes, namely white-with-black, yellow-with-black, turquoise-with-black, white-with-red, yellow-with-red, and white-with-purple, enhances icon search performance [16].

In summary, several studies have investigated the color of icons or text in digital interfaces, covering the subjective preference of individuals for color based on age, gender, etc., as well as the objective readability of text or icons with different color combinations. However, in practical interface design, the appropriate color of icons in the interface under different cognitive load scenarios is usually considered.

In human–computer interaction-related research, the cognitive load of a task is an important concept, which is defined as the total amount of mental activity exerted on the cognitive system during task processing [17]. The cognitive load of different tasks usually varies, with tasks with larger cognitive loads requiring more mental activities such as attention, memory, judgment, and decision-making, whereas tasks with smaller cognitive loads are relatively simple and easy. For example, operations in high-stress environments such as military tasks entail high cognitive demands owing to their complexity. On the contrary, tasks such as phone bill recharging involve relatively low cognitive load. Cognitive load can arise from various factors, such as task form and complexity, time constraints, the uncertainty of outcomes, etc., each exerting different effects on human cognitive processes and task performance [18]; for example, too much time pressure may increase an individual’s cognitive load to the point of decreasing task performance [19], while too little cognitive load can lead to diminished feelings of stress and drive [20]. As is well documented, excessive cognitive load limits an individual’s attentional focus and task efficiency, thus impairing task performance. On the other hand, appropriate cognitive load enhances attention and efficiency, thus contributing to task completion [17]. The influence of cognitive load is complex. Empirical studies generally streamline the environment and the task to influence cognitive load only in specific ways. For instance, adjusting time pressure is a commonly employed method [21,22]. Previous studies have investigated the effect of color on cognitive load under various conditions. For example, Chen et al. examined the color of escape signs in the Zijingshan subway station and demonstrated that green and black colors lower cognitive loads and thus improve people’s search efficiency [23]. Qi et al. argued that cognitive load is not affected by the color and harmonicity of the dashboard [24]. Fukuzumi assessed the effect of color combination patterns on mental load in computer work [25]. Zhou et al. investigated the effect of news text font style and font color on the cognitive load of intelligent user interfaces, and their results exposed that red keyword text significantly decreases readers’ cognitive load under high introduced cognitive load, which in turn improves the efficiency of news reading [26]. Multiple studies have evinced that the red color affects task performance by impacting cognitive load [27]. Mehta and Zhu’s study performed a series of experiments from six perspectives and suggested that color selection should be based on the nature of the cognitive task. The color red should be chosen for cognitive tasks demanding vigilance, such as memorizing important information, given that it stimulates arousal. In contrast, they recommend the color blue, which stimulates creativity, when the cognitive task requires imagination and creativity [28]. Xia et al. similarly demonstrated through their research that the type and difficulty of the task together moderated the effect of color on cognitive performance [29]. However, Timo’s study of the effect of color on cognitive load in the context of learning did not delineate the effect of red on cognitive load. Taken together, the color red may affect cognitive performance beyond solely increasing cognitive load [30].

Prior researchers have extensively explored the role of color in interface design. They have investigated various external factors such as age and gender preferences for colors and delved into the performance of colors under diverse lighting and vibrational conditions. Furthermore, they have scrutinized the impact of different colors and color combinations on user search efficiency and recognition effectiveness. The selection of colors in interface design profoundly influences information representation and communication. Research has underscored that colors can sway users’ emotions and cognitive processes, thereby impacting task execution. Nevertheless, existing studies primarily concentrate on the influence of icon shapes, colors, brightness, and contrast on task outcomes, largely overlooking the optimal selection of interface icon color combinations under varying cognitive load conditions. Given that cognitive load varies across different usage scenarios, investigating color performance in disparate cognitive load contexts becomes imperative.

This study aimed to explore the relationship between color combinations and cognitive performance under different cognitive load conditions based on cognitive load theory, using controlled time pressure to integrate the icon search task. The research objectives of this experiment were as follows:

• Validating the effect of time pressure on human cognitive load;
• Exploring the optimal color combinations of interface icons under different cognitive load states.

2. Methods

This experiment was divided into two parts, namely a cognitive load test and an icon search task. Participants initially performed the cognitive load test, followed by a ten-minute break after the experiment before proceeding to the icon search task. The participants and the environment of the two experiments remained consistent, with variations in the specific design of the experiments.

2.1. Participants

A total of 20 Chinese participants (9 males and 11 females) were included in this study. All participants were adults aged between 18 and 24 years (mean = 20.44, standard deviation [SD] = 1.43) with normal or corrected vision and no color blindness or color deficiency. Prior to the initiation of the experiment, the participants received a detailed explanation of the research objectives and specific experimental protocol. Each participant received a prize prepared by the experimenter upon completion of the experiment.

2.2. Equipment and Experimental Environment

All experiments were conducted in the same experimental environment with standard lighting conditions. Room temperature and relative humidity were maintained at around 18 °C and 50%, respectively, as measured by a hygrometer (Nanyang, China). The patients were seated at a horizontal distance of approximately 45 cm from the screen, in accordance with established human size standards in China. The equipment used in the experiments comprised a 16-inch TFT-LCD monitor (AUOC99E, AUO, Taiwan, China) with a resolution of 1920 × 1200 and a refresh rate of 60 Hz. The design of the experiments and data logging were performed using E-Prime 3.0 software.

2.3. Experimental Design

2.3.1. Cognitive Load Test

(a)

Experimental principles

The amount of time pressure usually influences the cognitive load of a person. This experiment referred to the time pressure setting in Endsley’s experiment and made experiments and adjustments based on it. In this experiment, time pressure was defined as either high, medium, or low time, corresponding to time limits of 2000 ms, 4000 ms, and no time limit. Participants were instructed to respond as fast and accurately as possible to determine the effect of time pressure on cognitive load based on participants’ performance across the three conditions.

(b)

Experimental materials

Figure 1 illustrates the 16 icons (.png format, resolution 128 × 128 pixels) designed for this experiment, representing four different smartphone interface base icons (weather, time, file, and homepage) and their respective up–down, left–right, up–down, and left–right flip states. To mitigate the influence of other factors, all the icons in this experiment were de-colored, and shape factors, such as icon composition, were kept constant.

(c)

Experimental Procedures

This experiment comprised a visual search task. Prior to the start of the experiment, subjects were instructed to familiarize themselves with the semantic meanings of the relevant icons and then underwent 16 unrecorded training experiments (the training experiments could be repeated if subjects felt they had not fully mastered them).

Following the training phase, each subject was required to complete three rounds (high, medium, and low time pressures) of the formal experiment for a total of 240 sessions (16 × 5 × 3). The order of the experimental rounds remained consistent, and participants performed the three rounds in the order of high–moderate–low time pressure. Upon completion of each round, the participants were asked to complete the NASA-TLX Cognitive Load Scale to determine their cognitive load levels corresponding to the different time pressure conditions.

At the beginning of each experiment, an attention point was presented at the center of the screen for 500 ms, followed by the appearance of a random target icon at the location of the attention point for 1000 ms. Participants were instructed to memorize the shape, front, and back views, and other design features of the target icon. After the icon was presented, the gaze point reappeared for 500 ms, after which participants were required to identify the target icon among the 16 alternatives (including 15 distractor icons and 1 target icon) that appeared on the screen and move the cursor to click on the target icon. The arrangement of icons was based on the method used in Huang’s study, i.e., the 16 icons were evenly distributed around the center of the screen in a circular stimulus array, and their order and position were determined by a random number generated by the pseudo-random algorithm.

Participants were instructed to make their choices within the designated time frame. In order to strengthen the sense of time pressure, a countdown timer was placed in the upper left corner of the screen, displaying either 2 s, 4 s, or no countdown, accompanied by a clock ticking sound. After participants made their choice, the icon and the countdown disappeared, and the ticking sound ceased. The screen provided feedback on the correctness of the choice, response time, and average accuracy rate for the round. Upon completion of all 80 search tasks in the round, participants proceeded to the next round, starting with another set of 80 search tasks under either medium or low time pressure conditions. The flowchart of this experiment is illustrated in Figure 2.

(d)

Experimental reference indicators

The NASA-TLX scale filled out by the participants after each round was used as a reference index in this experiment. The scale was adapted according to the characteristics of this experiment and encompassed four dimensions, namely, cerebral demand, effort procedure, time demand, and degree of frustration. The total cognitive load score was obtained from the standard calculation procedure applied to these dimensions. The data were then analyzed via paired-sample t-analysis.

2.3.2. Icon Search Task

(a)

Experimental principles

The design of this experiment for time pressure was identical to the cognitive load test. The objective was to identify appropriate color combinations for different time pressures by observing the participants’ performance across the three situations.

(b)

Experimental materials

In this experiment, the four base icons representing “weather” states from the cognitive load test were utilized based on the method of color selection outlined in Ko’s study [31]. Briefly, the following colors were selected in the Commission Internationale de l’Eclairage (2008) (CIE) coordinate triangle: red (R), green (G), blue (B), yellow (R and G), turquoise (G and B), and purple (R and B), as well as two non-colored colors, black and white. Next, four colors with significantly lower brightness, namely black, red, blue, and purple, were selected as background colors, whilst four colors with higher brightness, white, yellow, green, and turquoise, were adopted as foreground colors based on Shen et al.’s experiments [16] to form 16 different color combinations.

Considering that CIE L*a*b* (CIELAB) space is the most used uniform color coordinate system when it comes to complex stimulus (image) analyses [32], the CIE coordinates of the aforementioned colors were converted into LAB values. The LAB parameters corresponding to all the colors in this experiment are detailed in

Table 1. All colors used in the icon search task.

Colors	CIE (a, b, L)
	a	b	L
Background
Black	−2	−7	26
Red	49	38	26
Blue	65	−106	26
Purple	53	−46	26
Foreground
White	−4	−16	77
Yellow	−23	75	77
Green	−71	73	77
Turquoise	−38	−26	77

. Figure 3 displays the 64 icons (.png format, with a resolution of 128 × 128 pixels) created for this experiment.

(c)

Experimental Procedures

The overall process and time pressure settings of this experiment were consistent with the cognitive load test. However, the 16 alternative icons for each round were randomly selected from the 64 colored icons as follows: a. The 64 icons were initially divided into a total of 16 color combinations, with each color combination appearing as a target icon five times (with the specific icon randomly selected). b. The sixteen icons included the target icon, one icon with the same background and foreground colors, four icons with the same background and foreground colors, six icons with matching background and foreground colors, and four icons with the same background but different foreground colors (as delineated in the upper panel of Figure 4).

(d)

Experimental reference indicators

In addition to recording the data from the NASA-TLX scale that participants filled out after each round (the scale and its analysis method were the same as the cognitive load test), this experiment also recorded the participants’ response times through the program built into the E-Prime software, and after excluding the response times when the choices were incorrect, the mean response times when the participants answered correctly were analyzed with an analysis of variance (ANOVA).

3. Results

3.1. Cognitive Load Test

The effect of three distinct time pressures, namely high, medium, and low, on cognitive load was analyzed using a paired sample t-test. As presented in

Table 2. Paired sample t-test results of the cognitive load scale of the cognitive load test.

	t	(Number of) Degrees of Freedom (Physics) (dof)	p-Value
High Cognitive load—Medium Cognitive load	5.002	19	0.000
Medium Cognitive load—low Cognitive load	2.585	19	0.018
Low Cognitive load—High Cognitive load	−4.765	19	0.000

, the subjective mental load scale completed by the participants showed that their cognitive load was significantly altered in response to changes in time pressure. As anticipated, a decrease in time pressure yielded a decrease in cognitive load perceived by the participants. The data distribution of the scale is exhibited in Figure 4.

3.2. Icon Search Task

Table 3. Mean and standard deviation of response times of independent variables at high time pressure levels.

Variables	Number of Trials	Response Time		95% Confidence Interval (CL)
		Mean	SD	Upper Confidence Limit (UCL)	Lower Confidence Limit (LCL)
Background color	1600	1793	760	1876	1709
Black	400	1806	667	1953	1660
Red	400	1622	420	1714	1530
Blue	400	1896	1135	2145	1648
Purple	400	1846	613	1980	1711
Foreground color	1600	1793	760	1876	1709
White	400	1722	1035	1950	1495
Yellow	400	1822	758	1988	1656
Green	400	1821	592	1951	1692
Turquoise	400	1805	564	1928	1681

,

Table 4. Mean and standard deviation of the response time of the independent variables at medium time pressure levels.

Variables	Number of Trials	Response Time		95% CL
		Mean	SD	UCL	LCL
Background color	1600	1791	583	1680	1732
Black	400	1747	543	1888	1650
Red	400	1746	633	1885	1607
Blue	400	1850	604	1982	1717
Purple	400	1820	552	1941	1699
Foreground color	1600	1791	583	1680	1732
White	400	1618	454	1718	1519
Yellow	400	1851	674	2021	1725
Green	400	1796	514	1909	1684
Turquoise	400	1898	632	2036	1759

and

Table 5. Mean and standard deviation of response times of independent variables at low time pressure levels.

Variables	Number of Trials	Response Time		95% CL
		Mean	SD	UCL	LCL
Background color	1600	1866	751	1949	1784
Black	400	1844	846	2029	1659
Red	400	1765	546	1885	1646
Blue	400	1932	753	2097	1767
Purple	400	1924	822	2104	1744
Foreground color	1600	1866	751	1949	1784
White	400	1685	554	1806	1563
Yellow	400	1879	508	1990	1767
Green	400	1999	1074	2234	1763
Turquoise	400	1904	710	2059	1748

summarize the mean and standard deviation of the response times of the independent variables across different levels of time pressure. Each variable consisted of four levels, with each level composed of 400 trials, resulting in a total of 4800 trials. During the analysis, only response time (RT) for correct selections was considered.

The results revealed that the background color of the different time icons exerted no significant effect on response time, a finding consistent with that of previous research [16]. Task performance was significantly superior with the white foreground color compared with the turquoise foreground color under medium time pressure conditions (p = 0.023). Lastly, foreground color did not show a significant effect on RT under the remaining time pressure conditions.

The analysis for different color combinations demonstrated that the best-performing color combinations varied across cognitive loads, as presented in Figure 5, Figure 6 and Figure 7.

Interestingly, the response times for the color combinations using white-on-black icons were significantly better than the remaining five color combinations, namely yellow-on-black (p = 0.049), turquoise-on-black (p = 0.03), yellow-on-blue (p = 0.026), green-on-purple (p = 0.034), and white-on-blue (p = 0.001). In addition, the response times for the color combinations using yellow-on-red icons were significantly better than the other color combinations, namely white-on-blue (p = 0.002), yellow-on-blue (p = 0.044), turquoise-on-blue (p = 0.005), white-on-purple (p = 0.013), and white-on-red (p = 0.007). Finally, the response time for the color combination green-on-red was significantly better than that for white-on-blue (p = 0.009);

Under medium cognitive load conditions, the response time of the color combination using white-on-red icons was significantly better than the remaining five color combinations, which were turquoise-on-black (p = 0.015), turquoise-on-red (p = 0.025), yellow-on-blue (p = 0.004), green-on-purple (p = 0.049), and turquoise-on-purple (p = 0.019). Likewise, the response time of the color combination featuring white-on-black icons was significantly better than the remaining four color combinations, namely turquoise-on-black (p = 0.016), turquoise-on-red (p = 0.027), yellow-on-blue (p = 0.004), and turquoise-on-purple (p = 0.020). Moreover, the response time of the color combination using white-on-purple icons was significantly better than the other four color combinations, which were turquoise-on-black (p = 0.016), turquoise-on-red (p = 0.028), yellow-on-blue (p = 0.004), and turquoise-on-purple (p = 0.021). The response time of green-on-black icons was significantly better than that of yellow-on-blue (p = 0.029), the response time of yellow-on-red icons was significantly better than that of yellow-on-blue (p = 0.026), and the response time of turquoise-on-blue icons was significantly better than that of blue-and-yellow (p = 0.041);

Under low cognitive load conditions, the response time for the color combination featuring white-on-black icons was significantly better than the other four color combinations: turquoise-on-black (p = 0.031), green-on-blue (p = 0.007), green-on-purple (p = 0.015), and turquoise-on-purple (p = 0.015). Similarly, the response time for the color combination of white-on-purple icons was significantly better than the other four color combinations: turquoise-on-black (p = 0.034), green-on-blue (p = 0.008), green-on-purple (p = 0.016), and turquoise-on-purple (p = 0.017). The response time of the color combination featuring turquoise-on-blue icons was significantly better than that featuring green-on-blue icons (p = 0.048).

4. Discussion

4.1. Cognitive Load Test

This experiment validated previous findings [16,19] that participants experience higher cognitive loads as time pressure increases. According to the NASA-TLX scale, cognitive load under high time pressure was significantly greater than that under medium time pressure (t(19) = 5.002, p = 0.000 < 0.05 = 1) and low time pressure (t(19) = 4.765, p = 0.000 < 0.01), while cognitive load scores under medium time pressure were significantly greater than those under low time pressure (t(19) = 2.585, p = 0.018 < 0.05). 0.001), and cognitive load scores were significantly greater under medium time pressure than under low time pressure (t(19) = 2.585, p = 0.018 < 0.05).

4.2. Icon Search Task

4.2.1. Background Color and Foreground Color

No significant differences in response times were observed between background colors at the three levels of cognitive load.

Conversely, among the foreground colors, significant differences were detected at the medium cognitive load level, with white foreground color displaying the shortest response time (mean = 1618, SD = 281), significantly outperforming the other three colors. Therefore, white may be considered the preferred foreground color when designing interfaces intended for medium cognitive load environments.

4.2.2. Color Combination

(a)

High Cognitive load

At high cognitive load levels, significant differences were identified between response times across the different color combinations. Of note, the response time for white-on-black icons was the shortest (mean = 1446, SD = 291) and significantly outperformed the other five color combinations. It is worthwhile emphasizing that the response time for yellow-on-red icons (mean = 1497, SD = 352) was also significantly lower than the other two color combinations.

Noteworthily, the white-on-blue color combination showed poorer response time levels, with significantly higher response times than the other six color combinations. Under high cognitive load environments, where participants have limited information processing capabilities, using clear and easily recognizable icons is pivotal. This finding is instructive for interface design in high cognitive load environments; for example, fighter pilots have a high cognitive load due to the large number of tasks they often undertake under unfavorable conditions [33], so white-on-black and yellow-on-red color combinations of icons are chosen for the design of fighter operator interfaces over white-on-blue icons. This recommendation also applies in other high cognitive load scenarios, such as medical surgeries [34] or medical devices.

(b)

Medium Cognitive load

Significant differences were also noted between response times between the different color combinations under medium cognitive load conditions. The response time for white-on-red icons (mean = 1537, SD = 368) was significantly better than the other five color combinations. Meanwhile, the response times for white-on-black (mean = 1542, SD = 450) and white-on-purple icons (mean = 1543, SD = 414) were superior to the other four color combinations. The yellow-on-blue color combination (mean = 2071, SD = 859), on the other hand, performed the poorest at the medium cognitive load level, with significantly longer response times compared to the other six color combinations. Therefore, white-on-red, white-on-black, and white-on-purple color combinations are recommended for interfaces for medium cognitive load environments, such as driving [35]. In contrast, the yellow-on-blue color combination should be avoided.

(c)

Low Cognitive load

At the low cognitive load level, the differences between different color combinations were smaller than at the high and medium cognitive load levels, which may be ascribed to the fact that participants had more attentional resources available for lower cognitive loads, allowing them to allocate resources more efficiently [36]. Even though some color combinations had lower performance, participants were able to respond and recognize them quickly. Notwithstanding, superior color combinations were identified in the low cognitive load condition, with the white-on-black (mean = 1523, SD = 435) and white-on-purple (mean = 1533, SD = 364) combinations having significantly lower response times than the other four different color combinations. Therefore, these color combinations are recommended for the design of interfaces for low cognitive load environments. Examples include interface design for videos, chat rooms, and interactive activities [37] when high school students are learning concepts in a Web-based environment.

5. Conclusions

This study investigated the performance of icon color combinations in interfaces using time pressure as an environmental variable based on cognitive load theory.

The cognitive load calibration experiment corroborated the results of a previous study, thereby confirming that the use of different time pressures can influence the cognitive load level of participants. Based on this observation, three different levels of cognitive load, i.e., high, medium, and low, were established to conduct an icon search experiment to explore the optimal choice of icon color combinations for varying levels of cognitive load.

Our findings confirmed that the choice of background color alone did not affect users’ cognitive performance across the three cognitive load environments. Nevertheless, the foreground color of white was superior to that of turquoise under medium cognitive load environments. Moreover, the experimental results demonstrated varying performance differences among different color combinations under different cognitive load environments, with the white-on-black color combination displaying outstanding performance under high cognitive load environments and the white-on-blue combination performing the poorest. In medium cognitive load environments, the white-on-red, white-on-black, and white-on-purple combinations showed excellent performance, whereas yellow-on-blue performed the poorest. In low cognitive load environments, white-on-black and white-on-purple had the best cognitive performance, with marginal differences between color combinations.

In summary, different scenarios should be considered during the design of interfaces. Designers typically prioritize white-on-black as the primary color choice owing to its favorable cognitive performance across all three cognitive load environments, and this conclusion is also in line with most of the previous research findings. White-on-purple can be considered in medium and low cognitive load environments. In high cognitive load environments, the white-on-blue color combination is not recommended, given that this combination may limit user cognitive performance. For medium cognitive load environments, the yellow-on-red combination can be considered.

The experimental results of this study offer valuable insights into interface design in different scenarios. Nonetheless, there were some limitations in this study; for example, the participants were all between 18 and 24 years old, and there may be cognitive differences across age groups, which may limit the generalizability of the findings. Then again, although different cognitive load conditions were set in the experiment, factors such as whether participants’ attention allocation and fatigue level were controlled may have affected the results. Further studies can focus on elucidating attention resource allocation, as well as explore the influence of brightness and contrast properties inherent to different colors.