CREW Final Report
2001-2002

A Study of Optimal Color Combinations
for Web-based Interfaces

Student Researchers: Sarah E. Peterson & Leigh K. Lambert
Faculty Mentor: Barbara B. Owens
Southwestern University
Georgetown, TX 78626





Problem and Motivation

The usefulness of a web page is determined by the information it provides, its usability, and the impression the user receives of the web page, according to Schenkman and Jonsson (2000). While color certainly affects the impression a web page gives and can be used to enhance its aesthetic value, color also affects the usability of a web page and thus can serve a more practical purpose. Because of the ongoing search of the fastest, most efficient way to relay information, the effects that color can have are becoming increasing important. Used appropriately, color can increase the amount of information a user extracts from a single interface in a set amount of time. It can also increase user performance as measured in terms of accuracy. However, when used inappropriately, color can distract users and increase the time required for them to complete a task. Given the importance of using color effectively, it is important to know exactly which colors which will be beneficial to user performance.

Description of Project

Participants were 30 college students under age 40 from a small university. They completed a reading comprehension task presented in one of three color combinations. From this, we studied the effects of certain combinations of background and text color on user performance. Color combinations used were a blue background with white text, a black background with magenta text, and a gray background with black text.

We created series of web pages for this study which displayed the reading passage and questions. The web pages included an instruction page, a page with the reading comprehension passage, and one page each for the four questions about the passage. Each participant viewed the reading comprehension passage and the questions in one of the three color combinations. The time the participants spent on each page was recorded, as were their responses. Participants first read through the passage and clicked a button to continue to the next page. The following four pages each asked a question about the reading passage and also displayed a copy of the passage to which the participant could refer.

All computer display settings were checked to ensure equality in the color display. Computer monitors were at eye level, about one meter from the participant. All monitors initially displayed the instructions page. This page was displayed in a neutral color combination and the time the participants spent reading the instructions was not recorded.

Testing occurred in one session lasting approximately 5 minutes. Participants read the passage and answered the 4 questions about it using the series of web pages described above. Participants were instructed not to skip any questions.

Results

To determine whether differences existed in the time it took to read the passage and answer the questions depending on the color combination used, an ANOVA test was performed on the data. A second ANOVA test was run to determine if the color combination used affected the accuracy levels of participants. The color combinations were referred to as CC1 for the blue background and white text, CC2 for the black background and magenta text, and CC3 for the light gray background and black text.

The first ANOVA test with an alpha level of 0.05 indicated that the differences in the time spent reading the passage approached significance, F=2.568, and p = .0887. The color combination that produced the longest time was CC3 with a mean time of 63.267 seconds. CC2 and CC1 produced very similar reading times, with means of 51.467 seconds and 51.333 seconds, respectively.

The second ANOVA test showed that differences in accuracy levels by color combination also approached significance, F = 2.528, p=.0919. CC2 produced the highest accuracy rate with a mean of 3.067 correct answers, followed by CC1 with a mean of 2.600 correct answers. CC3 produced the lowest accuracy level with a mean of 2.133 correct answers.

Discussion

The results indicated a difference in the time a user spends reading a passage depending on which color combination in which it is displayed. Also a difference in accuracy rates existed between color combinations. Although not statistically significant, the data indicate that a gray background with black text is the slowest, least accurate way to display textual information. Further research using a larger population and more participants could be done to extend this study. More participants from a more diverse population would be useful in determining whether a significant difference between color combinations could be found. Also, further research could present participant with 3 sets of reading comprehension passages and questions, displayed in a random order, so that each participant would experience each color combination.

References

Alonso, D. L. & Norman, K. L. (1998) Apparency of contingencies in single panel and pull-down menus. International Journal of Human-Computer Studies, 49, 59-78.

Benway, J. P. (1999) Banner Blindness: What Searching Users Notice and Do Not Notice on the World Wide Web. Dissertation Abstracts International, 60, 1695.

Chen, C. (1998) Color in Human-Computer Interaction. Dissertation Abstracts International, 59, 1379.

D'Angelo, J. J. (1992) A study of the relationship between the use of color for text in computer screen design and the age of the computer user. Dissertation Abstracts International, 52, 6497.

Davis, E. G. & Swezey, R. W. (1983) Human factors guidelines in computer graphics: a case study. International Journal of Man-Machine Studies, 18, 113-133.

Huang, J., Kumar, S. R., Mitra, M., Zhu, W., & Zabih, R. (1999) Spatial Color Indexing and Applications. International Journal of Computer Vision, 35, 245-268.

Jacko, J. A., Barreto, A., Scott, I. U., Rosa, Jr., R. H., & Pappas, C. J. (2000) Using Electroencephalogram to Investigate Stages of Visual Search in Visually Impaired Computer Users: Preattention and Focal Attention. International Journal of Human-Computer Interaction, 12, 135-150.

Jacko, J. A., Rosa, Jr., R. H., Scott, I. U., Pappas, C. J., & Dixon, M. A. (2000) Visual Impairment: The Use of Visual Profiles in Evaluations of Icon Use in Computer-Based Tasks. International Journal of Human-Computer Interaction, 12, 151-164.

Kalyuga, S., Chandler, P., & Sweller, J. (1999) Managing Split-attention and Redundancy in Multimedia Instruction. Applied Cognitive Psychology, 13, 351-371.

Langen, M. & Rau, G. (1990) . Interactive colour design of interactive graphical displays using a prototyping tool based on colour metrics. Ergonomics, 33, 1043-1054.

Lightner, N. J. (1999) Visualization of Animated Information. Dissertation Abstracts International, 60, 4089.

Najjar, L. J. (1990) Using color effectively (or Peacocks Can't Fly) (IBM TR52.0018). Atlanta, GA: IBM Corporation.

Schenkman, B. N. & Jonsson, F. U. (2000) Aesthetics and preferences of web pages. Behaviour & Information Technology, 19, 367-377.

Shen, Y., Yuan, W., Hsu, W., & Chen, Y. (2000) Color Selection in the Consideration of Color Harmony for Interior Design. Color Research and Application, 25, 20-31.

Smith, N. S. & Billmeyer, Jr., F. W. (1997) Virtual Colour: Communication Standard and Analytical Tool. Color Research and Application, 22, 204-211.

Travis, D. S. (1990) Applying visual psychophysics to user interface design. Behaviour & Information Technology, 9, 425-438.

Van Nes, F. L. (1984) Limits of visual perception in the technology of visual display terminals. Behaviour and Information Technology, 3, 371-377.

Zimmer, H. D. (1999) Inappropriate colors impair word-picture and picture-word matching. Current Psychology of Cognition, 18, 3-25.


Click here to view pictures from this CREW project
.