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.