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.