The Impact of Web Contents Color Contrast on Human Psychology in the Lens of HCI

Full Text (PDF, 993KB), PP.27-33

Views: 0 Downloads: 0


Ahamed. M Mithun 1,* Z. Abu Bakar 1 Wael. M. S. Yafooz 1

1. Faculty of Computer & Information Technology, Al-Madinah International University, Kuala Lumpur, 57100, Malaysia

* Corresponding author.


Received: 14 Jul. 2019 / Revised: 5 Aug. 2019 / Accepted: 14 Aug. 2018 / Published: 8 Oct. 2019

Index Terms

Color Contrast, Web Content, Contrast Ratio, Human-Computer Interaction, Visual


Web contents include text, image, and any visual element that represents in web applications. Users conduct web applications throughout visual contents; therefore, the contents should visible clearly and follow a strict contrast ratio to differentiate from the other contents of the application. The color contrast assists to visualize contents combining the contrast ratio between background and foreground. Whether the web contents not visible clearly or overpass to split its color contrast from the background shall be worthless, and in addition, the human brain and psychology have an impact of colors which lead physiologically effects such as feelings and senses. Numerous web applications existing on the web and some applications failed to follow the design principles of Human-Computer Interaction (HCI). In HCI, visualization is the most widespread research area and, in the context of visual interaction, the HCI facilitates and guides application design that to be user-centric. This research reveals the HCI for color effects on the human eye, brain, phycology, and contrast ratio. Also extended the existing standard minimum contrast ratio for the design of web contents in light and dark background and foreground following HCI principles. The extended ratio experimented on a web application contents to differentiate the accuracy between the existing and the extended ratio.

Cite This Paper

Ahamed. M Mithun, Z. Abu Bakar, Wael. M. S. Yafooz, "The Impact of Web Contents Color Contrast on Human Psychology in the Lens of HCI", International Journal of Information Technology and Computer Science(IJITCS), Vol.11, No.10, pp.27-33, 2019. DOI:10.5815/ijitcs.2019.10.04


[1]Caldwell. B, Cooper. M, Reid. L. G, and Vanderheiden. G, “Web content accessibility guidelines (WCAG) 2.0,” WWW Consortium (W3C), 2008, pp. 1-133.

[2]Gauss. Stephan, “Fundamentals of colour perception,” Colour Technology of Coatings (Wilhelm Kettler et al.), Germany, 2016, pp. 15-20.

[3]Cakir. M, Ozturk. B. T, Turan. E, Gonulalan. G, Polat. I, and Gunduz. K, “The effect of hypothyroidism on color contrast sensitivity: a prospective study,” European thyroid journal, 4(1), 2015, pp. 43-47.

[4]Singg. S and W Mull. C, “Effect of Color on Information Retention by Young Men and Women,” Juniper Online Journal of Case Studies, 2(4). doi: 10.19080/JOJCS.2017.02.555591, 2017, pp. 1-3.

[5]Ahamed. M, “Developing a Message Interface Architecture for Android Operating Systems,” American Scientific Research Journal for Engineering, Technology, and Sciences (ASRJETS), 14(3), 2015, pp. 54-65.

[6]Talaei. M, “Study of Human Reactions than Color and its Effects on Advertising,” International Journal of Accounting Research, 42(827), 2013, pp. 1-9.

[7]Kurt. S and Osueke. K. K, “The effects of color on the moods of college students,” SAGE Open, 4(1), 2014, pp. 1-12.

[8]Aghdaie. S. F. A and Honari. R, “Investigating the Psychological Impact of Colors on Process of Consumer Shopping Behavior,” International Review of Management and Business Research, 3(2), 2014, pp. 1244-1252.

[9]Kumar. S, Sterkenburg. J, Diekfuss. J, and Jeon. M, “Color effects on students’ emotions and task performance in a web-based learning management system,” Proceedings of the International Conference on Multimedia and Human Computer Interaction, Canada, 2013, pp. 1-5.

[10]Vitols. G, Arhipova. I, Hirata. Y, and Ikarts. I, “Colour Extraction and Analysis Solution for Design of Cross-cultural Websites,” Procedia Computer Science, 77, 2015, pp. 215-220.

[11]Rello. L and Bigham. J. P, “Good Background Colors for Readers: A Study of People with and without Dyslexia,” In Proceedings of the 19th International ACM SIGACCESS Conference on Computers and Accessibility, ACM, 2017, pp. 72-80.

[12]Richardson. R. T, Drexler. T. L, and Delparte. D. M, “Color and contrast in E-Learning design: A review of the literature and recommendations for instructional designers and web developers,” MERLOT Journal of Online Learning and Teaching, 10(4), 2014, pp. 657-670.

[13]Olurinola. O and Tayo. O, “Colour in Learning: Its Effect on the Retention Rate of Graduate Students,” Journal of Education and Practice, 6(14), 2015, pp. 1-5.

[14]AL‐Ayash. A, Kane. R. T, Smith. D, and Green‐Armytage. P, “The influence of color on student emotion, heart rate, and performance in learning environments,” Color Research & Application, 41(2), 2016, pp. 196-205.

[15]Brooker. A and Franklin. A, “The effect of colour on children's cognitive performance,” British Journal of Educational Psychology, 86(2), 2016, pp. 241-255.

[16]Ahamed. M. M and ZA. Bakar, “Analysis of Human Machine Interaction Design Perspective-A Comprehensive Literature Review,” International Journal on Contemporary Computer Research (IJCCR), 1(1), 2017, pp. 31-42.

[17]Gundlach. B. S et al., “Design considerations for the enhancement of human color vision by breaking binocular redundancy,” Scientific reports, 8(1), 2018, pp. 1-8.

[18]Elliot. A. J, “Color and psychological functioning: a review of theoretical and empirical work,” Frontiers in Psychology, 6, 2015, p. 368.

[19]Chang. B, Xu. R, and Watt. T, “The Impact of Colors on Learning,” Adult Education Research Conference 2018, Canada, 2018, pp. 1-7.

[20]Dzulkifli. M. A and Mustafar. M. F, “The influence of colour on memory performance: A review,” The Malaysian journal of medical sciences: MJMS, 20(2), 2013, p. 3.

[21]Mithun. A. M, Bakar. Z. A, and Yafooz. W. S, “Revised Theoretical Approach of Activity Theory for Human Computer Interaction Design,” In Science and Information Conference, Springer, Cham, 2018, July, pp. 803-815.

[22]Sandnes. F. E and Zhao. A, “An interactive color picker that ensures WCAG2. 0 compliant color contrast levels,” Procedia Computer Science, 67, 2015, pp. 87-94.