Color in CSS Design: Color and Physiological Considerations

On the physiological level, it is the incompatibility between the way the eyes work and some color combinations that requires consideration. For example, the eyes normally cannot focus on certain shades of certain colors simultaneously when they are adjacent to each other. This means that when objects or texts are in these colors, they seem to vibrate, making the eyes to constantly refocus, which causes eye muscles to tense up and relax constantly, resulting in eye fatigue or eyestrain. Various color combinations can cause this problem. Having large areas of red and blue next to each other or red text on a blue background, or vice versa, for example, can cause it. Such color combinations can not only cause eyestrain but also poor visibility of shapes. For example, very bright, fluorescent, or vibrant colors can produce edges that appear to blur and/or after-image (ghost- image) effect, both of which make it difficult to make out shapes easily or correctly. An example is when yellow text is used on a white background.

Of course, colors do not have to be adjacent to each other for them to be incompatible with normal vision. The use of multiple pure or highly saturated colors, too, can cause the eyes to constantly refocus, because each color constantly attracts attention, again resulting in eyestrain. Like with legibility, these problems can largely be avoided by combining colors that produce good contrast, which itself is controlled primarily by luminance (lightness). Controlling saturation can also help; for example, combining colors that are widely different in saturation, such as dark (rich) colors with light (pale) ones, can produce good contrast.

Color combinations can also have more dire implications than simply compromising visibility, legibility, and so on. Research has shown, for example, that response to photic stimulation (caused, e.g., by the flashing of lights or patterns), which is a potential health risk, because it causes seizure in some people, happens more quickly and with more intensity with red color than with blue and green colors. This means that flashing colors at the red/yellow end of the color spectrum are more likely to cause seizure than flashing colors at the blue/green end. Also, flashing a darker color on a brighter one tends to reduce the possibility of a seizure trigger.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *